diff --git a/apps/36-blocks-widget/src/app/app.component.scss b/apps/36-blocks-widget/src/app/app.component.scss index ef6ab2dc..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/app.component.scss +++ b/apps/36-blocks-widget/src/app/app.component.scss @@ -1,41 +0,0 @@ -// .hcaptcha-container { -// margin: 20px 0; -// padding: 15px; -// border: 1px solid #e0e0e0; -// border-radius: 8px; -// background-color: #f9f9f9; -// display: flex; -// justify-content: center; -// } - -// .captcha-status { -// margin: 15px 0; -// padding: 10px; -// background-color: #e8f5e8; -// border: 1px solid #4caf50; -// border-radius: 4px; - -// p { -// margin: 0 0 10px 0; -// color: #2e7d32; -// font-weight: 500; -// } - -// button { -// background-color: #f44336; -// color: white; -// border: none; -// padding: 8px 16px; -// border-radius: 4px; -// cursor: pointer; -// font-size: 14px; - -// &:hover { -// background-color: #d32f2f; -// } -// } -// } - -// // :host div { -// // height: 100vh; -// // } diff --git a/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss b/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss index 7ce9555d..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss +++ b/apps/36-blocks-widget/src/app/otp/component/send-otp-center/send-otp-center.component.scss @@ -1,21 +0,0 @@ -// :host { -// display: flex; -// flex-direction: column; -// justify-content: center; -// position: relative; -// } - -// /* API-driven button hover color override */ -// .has-hover-color:hover { -// background-color: var(--btn-hover-color) !important; -// } - -// /* intl-tel-input: force wrapper to fill container */ -// :host ::ng-deep .iti { -// width: 100%; -// } - -// /* intl-tel-input: prevent flag from overlapping input text */ -// :host ::ng-deep .iti input[type='tel'] { -// padding-left: 52px !important; -// } diff --git a/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss b/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss index 57d5f6f2..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss +++ b/apps/36-blocks-widget/src/app/otp/component/subscription-center/subscription-center.component.scss @@ -1,398 +0,0 @@ -// @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); - -// .container { -// background: #ffffff !important; -// padding: 20px; -// text-align: left; -// position: relative; -// height: 100vh; -// width: 100vw; -// font-family: 'Outfit', sans-serif; -// z-index: 1; -// flex-direction: column; -// overflow-y: auto; -// box-sizing: border-box; -// } - -// /* When used in dialog, override the positioning */ -// :host-context(.subscription-center-dialog) .container { -// position: relative !important; -// top: auto !important; -// left: auto !important; -// right: auto !important; -// bottom: auto !important; -// height: 100% !important; -// width: 100% !important; -// max-height: 700px !important; -// max-width: 900px !important; -// } - -// /* Dialog-specific styling for better layout */ -// :host-context(.subscription-center-dialog) { -// .subscription-plans-container { -// padding: 10px !important; -// height: calc(100% - 40px) !important; -// } - -// .plans-grid { -// justify-content: space-around !important; -// // align-items: flex-start !important; -// } - -// .plan-card { -// flex: 0 0 280px !important; -// margin: 10px !important; -// } -// } - -// // Subscription Plans Styles -// .subscription-plans-container { -// flex: 1; -// display: flex; -// flex-direction: column; -// align-items: stretch; -// justify-content: flex-start; -// padding: 20px; -// min-height: auto; -// overflow-y: visible; -// font-family: 'Outfit', sans-serif; -// } - -// .plans-grid { -// display: flex; -// flex-direction: row; -// gap: 20px; -// width: 100%; -// max-width: 100%; -// margin: 0; -// align-items: flex-start; -// padding: 0 0 0 20px; -// overflow-x: auto; -// // overflow-y: hidden; - -// // Custom scrollbar styling -// &::-webkit-scrollbar { -// height: 8px; -// } - -// &::-webkit-scrollbar-track { -// background: #f1f1f1; -// border-radius: 4px; -// } - -// &::-webkit-scrollbar-thumb { -// background: #c1c1c1; -// border-radius: 4px; - -// &:hover { -// background: #a8a8a8; -// } -// } - -// // Responsive behavior for smaller screens -// @media (max-width: 1200px) { -// gap: 15px; -// padding: 15px; -// } - -// @media (max-width: 768px) { -// flex-direction: column; -// align-items: center; -// gap: 20px; -// overflow-x: visible; -// overflow-y: auto; -// } -// } - -// // Ensure highlighted border is always visible -// .plan-card.highlighted { -// border: 2px solid #000000 !important; -// box-shadow: 0 0 0 0px #000000 !important; -// } - -// .plan-card { -// background: #ffffff; -// border: 2px solid #e6e6e6; -// border-radius: 4px; -// padding: 26px 24px; -// transition: all 0.3s ease; -// box-shadow: none; -// min-width: 250px; -// max-width: 350px; -// width: 350px; -// flex: 1; -// display: flex; -// flex-direction: column; -// justify-content: flex-start; -// min-height: auto; -// max-height: none; -// overflow: visible; -// min-height: 348px; -// font-family: 'Outfit', sans-serif; -// } - -// // Dark mode support for plan cards -// // :host-context(.dark-theme) .plan-card { -// // background: var(--color-common-slate); -// // border: 1px solid var(--color-common-border); -// // color: var(--color-common-text); - -// // &:hover { -// // transform: translateY(-8px); -// // box-shadow: none; -// // } - -// // &.popular { -// // transform: scale(1.02); - -// // &:hover { -// // transform: scale(1.02) translateY(-8px); -// // } -// // } - -// // &.highlighted { -// // border: 2px solid #000000 !important; -// // box-shadow: 0 0 0 0px #000000 !important; -// // } -// // } - -// // Dark mode support for highlighted cards -// // :host-context(.dark-theme) .plan-card.highlighted { -// // border: 2px solid var(--color-common-text) !important; -// // box-shadow: 0 0 0 2px var(--color-common-text) !important; - -// // // Mobile responsive -// // @media (max-width: 768px) { -// // min-width: 100%; -// // max-width: 400px; -// // width: 100%; -// // padding: 30px 20px; - -// // &.popular { -// // transform: none; - -// // &:hover { -// // transform: translateY(-8px); -// // } -// // } -// // } -// // } - -// .popular-badge { -// position: absolute; -// top: -12px; -// right: 20px; -// background: #4d4d4d; -// color: #ffffff; -// padding: 6px 16px; -// border-radius: 20px; -// font-size: var(--font-size-12); -// font-weight: 600; -// text-transform: uppercase; -// letter-spacing: 0.5px; -// } - -// .plan-title { -// font-size: var(--font-size-28); -// font-weight: 700; -// color: var(--color-common-slate); -// @media (max-width: 768px) { -// font-size: 24px; -// } -// } - -// .plan-price { -// .price-container { -// display: flex; -// align-items: flex-start; -// gap: 6px; -// } - -// .price-number { -// font-size: 39px; -// font-weight: 700; -// color: #4d4d4d; -// line-height: 1; - -// @media (max-width: 768px) { -// font-size: 42px; -// } -// } - -// .price-currency { -// font-size: 16px; -// font-weight: 400; -// color: #666666; -// line-height: 1; -// margin-top: 4px; -// margin-left: 4px; - -// @media (max-width: 768px) { -// font-size: 14px; -// } -// } - -// .price-period { -// font-size: 18px; -// color: #666666; -// font-weight: 500; - -// @media (max-width: 768px) { -// font-size: 16px; -// } -// } -// } - -// .plan-description { -// .description-text { -// font-size: 14px; -// color: #666666; -// font-style: italic; -// } -// } - -// .included-resources { -// .resource-boxes { -// display: flex; -// flex-direction: column; -// gap: 8px; -// margin-top: 6px; -// } - -// .resource-box { -// border-radius: 4px; -// padding: 4px 2px; -// font-size: 14px; -// font-weight: 600; -// color: #4d4d4d; -// text-align: left; -// } -// } - -// .section-title { -// font-size: 18px; -// font-weight: 600; -// color: #333333; -// margin: 0 0 8px 0; -// } - -// .plan-features { -// list-style: none; - -// .feature-item { -// padding: 4px 0 !important; -// margin-bottom: 0px !important; -// color: #4d4d4d; -// font-size: 14px; -// font-weight: 600; -// // padding-left: 20px; - -// .feature-icon { -// font-weight: bold; -// font-size: 14px; -// color: #22c55e; -// } -// } -// } - -// .plan-button { -// width: 65%; -// padding: 6px 6px; -// border-radius: 4px; -// font-size: 15px; -// font-weight: 400; -// font-family: 'Outfit', sans-serif; -// cursor: pointer; -// transition: all 0.3s ease; -// border: 1px solid; -// margin-top: auto; - -// &.primary { -// background: #4d4d4d; -// color: #ffffff; -// border-color: #4d4d4d; -// font-weight: 700; - -// &:hover { -// background: #333333; -// border-color: #333333; -// } -// } - -// &.secondary { -// background: #ffffff; -// color: #4d4d4d; -// border-color: #4d4d4d; - -// &:hover { -// background: #f8f9fa; -// } -// } - -// @media (max-width: 768px) { -// padding: 14px 28px; -// font-size: 16px; -// } -// } - -// .plan-button-hidden { -// padding: 16px 32px; -// border-radius: 12px; -// font-size: 18px; -// font-weight: 600; -// font-family: 'Outfit', sans-serif; -// background: #f8f9fa; -// color: #6c757d; -// border: 2px solid #e9ecef; -// margin-top: auto; -// cursor: not-allowed; - -// @media (max-width: 768px) { -// padding: 14px 28px; -// font-size: 16px; -// } -// } - -// .close-dialog { -// position: absolute; -// top: 16px; -// right: 16px; -// z-index: 1000; - -// svg { -// width: 12px; -// height: 12px; -// } -// } - -// .divider { -// height: 1px; -// background: #e0e0e0; -// } -// :host { -// min-height: 100px; -// display: flex; -// flex-direction: column; -// justify-content: center; -// .close-dialog { -// position: absolute; -// right: 16px; -// top: 16px; -// width: 20px; -// height: 20px; -// line-height: 20px; -// @media only screen and (max-width: 768px) { -// position: fixed; -// } -// } -// .input-filed-wrapper { -// display: flex; -// justify-content: center; -// flex-direction: column; -// position: relative; -// } -// .login-toggle { -// margin-top: 24px; -// font-size: 13px; -// } -// } diff --git a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss index 76c0be11..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss +++ b/apps/36-blocks-widget/src/app/otp/organization-details/organization-details.component.scss @@ -1 +0,0 @@ -// Styles migrated to Tailwind CSS — no custom classes needed. diff --git a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss index 403805bd..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss +++ b/apps/36-blocks-widget/src/app/otp/user-management/user-management.component.scss @@ -1,153 +0,0 @@ -// ── Hover-reveal actions (cannot be done in Tailwind without JS) ───────────── -.hover-actions { - opacity: 0; - transition: opacity 0.15s ease; - position: absolute; - top: 6px; - right: 12px; - z-index: 10; -} - -.table-row:hover .hover-actions { - opacity: 1; -} - -.user-item:hover .user-actions { - opacity: 1; - visibility: visible; -} - -// ── Skeleton shimmer (keyframe animation — not in Tailwind) ─────────────────── -@keyframes shimmer { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} - -.skeleton-avatar, -.skeleton-text, -.skeleton-button { - border-radius: 4px; - background: linear-gradient( - 90deg, - var(--proxy-neutral-90) 25%, - var(--proxy-neutral-95) 50%, - var(--proxy-neutral-90) 75% - ); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; -} - -.skeleton-avatar { - width: 40px; - height: 40px; - border-radius: 50%; -} - -.skeleton-name { - width: 120px; - height: 16px; - margin-bottom: 6px; -} -.skeleton-email { - width: 180px; - height: 14px; -} -.skeleton-role { - width: 80px; - height: 14px; -} -.skeleton-button { - width: 60px; - height: 32px; -} - -// .dark-theme .skeleton-avatar, -// .dark-theme .skeleton-text, -// .dark-theme .skeleton-button { -// background: linear-gradient( -// 90deg, -// var(--proxy-neutral-30) 25%, -// var(--proxy-neutral-20) 50%, -// var(--proxy-neutral-30) 75% -// ); -// background-size: 200% 100%; -// animation: shimmer 1.5s infinite; -// } - -// ── Angular Material table cell resets ─────────────────────────────────────── -table { - box-shadow: none !important; -} - -th, -td { - border: 1px solid var(--proxy-neutral-90); - padding: 14px; - text-align: left; -} -td.mat-cell { - padding: 10px; -} -th { - font-weight: 600; - height: 22px; - padding-left: 12px !important; -} -td { - font-size: 12px; - height: 22px; -} - -.role-column { - width: 25% !important; -} -.permissions-column { - width: 70% !important; - overflow: visible; - position: relative; -} -.permission-column { - overflow: visible; -} -.permissions-cell-content { - min-height: 40px; - padding-right: 60px; -} - -// ── ::ng-deep for Material overlay/tooltip (cannot scope otherwise) ─────────── -::ng-deep .btn-danger { - background-color: var(--proxy-error-40) !important; - color: var(--proxy-neutral-100) !important; - - &:hover, - &:focus { - background-color: var(--proxy-error-40) !important; - filter: brightness(0.85); - } -} - -::ng-deep .permissions-tooltip, -::ng-deep .email-tooltip { - background-color: rgba(0, 0, 0, 0.9) !important; - color: var(--proxy-neutral-100) !important; - font-size: 12px !important; - white-space: pre-line !important; - border-radius: 4px !important; - padding: 10px !important; - line-height: 1.4 !important; - text-align: left !important; -} - -// ── Mobile overrides for mat-form-field hint ────────────────────────────────── -.mobile-number-field { - @media (max-width: 600px) { - margin-bottom: 16px; - } - @media (max-width: 380px) { - margin-bottom: 30px; - } -} diff --git a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss index e852dfe0..e69de29b 100644 --- a/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss +++ b/apps/36-blocks-widget/src/app/otp/user-profile/user-profile.component.scss @@ -1,666 +0,0 @@ -// Styling handled by Tailwind utility classes in the template. -/* -.container { - background: var(--color-common-bg); - padding: 15px 60px; - text-align: left; - position: relative; - min-height: 600px; - height: 100%; - z-index: 10; - - @media (max-width: 1024px) { - padding: 15px; - width: 100%; - } - @media (max-width: 768px) { - padding: 10px; - width: 100%; - } - @media (max-width: 480px) { - padding: 8px; - } - - .mb-4 { - margin-bottom: 24px; - } - - .profile-card, - .org-card { - border-radius: 12px; - overflow: hidden; - } - - .card-header { - padding: 18px 24px; - display: flex; - align-items: center; - justify-content: space-between; - } - - .card-title-group { - display: flex; - align-items: center; - gap: 10px; - } - - .card-icon { - width: 34px; - height: 34px; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - } - - .card-title { - font-size: 15px; - font-weight: 700; - letter-spacing: -0.2px; - } - .card-subtitle { - font-size: 12px; - margin-top: 1px; - } - - .btn-edit { - display: inline-flex !important; - align-items: center; - gap: 6px; - padding: 7px 16px !important; - border-radius: 7px !important; - font-size: 13px !important; - font-weight: 600 !important; - line-height: 1 !important; - svg { - flex-shrink: 0; - } - } - - .profile-banner { - padding: 20px 24px; - display: flex; - align-items: center; - gap: 16px; - } - - .avatar-stack { - position: relative; - flex-shrink: 0; - } - - .avatar { - width: 56px; - height: 56px; - border-radius: 14px; - background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%); - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - font-weight: 700; - color: var(--color-common-white); - letter-spacing: -0.5px; - } - - .avatar-status { - position: absolute; - bottom: -2px; - right: -2px; - width: 13px; - height: 13px; - border-radius: 50%; - background: var(--color-common-green); - } - - .profile-name { - font-size: 17px; - font-weight: 700; - letter-spacing: -0.3px; - } - .profile-email { - font-size: 13px; - margin-top: 3px; - } - - .org-stat-chip { - display: inline-flex; - align-items: center; - gap: 5px; - font-size: 11px; - font-weight: 600; - padding: 4px 10px; - border-radius: 20px; - margin-top: 8px; - } - - // ── VIEW MODE ────────────────────────────────── - - .view-fields { - padding: 0; - display: flex; - flex-direction: row; - @media (max-width: 600px) { - flex-direction: column; - } - } - - .view-row { - flex: 1; - display: flex; - align-items: center; - gap: 14px; - padding: 16px 24px; - transition: background 0.12s; - &:not(:last-child) { - border-right-width: 1px; - border-right-style: solid; - @media (max-width: 600px) { - border-right: none; - border-bottom-width: 1px; - border-bottom-style: solid; - } - } - } - - .view-field-icon { - width: 32px; - height: 32px; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - } - - .view-field-body { - flex: 1; - } - - .view-label { - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.9px; - margin-bottom: 4px; - } - - .view-value { - font-size: 14px; - font-weight: 500; - } - .view-value-empty { - font-style: italic; - font-weight: 400; - font-size: 13px; - } - - // ── EDIT / FORM ──────────────────────────────── - - .profile-form { - padding: 16px 24px 0; - } - - .fields-row { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 8px 20px; - @media (max-width: 768px) { - grid-template-columns: 1fr; - gap: 4px; - } - } - - .form-field-wrap { - display: flex; - flex-direction: column; - } - .full-width { - width: 100%; - } - - .form-footer { - display: flex; - align-items: center; - justify-content: flex-end; - padding: 8px 0 20px; - margin-top: 4px; - flex-wrap: wrap; - gap: 10px; - } - - .form-hint { - font-size: 12px; - } - .form-actions { - display: flex; - align-items: center; - gap: 10px; - } - - .btn-cancel { - display: inline-flex !important; - align-items: center; - gap: 6px; - // padding: 7px 16px !important; - border-radius: 7px !important; - font-size: 13px !important; - font-weight: 600 !important; - } - - .btn-save { - display: inline-flex !important; - align-items: center; - gap: 6px; - // padding: 9px 20px !important; - border-radius: 7px !important; - font-size: 13px !important; - font-weight: 600 !important; - svg { - flex-shrink: 0; - } - } - - // ── ORG SECTION ─────────────────────────────── - - .org-count-badge { - font-size: 12px; - font-weight: 600; - padding: 5px 12px; - border-radius: 20px; - } - - .org-cell-inner { - display: flex; - align-items: center; - gap: 12px; - } - - .org-avatar-sm { - width: 32px; - height: 32px; - border-radius: 7px; - display: flex; - align-items: center; - justify-content: center; - font-size: 11px; - font-weight: 700; - flex-shrink: 0; - } - - .org-name { - font-size: 14px; - font-weight: 500; - display: flex; - align-items: center; - gap: 6px; - flex-wrap: wrap; - } - - .current-org { - font-weight: 700 !important; - } - - .current-badge { - display: inline-flex; - align-items: center; - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; - padding: 2px 8px; - border-radius: 20px; - } - - .btn-leave { - font-size: 12px !important; - font-weight: 600 !important; - padding: 5px 13px !important; - border-radius: 6px !important; - line-height: 1.6 !important; - min-height: unset !important; - height: auto !important; - } - - .no-data { - text-align: center; - font-size: 14px; - font-weight: 600; - padding: 32px; - } - - // ══════════════════════════════════════════════ - // LIGHT THEME - // ══════════════════════════════════════════════ - &.light-theme { - color: var(--color-common-text); - background-color: var(--color-common-bg); - .profile-card, - .org-card { - background: var(--color-common-bg); - border: 1px solid var(--color-common-border); - } - - .card-header { - background: var(--color-common-app-bg); - border-bottom: 1px solid var(--color-common-border); - } - .card-icon.blue { - background: #eff6ff; - svg { - stroke: #2563eb; - } - } - .card-icon.green { - background: #ecfdf5; - svg { - stroke: #059669; - } - } - .card-title { - color: #111827; - } - .card-subtitle { - color: #9ca3af; - } - - .btn-edit { - color: #2563eb !important; - border-color: #dbeafe !important; - background: #eff6ff !important; - &:hover { - background: #dbeafe !important; - } - } - - .profile-banner { - background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, transparent 60%); - border-bottom: 1px solid var(--color-common-border); - } - - .avatar-status { - border: 2.5px solid var(--color-common-white); - } - .profile-name { - color: #111827; - } - .profile-email { - color: #9ca3af; - } - .org-stat-chip { - background: #eff6ff; - color: #2563eb; - border: 1px solid #dbeafe; - } - - .view-row { - border-right-color: var(--color-common-border); - border-bottom-color: var(--color-common-border); - &:hover { - background: var(--color-common-app-bg); - } - } - .view-field-icon { - background: #eff6ff; - svg { - stroke: #2563eb; - } - } - .view-label { - color: #9ca3af; - } - .view-value { - color: #111827; - } - .view-value-empty { - color: #9ca3af; - } - - .form-hint { - color: #9ca3af; - } - - .btn-cancel { - color: var(--color-common-text) !important; - border-color: var(--color-common-border) !important; - background: var(--color-common-bg) !important; - &:hover { - border-color: var(--color-common-grey) !important; - } - } - .btn-save { - background-color: #2563eb !important; - color: #ffffff !important; - &:hover { - background-color: #1d4ed8 !important; - } - } - - .org-avatar-sm { - background: var(--color-common-bg-light); - border: 1px solid var(--color-common-border); - color: var(--color-common-grey); - &.current { - background: #eff6ff; - border-color: #dbeafe; - color: #2563eb; - } - } - .org-name { - color: var(--color-common-text); - } - .current-org { - color: #111827 !important; - } - .current-badge { - color: #059669; - background: #ecfdf5; - border: 1px solid #a7f3d0; - } - .btn-leave { - background-color: rgba(220, 38, 38, 0.06) !important; - color: var(--proxy-error-40) !important; - border: 1px solid rgba(220, 38, 38, 0.2) !important; - &:hover { - background-color: rgba(220, 38, 38, 0.12) !important; - } - } - .org-count-badge { - background: var(--color-common-bg-light); - color: var(--color-common-grey); - border: 1px solid var(--color-common-border); - } - .no-data { - color: var(--color-common-grey); - } - .success-message { - color: var(--color-common-green); - } - .error-message { - color: var(--proxy-error-40); - } - } - - // ══════════════════════════════════════════════ - // DARK THEME — background stays transparent - // No ::ng-deep needed — ViewEncapsulation.None - // ══════════════════════════════════════════════ - &.dark-theme { - color: #e5e7eb; - - h2, - h3 { - color: #ffffff; - } - - .profile-card, - .org-card { - border: 1px solid rgba(255, 255, 255, 0.08) !important; - } - - .card-header { - background: rgba(0, 0, 0, 0.22) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; - } - .card-icon.blue { - background: rgba(74, 158, 255, 0.2) !important; - svg { - stroke: #6ab4ff; - } - } - .card-icon.green { - background: rgba(50, 215, 75, 0.18) !important; - svg { - stroke: #4dd96a; - } - } - .card-title { - color: #ffffff !important; - } - .card-subtitle { - color: #c5c5ca !important; - } - - .btn-edit { - color: #6ab4ff !important; - border-color: rgba(74, 158, 255, 0.4) !important; - background: rgba(74, 158, 255, 0.15) !important; - &:hover { - background: rgba(74, 158, 255, 0.25) !important; - } - } - - .profile-banner { - background: linear-gradient(135deg, rgba(74, 158, 255, 0.08) 0%, transparent 60%) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; - } - - .avatar-status { - border: 2.5px solid #2c2c2e !important; - } - .profile-name { - color: #ffffff !important; - } - .profile-email { - color: #c5c5ca !important; - } - .org-stat-chip { - background: rgba(74, 158, 255, 0.18) !important; - color: #6ab4ff !important; - border: 1px solid rgba(74, 158, 255, 0.35) !important; - } - - .view-row { - border-right-color: rgba(255, 255, 255, 0.12) !important; - border-bottom-color: rgba(255, 255, 255, 0.12) !important; - &:hover { - background: rgba(255, 255, 255, 0.05) !important; - } - } - .view-field-icon { - background: rgba(74, 158, 255, 0.18) !important; - svg { - stroke: #6ab4ff; - } - } - .view-label { - color: #c5c5ca !important; - } - .view-value { - color: #ffffff !important; - } - .view-value-empty { - color: #9ca3af !important; - } - - .form-hint { - color: #c5c5ca !important; - } - - .btn-cancel { - color: #e5e7eb !important; - border-color: rgba(255, 255, 255, 0.4) !important; - background: transparent !important; - &:hover { - border-color: rgba(255, 255, 255, 0.7) !important; - color: #ffffff !important; - } - } - .btn-save { - background-color: #4a9eff !important; - color: #ffffff !important; - &:hover { - background-color: #5aaeff !important; - } - } - - .org-avatar-sm { - background: rgba(255, 255, 255, 0.1) !important; - border: 1px solid rgba(255, 255, 255, 0.18) !important; - color: #c5c5ca !important; - &.current { - background: rgba(74, 158, 255, 0.2) !important; - border-color: rgba(74, 158, 255, 0.4) !important; - color: #6ab4ff !important; - } - } - .org-name { - color: #e5e7eb !important; - } - .current-org { - color: #ffffff !important; - } - .current-badge { - color: #4dd96a !important; - background: rgba(50, 215, 75, 0.15) !important; - border: 1px solid rgba(50, 215, 75, 0.3) !important; - } - .btn-leave { - background-color: rgba(255, 69, 58, 0.15) !important; - color: #ff6b63 !important; - border: 1px solid rgba(255, 69, 58, 0.35) !important; - &:hover { - background-color: rgba(255, 69, 58, 0.25) !important; - } - } - .org-count-badge { - background: rgba(255, 255, 255, 0.1) !important; - color: #c5c5ca !important; - border: 1px solid rgba(255, 255, 255, 0.18) !important; - } - .mat-card { - background-color: transparent !important; - } - .no-data { - color: #c5c5ca !important; - } - .success-message { - color: var(--color-common-green) !important; - } - .error-message { - color: var(--proxy-error-80) !important; - } - } - - // ── RESPONSIVE ───────────────────────────────── - @media (max-width: 768px) { - .org-table { - font-size: 12px; - } - th, - td { - padding: 8px; - } - } - @media (max-width: 480px) { - .org-table { - width: 100%; - font-size: 12px; - } - .fields-row { - grid-template-columns: 1fr; - } - } -} -*/ diff --git a/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss b/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss index 96a1a69b..0f7d698f 100644 --- a/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss +++ b/apps/36-blocks-widget/src/app/otp/widget/widget.component.scss @@ -5,12 +5,6 @@ @custom-variant dark (&:where(.dark, .dark *)); :host { - display: block !important; - height: inherit !important; - min-height: inherit !important; - max-height: inherit !important; - background: transparent !important; - // Prevent client-page CSS from bleeding into the widget. // Shadow DOM already blocks inherited styles at the boundary, // but these resets guard against any CSS that targets :host from outside. diff --git a/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss b/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss deleted file mode 100644 index 8beb483b..00000000 --- a/apps/36-blocks-widget/src/assets/scss/component/_form-field.scss +++ /dev/null @@ -1,118 +0,0 @@ -// // Default theme changes -// .mat-form-field { -// .mat-form-field-wrapper { -// .mat-form-field-subscript-wrapper { -// margin-top: 5px; -// padding-left: 0px; -// .mat-error { -// font-size: 12px; -// } -// } -// .mat-form-field-flex { -// font-size: 14px; -// line-height: 1.225; -// .mat-form-field-infix { -// .mat-form-field-label-wrapper { -// .mat-form-field-label { -// color: var(--color-common-slate); -// } -// } -// } -// .mat-form-field-infix { -// padding: 5px 0 10px 0 !important; -// .mat-input-element { -// &::-webkit-input-placeholder { -// /* Chrome/Opera/Safari */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &::-moz-placeholder { -// /* Firefox 19+ */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &:-ms-input-placeholder { -// /* IE 10+ */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &:-moz-placeholder { -// /* Firefox 18- */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// } -// // .mat-form-field-label-wrapper { -// // .mat-form-field-required-marker { -// // display: none; -// // } -// // } -// &.mat-form-field-appearance-outline { -// .mat-form-field-outline { -// background-color: var(--color-common-white) !important; -// } -// } -// } -// .mat-form-field-flex { -// .mat-form-field-outline { -// .mat-form-field-outline-start { -// border-radius: var(--border-common-radius-4) 0 0 var(--border-common-radius-4); -// min-width: var(--border-common-radius-4); -// } -// .mat-form-field-outline-end { -// border-radius: 0 var(--border-common-radius-4) var(--border-common-radius-4) 0; -// } -// } -// } -// } -// .mat-form-field-hint-wrapper { -// .mat-hint { -// color: var(--color-common-slate); -// font-size: 12px; -// line-height: 16px; -// } -// } -// } - -// &.no-space { -// .mat-form-field-wrapper { -// padding-bottom: 0px !important; -// } -// } -// } - -// .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, -// .mat-form-field-appearance-outline.mat-form-field-can-float -// .mat-input-server:focus -// + .mat-form-field-label-wrapper -// .mat-form-field-label { -// transform: translateY(-15px) scale(0.7) !important; -// } - -// .mat-form-field-appearance-outline .mat-form-field-label { -// top: 18px !important; -// } - -// /* Firefox hide */ -// input[matinput][type='number'] { -// -moz-appearance: textfield; -// } -// /* Chrome, Safari, Edge, Opera */ -// input[matinput]::-webkit-outer-spin-button, -// input[matinput]::-webkit-inner-spin-button { -// -webkit-appearance: none; -// margin: 0; -// } - -// // Material Form Error -// .mat-error { -// font-size: 12px; -// } - -// // Used to display only first mat-error -// mat-error { -// display: none !important; -// &:first-child { -// display: block !important; -// } -// } diff --git a/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss b/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss deleted file mode 100644 index 98889204..00000000 --- a/apps/36-blocks-widget/src/assets/scss/component/_tabs.scss +++ /dev/null @@ -1,24 +0,0 @@ -// .user-management-tabs { -// .mat-tab-header { -// .mat-tab-labels { -// .mat-tab-label { -// font-weight: 600 !important; -// color: var(--color-common-black) !important; -// opacity: 1 !important; -// &:focus { -// color: var(--color-common-black) !important; -// } -// } -// } -// } -// } - -// .nested-tabs { -// .mat-tab-header { -// .mat-tab-labels { -// .mat-tab-label { -// font-weight: 500 !important; -// } -// } -// } -// } diff --git a/apps/36-blocks-widget/src/assets/scss/layout/_display.scss b/apps/36-blocks-widget/src/assets/scss/layout/_display.scss deleted file mode 100644 index 390f0f10..00000000 --- a/apps/36-blocks-widget/src/assets/scss/layout/_display.scss +++ /dev/null @@ -1,94 +0,0 @@ -.d-none { - display: none; -} - -.d-block { - display: block !important; -} - -.d-inline-block { - display: inline-block !important; -} - -.d-flex { - display: flex !important; -} - -.d-inline-flex { - display: inline-flex !important; -} - -.d-grid { - display: grid !important; -} - -.flex-column { - flex-direction: column; -} - -.flex-row { - flex-direction: row; -} - -.justify-content-between { - justify-content: space-between; -} - -.justify-content-start { - justify-content: start; -} - -.justify-content-end { - justify-content: flex-end; -} - -.align-items-center { - align-items: center; -} - -.align-items-start { - align-items: flex-start; -} - -.align-items-end { - align-items: flex-end; -} - -.align-items-stretch { - align-items: stretch; -} - -.gap-1 { - gap: 4px; -} -.gap-2 { - gap: 8px; -} -.gap-3 { - gap: 16px; -} -.gap-4 { - gap: 24px; -} -.gap-5 { - gap: 32px; -} - -.text-center { - text-align: center !important; -} - -.text-left { - text-align: left !important; -} - -.text-right { - text-align: right !important; -} -.flex-wrap { - flex-wrap: wrap !important; -} - -.justify-content-center { - justify-content: center !important; -} diff --git a/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss b/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss deleted file mode 100644 index 5a4a9b79..00000000 --- a/apps/36-blocks-widget/src/assets/scss/layout/_spacing.scss +++ /dev/null @@ -1,265 +0,0 @@ -.m-0 { - margin: 0 !important; -} -.mt-0, -.my-0 { - margin-top: 0 !important; -} -.mr-0, -.mx-0 { - margin-right: 0 !important; -} -.mb-0, -.my-0 { - margin-bottom: 0 !important; -} -.ml-0, -.mx-0 { - margin-left: 0 !important; -} -.m-1 { - margin: 0.25rem !important; -} -.mt-1, -.my-1 { - margin-top: 0.25rem !important; -} -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; -} -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; -} -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; -} -.m-2 { - margin: 0.5rem !important; -} -.mt-2, -.my-2 { - margin-top: 0.5rem !important; -} -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; -} -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; -} -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; -} -.m-3 { - margin: 1rem !important; -} -.mt-3, -.my-3 { - margin-top: 1rem !important; -} -.mr-3, -.mx-3 { - margin-right: 1rem !important; -} -.mb-3, -.my-3 { - margin-bottom: 1rem !important; -} -.ml-3, -.mx-3 { - margin-left: 1rem !important; -} -.m-4 { - margin: 1.5rem !important; -} -.mt-4, -.my-4 { - margin-top: 1.5rem !important; -} -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; -} -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; -} -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; -} -.m-5 { - margin: 3rem !important; -} -.mt-5, -.my-5 { - margin-top: 3rem !important; -} -.mr-5, -.mx-5 { - margin-right: 3rem !important; -} -.mb-5, -.my-5 { - margin-bottom: 3rem !important; -} -.ml-5, -.mx-5 { - margin-left: 3rem !important; -} -.p-0 { - padding: 0 !important; -} -.pt-0, -.py-0 { - padding-top: 0 !important; -} -.pr-0, -.px-0 { - padding-right: 0 !important; -} -.pb-0, -.py-0 { - padding-bottom: 0 !important; -} -.pl-0, -.px-0 { - padding-left: 0 !important; -} -.p-1 { - padding: 0.25rem !important; -} -.pt-1, -.py-1 { - padding-top: 0.25rem !important; -} -.pr-1, -.px-1 { - padding-right: 0.25rem !important; -} -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; -} -.pl-1, -.px-1 { - padding-left: 0.25rem !important; -} -.p-2 { - padding: 0.5rem !important; -} -.pt-2, -.py-2 { - padding-top: 0.5rem !important; -} -.pr-2, -.px-2 { - padding-right: 0.5rem !important; -} -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; -} -.pl-2, -.px-2 { - padding-left: 0.5rem !important; -} -.p-3 { - padding: 1rem !important; -} -.pt-3, -.py-3 { - padding-top: 1rem !important; -} -.pr-3, -.px-3 { - padding-right: 1rem !important; -} -.pb-3, -.py-3 { - padding-bottom: 1rem !important; -} -.pl-3, -.px-3 { - padding-left: 1rem !important; -} -.p-4 { - padding: 1.5rem !important; -} -.pt-4, -.py-4 { - padding-top: 1.5rem !important; -} -.pr-4, -.px-4 { - padding-right: 1.5rem !important; -} -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; -} -.pl-4, -.px-4 { - padding-left: 1.5rem !important; -} -.p-5 { - padding: 3rem !important; -} -.pt-5, -.py-5 { - padding-top: 3rem !important; -} -.pr-5, -.px-5 { - padding-right: 3rem !important; -} -.pb-5, -.py-5 { - padding-bottom: 3rem !important; -} -.pl-5, -.px-5 { - padding-left: 3rem !important; -} - -@media (max-width: 768px) { - .mb-sm-20 { - margin-bottom: 20px; - } - .mt-sm-20 { - margin-top: 20px; - } -} - -.mb-20 { - margin-bottom: 20px !important; -} -.mt-20 { - margin-top: 20px !important; -} -.mb-30 { - margin-bottom: 30px !important; -} -.mt-30 { - margin-top: 30px !important; -} -.my-20 { - margin-top: 20px !important; - margin-bottom: 20px !important; -} - -.pd-1 { - padding: 1px !important; -} - -.ml-auto { - margin-left: auto !important; -} -.mr-auto { - margin-right: auto !important; -} diff --git a/apps/36-blocks-widget/src/environments/environment.test.ts b/apps/36-blocks-widget/src/environments/environment.test.ts deleted file mode 100644 index ad8823f6..00000000 --- a/apps/36-blocks-widget/src/environments/environment.test.ts +++ /dev/null @@ -1,23 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -import { envVariables } from './env-variables'; - -export const environment = { - production: false, - env: 'test', - apiUrl: 'https://apitest.msg91.com/api', - baseUrl: 'https://test.proxy.msg91.com', - msgMidProxy: '', - ...envVariables, -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/apps/36-blocks-widget/src/otp-global.scss b/apps/36-blocks-widget/src/otp-global.scss deleted file mode 100644 index 160e6605..00000000 --- a/apps/36-blocks-widget/src/otp-global.scss +++ /dev/null @@ -1,29 +0,0 @@ -// .otp-verification-dialog { -// width: 380px; -// min-height: 350px; -// font-size: 15px; -// text-align: center; -// display: inherit; -// flex-direction: column; -// align-items: inherit; -// box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f; -// background: transparent; -// color: #000000de; -// z-index: 999999 !important; -// border-radius: 10px; -// padding: 25px 32px; -// justify-content: center; -// position: relative; -// overflow-y: auto; -// @media only screen and (max-width: 768px) { -// width: 90% !important; -// height: 80%; -// display: flex; -// align-items: center; -// justify-content: center; -// } -// &.dark-theme { -// background: transparent; -// color: #ffffff !important; -// } -// } diff --git a/apps/36-blocks-widget/src/styles.scss b/apps/36-blocks-widget/src/styles.scss index 297ec805..70347989 100644 --- a/apps/36-blocks-widget/src/styles.scss +++ b/apps/36-blocks-widget/src/styles.scss @@ -1,10 +1,4 @@ -/* Layout*/ -@use 'assets/scss/layout/spacing'; -@use 'assets/scss/layout/display'; - /* Components*/ -@use 'assets/scss/component/form-field'; -@use 'assets/scss/component/tabs'; @use '../../shared/scss/global'; /* Widget shared UI utilities */ @@ -63,7 +57,3 @@ proxy-auth, font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } - -* { - box-sizing: border-box; -} diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss index e1d66c2b..6d8b7cc6 100644 --- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss +++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.scss @@ -9,46 +9,6 @@ border-color: var(--color-dark-accent) !important; } -// Show Configure column edit button only on row hover -// .configure-methods-table { -// tr.mat-row, -// tr.mat-mdc-row { -// .mat-column-configure button { -// opacity: 0; -// transition: opacity 0.15s ease; -// } -// &:hover .mat-column-configure button { -// opacity: 1; -// } -// } -// th { -// font-size: var(--font-size-common-14) !important; -// } -// } - -// Fix table borders -// .default-table { -// .mat-mdc-row { -// border-bottom: 1px solid rgba(0, 0, 0, 0.12); - -// &:last-child { -// border-bottom: 1px solid rgba(0, 0, 0, 0.12); -// } -// } - -// .mat-mdc-header-row { -// border-bottom: 2px solid rgba(0, 0, 0, 0.12); -// } - -// .mat-mdc-cell, -// .mat-mdc-header-cell { -// border-right: 1px solid rgba(0, 0, 0, 0.12); - -// &:last-child { -// border-right: none; -// } -// } -// } .organization-details-form { display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/apps/36-blocks/src/assets/proxy-auth/test-widget.html b/apps/36-blocks/src/assets/proxy-auth/test-widget.html deleted file mode 100644 index fba7d62d..00000000 --- a/apps/36-blocks/src/assets/proxy-auth/test-widget.html +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - Proxy Auth Widget - Single File Test - - - -
-

🚀 Proxy Auth Widget Test

-
- Test Status: Single-file bundle (proxy-auth.js)
- Bundle Size: ~1.3 MB (includes CSS + all assets)
- Configuration: Replace YOUR_REFERENCE_ID with your actual reference ID -
- - -
-
- - - - - - - - diff --git a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss index e8f6e232..3c6b6c0b 100644 --- a/apps/36-blocks/src/assets/scss/base/_dark-theme.scss +++ b/apps/36-blocks/src/assets/scss/base/_dark-theme.scss @@ -9,10 +9,8 @@ body.dark-theme { --color-common-silver: rgba(123, 127, 130, 0.07); // New design color variables - --color-dark-primary: #171c26; --color-dark-accent: #19e6ce; --color-dark-accent-light: #19e6ce1a; - --color-dark-muted: #a7afbe; --color-common-bg: var(--color-common-dark); --color-common-text: var(--color-common-smoke); @@ -32,33 +30,5 @@ body.dark-theme { // Primary Color --color-common-primary: #3f51b5; --color-common-primary-light: rgba(80, 103, 230, 0.12); - --color-common-primary-dark: #29379d; - --color-common-primary-light-hover: rgb(80 103 230 / 32%); - --color-link-color: blue; - - // Table Color variables - --color-table-head: var(--color-common-smoke); - --color-table-cell: var(--color-common-smoke); - --color-table-head-border: var(--color-common-slate); - --color-table-cell-border: var(--color-common-slate); - - // Sidenav colors variables - --color-sidenav-expanded-background: var(--color-common-primary-light); - --color-sidenav-border: #e1e4e8; - --color-sidenav-icon: var(--color-common-grey); - - --color-sidenav-menu-link-background: var(--color-common-white); - --color-sidenav-menu-link-icon: var(--color-common-grey); - --color-sidenav-menu-link-text: var(--color-common-grey); - - --color-sidenav-menu-hover-link-background: var(--color-common-primary); - --color-sidenav-menu-hover-link-text: var(--color-common-white); - --color-sidenav-menu-hover-link-icon: var(--color-common-white); - - --color-sidenav-menu-active-link-background: var(--color-common-primary); - --color-sidenav-menu-active-link-text: var(--color-common-white); - --color-sidenav-menu-active-link-icon: var(--color-common-white); - - --color-common-sidenav-shadow: 1px 0px 4px rgba(0, 0, 0, 0.5); } diff --git a/apps/36-blocks/src/assets/scss/base/_default-variables.scss b/apps/36-blocks/src/assets/scss/base/_default-variables.scss index acda8f2a..bcd4e63a 100644 --- a/apps/36-blocks/src/assets/scss/base/_default-variables.scss +++ b/apps/36-blocks/src/assets/scss/base/_default-variables.scss @@ -1,60 +1,32 @@ :root { // Border - --border-common-radius: 8px; --border-common-radius-4: 4px; - --font-family-common: 'DM Sans', sans-serif; - - // Common Font Size - --font-size-common-10: 10px; - --font-size-common-11: 11px; - --font-size-common-12: 12px; - --font-size-common-14: 14px; - --font-size-common-20: 20px; - --font-size-common-24: 24px; - // Common color --color-common-green: #008000; --color-common-scrollbar: 0, 0, 0; --color-common-hover: var(--color-common-silver); // New design color variables - --color-dark-primary: #171c26; --color-dark-accent: #19e6ce; --color-dark-accent-light: #19e6ce1a; - --color-dark-muted: #a7afbe; - - // #1 - Hello - --color-hello-primary-dark: #8c5d00; - --color-hello-primary-light: rgba(242, 190, 85, 0.17); // #2 - Email --color-email-primary: #cc5229; - --color-email-primary-dark: #8c2e0e; --color-email-primary-light: rgba(204, 82, 41, 0.12); - --color-email-primary-hover: #af4622; // #3 - WhatsApp --color-whatsApp-primary: #29a653; - --color-whatsApp-primary-dark: #307368; --color-whatsApp-primary-light: rgba(111, 202, 113, 0.16); - --color-whatsApp-primary-hover: #238b45; // #7 - Voice - --color-voice-primary: #696bef; - --color-voice-primary-dark: #3a3ba6; --color-voice-primary-light: rgba(105, 107, 239, 0.12); // #8 - ShortURL --color-short-url-primary: #de8644; - --color-short-url-primary-dark: #804f13; --color-short-url-primary-light: rgba(229, 142, 34, 0.12); // #10 - OTP --color-otp-primary: #1157a6; - --color-otp-primary-dark: #0a3566; --color-otp-primary-light: rgba(56, 146, 224, 0.12); - - // mat-form-field variables - --custom-mat-form-field-height: 48px; } diff --git a/apps/36-blocks/src/assets/scss/base/_light-theme.scss b/apps/36-blocks/src/assets/scss/base/_light-theme.scss index 957702b3..f4e652d7 100644 --- a/apps/36-blocks/src/assets/scss/base/_light-theme.scss +++ b/apps/36-blocks/src/assets/scss/base/_light-theme.scss @@ -9,13 +9,6 @@ body.light-theme { --color-common-white: #ffffff; --color-common-black: #000000; - --new-color-common-primary: #171c26; - --new-color-common-secondary: #7b879d; - --new-color-common-accent: #19e6ce; - --new-color-common-accent-light: #19e6ce1a; - --new-color-common-muted: #a7afbe; - --new-color-common-light: #f0f2f4; - --color-common-silver: rgba(123, 127, 130, 0.07); --color-common-bg: var(--color-common-white); --color-common-text: var(--color-common-slate); @@ -40,33 +33,5 @@ body.light-theme { // Primary Color --color-common-primary: #3f51b5; --color-common-primary-light: rgba(80, 103, 230, 0.12); - --color-common-primary-dark: #29379d; - --color-common-primary-light-hover: rgb(80 103 230 / 32%); - --color-link-color: blue; - - // Table Color variables - --color-table-head: var(--color-common-slate); - --color-table-cell: var(--color-common-slate); - --color-table-head-border: var(--color-common-smoke); - --color-table-cell-border: var(--color-common-smoke); - - // Sidenav colors variables - --color-sidenav-expanded-background: var(--color-common-primary-light); - --color-sidenav-border: #e1e4e8; - --color-sidenav-icon: var(--color-common-grey); - - --color-sidenav-menu-link-background: var(--color-common-white); - --color-sidenav-menu-link-icon: var(--color-common-grey); - --color-sidenav-menu-link-text: var(--color-common-grey); - - --color-sidenav-menu-hover-link-background: var(--color-common-primary); - --color-sidenav-menu-hover-link-text: var(--color-common-white); - --color-sidenav-menu-hover-link-icon: var(--color-common-white); - - --color-sidenav-menu-active-link-background: var(--color-common-primary); - --color-sidenav-menu-active-link-text: var(--color-common-white); - --color-sidenav-menu-active-link-icon: var(--color-common-white); - - --color-common-sidenav-shadow: 1px 0px 4px rgba(0, 0, 0, 0.2); } diff --git a/apps/36-blocks/src/assets/scss/base/_reset.scss b/apps/36-blocks/src/assets/scss/base/_reset.scss deleted file mode 100644 index fd8c5cb1..00000000 --- a/apps/36-blocks/src/assets/scss/base/_reset.scss +++ /dev/null @@ -1,67 +0,0 @@ -// *, -// *::before, -// *::after { -// box-sizing: border-box; -// } -// article, -// aside, -// figcaption, -// figure, -// footer, -// header, -// hgroup, -// main, -// nav, -// section { -// display: block; -// } - -// a { -// text-decoration: none; -// } -// body { -// margin: 0; -// font-size: 1rem; -// font-weight: 400; -// line-height: 1.5; -// text-align: left; -// cursor: default; -// color: var(--color-common-text); -// background-color: var(--color-common-bg); -// font-family: var(--font-family-common); -// -webkit-text-size-adjust: 100%; -// } - -// .mat-form-field-appearance-outline .mat-form-field-flex { -// font-size: 14px; -// // line-height: 1.225; -// } -// .mat-select-arrow-wrapper { -// vertical-align: baseline !important; -// } - -// * { -// scrollbar-width: thin; -// scrollbar-color: var(--mat-sys-primary) var(--color-common-bg); -// } - -// /* Works on Chrome/Edge/Safari */ -// *::-webkit-scrollbar { -// width: 6px; -// height: 6px; -// } - -// *::-webkit-scrollbar-track { -// border-radius: var(--border-common-radius); -// background: transparent; -// } - -// *::-webkit-scrollbar-thumb { -// background: rgba(var(--color-common-scrollbar), 0.1); -// border-radius: var(--border-common-radius); -// } - -// /* Handle on hover */ -// ::-webkit-scrollbar-thumb:hover { -// background: rgba(var(--color-common-scrollbar), 0.5); -// } diff --git a/apps/36-blocks/src/assets/scss/component/_buttons.scss b/apps/36-blocks/src/assets/scss/component/_buttons.scss deleted file mode 100644 index 12e6f07e..00000000 --- a/apps/36-blocks/src/assets/scss/component/_buttons.scss +++ /dev/null @@ -1,324 +0,0 @@ -// @use '../utils/mixins/common-utils' as *; - -// $primary-btn-height: 40px; -// $secondary-btn-height: 30px; - -// .mat-button-base { -// &.mat-flat-button, -// &.mat-stroked-button, -// &.mat-button { -// border-radius: var(--border-common-radius-4); -// min-width: auto !important; -// transition: background-color 200ms cubic-bezier(0.35, 0, 0.25, 1); -// line-height: $primary-btn-height; - -// &.mat-button-disabled { -// background-color: var(--color-button-bg) !important; -// } -// &.btn-medium { -// line-height: $secondary-btn-height !important; -// font-size: var(--font-size-common-12); -// } -// } -// // 6. Flat button -// &.mat-flat-button { -// transition: background-color 200ms cubic-bezier(0.35, 0, 0.25, 1); -// background-color: var(--color-dark-accent) !important; -// color: var(--color-dark-primary) !important; -// // Flat button color variation -// &.flat-default { -// @include btnHover(var(--color-button-text), var(--color-button-bg), var(--color-button-hover)); -// } -// &.flat-primary-light { -// @include btnHover( -// var(--color-common-primary), -// var(--color-common-primary-light), -// var(--color-common-primary-light-hover) -// ); -// } -// &.flat-primary { -// background-color: var(--color-common-primary-light); -// color: var(--color-common-primary); -// } -// &.btn-success { -// @include btnHover( -// var(--color-common-white), -// var(--color-whatsApp-primary), -// var(--color-whatsApp-primary-hover), -// var(--color-common-white) -// ); -// } -// &.btn-success-light { -// @include btnHover( -// var(--color-whatsApp-primary), -// var(--color-whatsApp-primary-light), -// var(--color-whatsApp-primary), -// var(--color-common-white) -// ); -// } -// &.btn-danger-light { -// @include btnHover( -// var(--color-email-primary), -// var(--color-email-primary-light), -// var(--color-email-primary), -// var(--color-common-white) -// ); -// } -// // Hover state -// &.mat-primary { -// &:hover { -// background-color: var(--color-common-primary-dark); -// } -// } -// // Hover state -// &.mat-warn { -// @include btnHover( -// var(--color-common-white), -// var(--color-email-primary), -// var(--color-email-primary-hover), -// var(--color-common-white) -// ); -// } -// // Flat Icon button -// &.flat-icon-btn { -// padding: 0px 12px; -// } - -// } -// .mat-icon-suffix { -// margin-right: calc(12px - 16px); -// margin-left: 4px; -// } -// .mat-icon-prefix { -// margin-left: calc(12px - 16px); -// margin-right: 4px; -// } - -// &.mat-button { -// @include btnHover(var(--color-button-text), transparent, var(--color-button-bg)); -// &.mat-primary { -// @include btnHover( -// var(--color-common-primary), -// transparent, -// var(--color-common-primary-light), -// var(--color-common-primary) -// ); -// } -// } -// &.mat-stroked-button { -// line-height: 38px; -// &:not(.mat-primary) { -// border-color: var(--color-dark-accent) !important; -// color: var(--color-dark-accent) !important; -// } -// &.mat-primary { -// border-color: var(--color-primary-color) !important; -// @include btnHover(var(--color-common-primary), transparent, var(--color-common-primary-light)); -// } -// } -// &.remove-mat-button-focus-overlay { -// .mat-button-focus-overlay { -// display: none; -// } -// } -// } - -// /* 1. Icon Button */ -// .mat-icon-button { -// &.icon-btn-md { -// @include generateIconBtn(30px, 18px, var(--color-common-text-2)); -// } -// &.icon-btn-sm { -// @include generateIconBtn(20px, 12px, var(--color-common-text-2)); -// } -// &.mat-primary { -// @include iconBtnHover( -// var(--color-common-text-2), -// var(--color-common-primary-light), -// var(--color-common-primary) -// ); -// } -// &.mat-warn { -// @include iconBtnHover(var(--color-common-text-2), var(--color-email-primary-light), var(--color-email-primary)); -// } -// &.mat-success { -// @include iconBtnHover( -// var(--color-common-text-2), -// var(--color-whatsApp-primary-light), -// var(--color-whatsApp-primary) -// ); -// } -// &.mat-button-disabled { -// opacity: 0.6; -// pointer-events: none; -// } -// } - -// .mat-btn-xs { -// @media only screen and (max-width: 660px) { -// padding-left: 12px; -// padding-right: 12px; -// .mat-icon { -// margin: 0px; -// } -// } -// } - -// // Slider -// .slider::-webkit-slider-thumb { -// background: var(--color-common-primary) !important; -// } - -// // Toggle Button light theme color - https://prnt.sc/wY6YBUSpVDQF - -// .default-toggle-btn { -// border-radius: var(--border-common-radius) !important; -// border: none !important; -// box-shadow: none !important; -// .mat-button-toggle { -// font-size: var(--font-size-common-14); -// border-color: var(--color-common-border); -// // min-width: 108px; -// // &.mat-button-toggle-appearance-standard { -// // background-color: var(--color-button-bg); -// // color: var(--color-common-rock) !important; -// // font-weight: 500; -// // .mat-button-toggle-label-content { -// // line-height: 40px !important; -// // } -// // &.mat-button-toggle-checked { -// // background-color: var(--color-common-primary-light); -// // color: var(--color-common-primary) !important; -// // } -// // } -// background-color: var(--color-button-bg); -// color: var(--color-button-text) !important; -// font-weight: 500; -// .mat-button-toggle-label-content { -// line-height: 40px !important; -// } -// &.mat-button-toggle-checked { -// background-color: var(--color-common-primary); -// color: var(--color-common-white) !important; -// &:hover { -// background-color: var(--color-common-primary-dark); -// } -// } -// &:hover { -// background-color: var(--color-button-hover); -// } -// } -// &.icon-type-button { -// .mat-button-toggle { -// min-width: auto; -// } -// } -// } - -// // Toggle Button - https://prnt.sc/ad0qU7tV7Bg5 -// .custom-toggle-btn { -// border-radius: var(--border-common-radius) !important; -// .mat-button-toggle { -// font-size: var(--font-size-common-12); -// font-weight: 600; -// color: var(--color-common-text-2); -// border-color: var(--color-common-border); -// &.mat-button-toggle-checked { -// background-color: var(--color-common-primary) !important; -// color: var(--color-common-white) !important; -// } -// &.mat-button-toggle-appearance-standard { -// .mat-button-toggle-label-content { -// line-height: 36.5px !important; -// } -// } -// } -// } - -// // 11. Button size -// .mat-btn-md { -// min-height: 26px; -// line-height: 30px !important; -// font-size: var(--font-size-common-12) !important; -// &.mat-btn-wran { -// border-color: var(--mat-sys-error) !important; -// } -// } -// .mat-btn-xs { -// @media only screen and (max-width: 660px) { -// padding-left: 12px !important; -// padding-right: 12px !important; -// .mat-icon { -// margin: 0px; -// } -// } -// } - -// // Disabled Action on permission basis -// .disabled-action, -// button:disabled, -// button[disabled], -// button:hover:disabled, -// button:hover[disabled], -// button.mat-btn-md.mat-btn-wran:disabled, -// button.mat-btn-md.mat-btn-wran[disabled], -// button.mat-btn-md.mat-btn-wran:hover:disabled, -// button.mat-btn-md.mat-btn-wran:hover[disabled] { -// pointer-events: none; -// color: var(--color-common-grey) !important; -// border-color: var(--color-common-grey) !important; -// .mat-icon { -// color: var(--color-common-grey) !important; -// } -// } - -// // 10. Mat slide toggle button design reference - https://prnt.sc/DDH-z4jHnmH5 -// .mat-slide-toggle { -// &.toggle-slide { -// .mat-slide-toggle-content { -// color: var(--color-common-white); -// } -// } -// &.mat-checked { -// .mat-slide-toggle-bar { -// background-color: var(--color-whatsApp-primary-light) !important; -// } -// .mat-slide-toggle-thumb { -// background-color: var(--color-whatsApp-primary) !important; -// } -// } -// &.mat-disabled{ -// .mat-slide-toggle-bar{ -// background-color: var(--color-common-grey); -// } -// .mat-slide-toggle-thumb { -// background-color: var(--color-common-slate) !important; -// } -// } -// } -// .radio-button-custom-style { -// .mat-radio-button { -// .mat-radio-outer-circle { -// border-color: var(--color-dark-accent) !important; -// } - -// .mat-radio-inner-circle { -// background-color: var(--color-dark-accent) !important; -// } -// } -// } -// .accent-color { -// .material-icons { -// &.mat-icon { -// &.mat-icon-no-color { -// color: var(--color-dark-accent) !important; -// &:hover { -// color: var(--color-dark-accent) !important; -// } -// } -// } -// } -// } -// .accent-bg-color { -// background-color: var(--color-dark-accent) !important; -// } diff --git a/apps/36-blocks/src/assets/scss/component/_card.scss b/apps/36-blocks/src/assets/scss/component/_card.scss deleted file mode 100644 index 559ebc5b..00000000 --- a/apps/36-blocks/src/assets/scss/component/_card.scss +++ /dev/null @@ -1,68 +0,0 @@ -// @use '../utils/mixins/common-utils' as *; -// /* -// // Card -// */ -// .mat-card { -// box-shadow: none !important; -// border-radius: var(--border-common-radius) !important; -// background-color: var(--color-common-bg) !important; -// &.responsive-card { -// @include media-breakpoint-down('tablet') { -// background-color: transparent !important; -// border: none !important; -// } -// } -// &.shadow-none { -// box-shadow: none !important; -// } -// &.outline-card { -// border: 1px solid var(--color-common-border); -// box-shadow: none !important; -// } -// @media screen and (max-width: 768px) { -// &.transparent-card { -// box-shadow: none !important; -// background-color: transparent !important; -// border-width: 0px !important; -// } -// } -// &.data-analytics-card { -// background-color: var(--color-common-graph-bg) !important; -// } - -// &.default-card { -// background-color: var(--color-common-graph-bg) !important; -// } - -// &.mat-data-card { -// padding: 24px 32px; -// .mat-data-card-content { -// .mat-data-card-value { -// padding-left: 32px; -// p { -// font-weight: 500; -// font-size: 14px; -// line-height: 16px; -// margin-bottom: 4px; -// } -// h3 { -// font-weight: 700; -// font-size: 24px; -// line-height: 28px; -// } -// } -// } -// &.delivered { -// color: var(--color-whatsApp-primary) !important; -// background-color: var(--color-whatsApp-primary-light) !important; -// } -// &.suppressed { -// background-color: var(--color-short-url-primary-light) !important; -// color: var(--color-short-url-primary) !important; -// } -// &.failed { -// background-color: var(--color-email-primary-light) !important; -// color: var(--color-email-primary) !important; -// } -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_chart.scss b/apps/36-blocks/src/assets/scss/component/_chart.scss deleted file mode 100644 index e5baf8e5..00000000 --- a/apps/36-blocks/src/assets/scss/component/_chart.scss +++ /dev/null @@ -1,7 +0,0 @@ -.line-chart { - text { - fill: var(--color-common-text); - font-size: 10px !important; - line-height: 12px; - } -} diff --git a/apps/36-blocks/src/assets/scss/component/_filters.scss b/apps/36-blocks/src/assets/scss/component/_filters.scss deleted file mode 100644 index 42fca65e..00000000 --- a/apps/36-blocks/src/assets/scss/component/_filters.scss +++ /dev/null @@ -1,62 +0,0 @@ -// .filter-menu { -// min-width: 400px !important; -// max-width: 400px !important; -// margin-top: 12px; -// @media (max-width: 660px) { -// min-width: 80vw !important; -// max-width: 80vw !important; -// max-height: 70vh; -// } -// .mat-menu-content { -// padding: 0px !important; -// .date-picker-row { -// padding: 20px 25px 0px 25px; -// } -// .mat-form-field { -// .mat-icon { -// width: 16px; -// } -// } -// .action-button { -// padding: 20px 25px; -// } -// } -// } - -// .client-filter-menu { -// min-width: 400px !important; -// max-width: 400px !important; -// margin-top: 12px; -// @media (max-width: 660px) { -// min-width: 80vw !important; -// max-width: 80vw !important; -// max-height: 70vh !important; -// overflow-y: hidden !important; -// } -// .mat-menu-content { -// padding: 0px !important; -// .date-picker-row { -// padding: 25px; -// } -// .client-filter-content { -// @media (max-width: 992px) { -// max-height: 58vh; -// overflow-y: auto; -// } -// } -// .mat-form-field { -// .mat-icon { -// width: 16px; -// } -// } -// .action-button { -// padding: 20px 25px; -// } -// } -// } - -// .column-sort { -// .mat-menu-content { -// max-height: 600px; -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_form-field.scss b/apps/36-blocks/src/assets/scss/component/_form-field.scss deleted file mode 100644 index e4618a19..00000000 --- a/apps/36-blocks/src/assets/scss/component/_form-field.scss +++ /dev/null @@ -1,254 +0,0 @@ -// // Default theme changes -// .mat-form-field { -// .mat-form-field-wrapper { -// vertical-align: baseline !important; - -// .mat-form-field-flex { -// font-size: var(--font-size-common-14); -// line-height: 1.225; -// .mat-form-field-infix { -// .mat-form-field-label-wrapper { -// .mat-form-field-label { -// color: var(--color-common-slate); -// } -// } -// } -// } -// .mat-form-field-hint-wrapper { -// .mat-hint { -// color: var(--color-common-slate); -// font-size: 12px; -// } -// } -// } -// &.search-form-field:not(.unset-search-width) { -// width: 250px; -// } -// } - -// .mat-form-field { -// &.mat-form-field-appearance-legacy { -// &.mat-legacy-form-field-sm { -// .mat-form-field-wrapper { -// padding-bottom: 0px; -// } -// .mat-form-field-infix { -// border-top: 0px !important; -// padding: 8px 0 4px 0 !important; -// max-width: 100%; -// // min-width: 100px; -// width: 100%; -// font-size: 14px; -// } -// .mat-form-field-suffix { -// button { -// width: 23px; -// height: 23px; -// min-height: 23px; -// line-height: 23px; -// } -// } -// .mat-form-field-underline { -// bottom: 0px !important; -// } -// .mat-form-field-subscript-wrapper { -// top: calc(100% - 5px); -// .mat-error { -// font-size: var(--font-size-common-12); -// } -// } -// .mat-form-field-label { -// top: 1.00125em !important; -// } -// } -// } -// &.mat-form-field-disabled { -// .mat-form-field-wrapper { -// .mat-form-field-flex { -// .mat-form-field-outline { -// background-color: var(--color-common-silver) !important; -// border-radius: var(--border-common-radius-4) !important; -// } -// } -// } -// } -// } - -// // Default form field -// .mat-form-field { -// .mat-form-field-infix { -// padding: 5px 0 10px 0 !important; -// .mat-input-element { -// &::-webkit-input-placeholder { -// /* Chrome/Opera/Safari */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &::-moz-placeholder { -// /* Firefox 19+ */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &:-ms-input-placeholder { -// /* IE 10+ */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// &:-moz-placeholder { -// /* Firefox 18- */ -// color: var(--color-common-grey); -// font-weight: normal; -// } -// } -// .mat-form-field-label-wrapper { -// .mat-form-field-required-marker { -// display: none; -// } -// } -// &.mat-form-field-appearance-outline { -// .mat-form-field-outline { -// background-color: var(--color-common-white) !important; -// } -// } -// } -// .mat-form-field-flex { -// .mat-form-field-outline { -// background-color: var(--color-common-white); -// .mat-form-field-outline-start { -// border-radius: var(--border-common-radius-4) 0 0 var(--border-common-radius-4); -// min-width: var(--border-common-radius-4); -// } -// .mat-form-field-outline-end { -// border-radius: 0 var(--border-common-radius-4) var(--border-common-radius-4) 0; -// } -// } -// .mat-form-field-infix { -// .mat-select { -// .mat-select-trigger { -// .mat-select-arrow-wrapper { -// transform: translateY(0%); -// } -// } -// } -// } -// } -// input { -// &.mat-input-element { -// color: var(--color-common-text); -// } -// } -// &.no-padding { -// .mat-form-field-wrapper { -// padding-bottom: 0px !important; -// .mat-form-field-flex { -// .mat-form-field-prefix { -// color: var(--color-common-grey) !important; -// } -// } -// } -// } -// // Used to display only first mat-error -// mat-error { -// display: none !important; -// font-size: var(--font-size-common-12); -// &:first-child { -// display: block !important; -// } -// } -// } - -// @-moz-document url-prefix() { -// .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button, -// .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button { -// display: inline-block !important; -// } -// } - -// // Disbaled stroked input form field -// .mat-form-field-disabled .mat-form-field-underline { -// background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0) !important; -// background-size: 1px 100% !important; -// background-repeat: repeat-x !important; -// } - -// .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, -// .mat-form-field-appearance-outline.mat-form-field-can-float -// .mat-input-server:focus -// + .mat-form-field-label-wrapper -// .mat-form-field-label { -// transform: translateY(-15px) scale(0.7) !important; -// } - -// .mat-form-field-appearance-outline .mat-form-field-label { -// top: 18px !important; -// } - -// .mat-form-field-subscript-wrapper { -// padding: 0px !important; -// margin-top: 2px !important; -// font-size: var(--font-size-common-10); -// } - -// /* Firefox hide */ -// input[matinput][type='number'] { -// -moz-appearance: textfield; -// } -// /* Chrome, Safari, Edge, Opera */ -// input[matinput]::-webkit-outer-spin-button, -// input[matinput]::-webkit-inner-spin-button { -// -webkit-appearance: none; -// margin: 0; -// } - -// .mat-form-field-outside-error { -// height: 21.5px; -// } - -// // Input focus/highlight color -// .mat-form-field.mat-focused { -// .mat-form-field-ripple { -// background-color: var(--color-dark-accent) !important; -// } - -// .mat-form-field-outline-thick { -// color: var(--color-dark-accent) !important; -// } - -// .mat-form-field-label { -// color: var(--color-dark-primary) !important; -// } -// } - -// // MDC Form Field styles (Angular Material 15+) -// .mat-mdc-form-field.mat-focused { -// .mdc-text-field--outlined:not(.mdc-text-field--disabled) { -// .mdc-notched-outline__leading, -// .mdc-notched-outline__notch, -// .mdc-notched-outline__trailing { -// border-color: var(--color-dark-accent) !important; -// } -// } - -// .mdc-text-field--filled:not(.mdc-text-field--disabled) { -// .mdc-line-ripple::after { -// border-bottom-color: var(--color-dark-accent) !important; -// } -// } - -// .mat-mdc-floating-label { -// color: var(--color-dark-primary) !important; -// } -// } - -// // MDC focused outline -// .mdc-text-field--focused:not(.mdc-text-field--disabled) { -// .mdc-notched-outline__leading, -// .mdc-notched-outline__notch, -// .mdc-notched-outline__trailing { -// border-color: var(--color-dark-accent) !important; -// } - -// .mdc-floating-label { -// color: var(--color-dark-primary) !important; -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_icon.scss b/apps/36-blocks/src/assets/scss/component/_icon.scss index 86e11f57..c2678ae6 100644 --- a/apps/36-blocks/src/assets/scss/component/_icon.scss +++ b/apps/36-blocks/src/assets/scss/component/_icon.scss @@ -1,48 +1,26 @@ -/* // Material Icons -*/ -.mat-icon-14 { - font-size: 14px !important; - width: 14px !important; - height: 14px !important; - line-height: 14px !important; +@mixin mat-icon-size($size) { + font-size: $size !important; + width: $size !important; + height: $size !important; + line-height: $size !important; } -.mat-icon-16 { - font-size: 16px !important; - width: 16px !important; - height: 16px !important; - line-height: 16px !important; -} -.mat-icon-18 { - font-size: 18px !important; - width: 18px !important; - height: 18px !important; - line-height: 18px !important; -} -.mat-icon-20 { - font-size: 20px !important; - width: 20px !important; - height: 20px !important; - line-height: 20px !important; -} -.mat-icon-22 { - font-size: 22px !important; - width: 22px !important; - height: 22px !important; - line-height: 22px !important; -} -.mat-icon-24 { - font-size: 24px !important; - width: 24px !important; - height: 24px !important; - line-height: 24px !important; -} -.mat-icon-32 { - font-size: 32px !important; - width: 32px !important; - height: 32px !important; - line-height: 32px !important; + +$mat-icon-sizes: ( + 14: 14px, + 16: 16px, + 18: 18px, + 20: 20px, + 22: 22px, + 24: 24px, + 32: 32px, +); + +@each $key, $size in $mat-icon-sizes { + .mat-icon-#{$key} { + @include mat-icon-size($size); + } } .mat-icon-circle { width: 48px; diff --git a/apps/36-blocks/src/assets/scss/component/_mat-list.scss b/apps/36-blocks/src/assets/scss/component/_mat-list.scss deleted file mode 100644 index 601a0d44..00000000 --- a/apps/36-blocks/src/assets/scss/component/_mat-list.scss +++ /dev/null @@ -1,43 +0,0 @@ -// .mat-list{ -// &.custom-nav-list{ -// .mat-list-item{ -// .mat-list-item-content{ -// padding: 0px !important; -// } -// } -// } -// &.default-list{ -// .mat-list-item { -// height: 36px; -// font-size: 14px; -// color: var(--color-common-dark); -// cursor: pointer; -// margin-bottom: 4px; -// &.active{ -// background-color: var(--color-common-primary-light); -// color: var(--color-common-primary); -// } -// &:hover{ -// background-color: var(--color-common-silver); -// } -// .mat-list-item-content{ -// padding-inline: 8px; -// } -// } -// &.mat-list-sm { -// .mat-list-item { -// height: 28px; -// } -// } -// } -// } -// .mat-menu-hover-state{ -// .mat-menu-item{ -// &.active{ -// background-color: var(--color-otp-primary-light); -// } -// &:not(.active):hover{ -// background-color: var(--color-common-bg-lighter); -// } -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_menu.scss b/apps/36-blocks/src/assets/scss/component/_menu.scss deleted file mode 100644 index ce42e9ab..00000000 --- a/apps/36-blocks/src/assets/scss/component/_menu.scss +++ /dev/null @@ -1,74 +0,0 @@ -// .mat-menu-panel { -// border-radius: var(--border-common-radius) !important; -// } -// .more-menu { -// min-height: auto !important; -// .mat-menu-item { -// font-size: 13px; -// line-height: 36px; -// height: 36px; -// &.mat-menu-item-active { -// background-color: var(--color-common-primary-light); -// color: var(--color-common-primary) !important; -// } -// } -// } -// .form-scrollable { -// max-height: calc(100vh - 400px); -// overflow-y: auto; -// @media only screen and (max-width: 768px) { -// max-height: calc(100vh - 250px); -// } -// } - -// .subscription-filter-menu { -// min-width: 500px !important; -// max-width: 500px !important; -// margin-top: 12px; -// .mat-form-field { -// .mat-form-field-wrapper { -// padding-bottom: 14px !important; -// .mat-form-field-flex { -// .mat-form-field-infix { -// .mat-form-field-label-wrapper { -// top: -18px; -// } -// } -// } -// } -// } -// .form-scrollable { -// max-height: calc(100vh - 400px); -// overflow-y: auto; -// @media only screen and (max-width: 768px) { -// max-height: calc(100vh - 250px); -// } -// } -// } - -// .logs-filter-menu, .profile-menu { -// min-width: 300px !important; -// max-width: 300px !important; -// .mat-menu-content { -// .mat-form-field { -// .mat-form-field-wrapper { -// // padding-bottom: 1.34375em !important; -// .mat-form-field-label-wrapper { -// top: -18px !important; -// } -// } -// } -// } -// } - -// .profile-sub-dropdown { -// .mat-menu-item { -// padding: 0px 24px; -// height: 40px; -// line-height: 40px; -// font-size: 14px; -// } -// #scrollableWrapper { -// overflow-x: hidden !important; -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_modal.scss b/apps/36-blocks/src/assets/scss/component/_modal.scss deleted file mode 100755 index d2a5bf5e..00000000 --- a/apps/36-blocks/src/assets/scss/component/_modal.scss +++ /dev/null @@ -1,102 +0,0 @@ -// .mat-dialog-container { -// padding: 16px 24px !important; -// width: 450px !important; -// position: relative; -// border-radius: var(--border-common-radius) !important; -// } - -// .mat-dialog-md { -// .mat-dialog-container { -// width: 100% !important; -// } -// } - -// .mat-dialog { -// &.mat-dialog-lg { -// .mat-dialog-container { -// min-width: 800px !important; -// } -// } -// } - -// .rejection-reason-drop + .cdk-overlay-connected-position-bounding-box { -// right: 16px !important; -// } -// .rejection-reason { -// min-width: 500px !important; -// max-width: 500px !important; -// margin-bottom: 10px; -// &.voice-file-rejection { -// height: 750px !important; -// } -// .mat-menu-content { -// padding-top: 0 !important; -// .rejection-reason-header { -// padding: 0px 16px; -// } -// .new-reason-form { -// padding: 0px 16px; -// top: 0; -// z-index: 999; -// } -// .rejection-list { -// overflow-y: auto; -// list-style: none; -// margin: 0px; -// padding: 16px; -// .rejection-item { -// margin-bottom: 10px; -// border: 1px dashed var(--color-common-border); -// border-radius: 4px; -// padding: 10px; -// cursor: pointer !important; -// transition: background-color 0.2s cubic-bezier(0.35, 0, 0.25, 1); -// &:hover { -// background-color: var(--color-sidenav-menu-hover-link-background) !important; -// border-color: var(--color-sidenav-menu-hover-link-text); -// .title, -// .subtitle, -// .mat-delete-btn, -// .rejection-item-action .mat-icon { -// color: var(--color-sidenav-menu-hover-link-text) !important; -// } -// .rejection-item-action .mat-icon { -// color: var(--color-sidenav-menu-hover-link-text); -// } -// } -// &.selected { -// background-color: var(--color-sidenav-menu-active-link-background) !important; -// border-color: var(--color-sidenav-menu-active-link-text); -// .title, -// .subtitle, -// .mat-delete-btn { -// color: var(--color-sidenav-menu-active-link-text) !important; -// } -// .rejection-item-action .mat-icon { -// color: var(--color-sidenav-menu-hover-link-text); -// } -// } -// } -// } -// } -// .bottom-seprator { -// padding: 10px; -// display: flex; -// align-items: center; -// justify-content: center; -// box-shadow: 13px -6px 13px -7px #00000036; -// position: sticky; -// bottom: 0; -// background-color: var(--color-common-white); -// } -// .no-record-found { -// height: 366px; -// display: flex; -// align-items: center; -// justify-content: center; -// } -// } - -// .mat-dialog-actions { -// margin: 0px !important; -// } diff --git a/apps/36-blocks/src/assets/scss/component/_pagination.scss b/apps/36-blocks/src/assets/scss/component/_pagination.scss deleted file mode 100644 index c890bd69..00000000 --- a/apps/36-blocks/src/assets/scss/component/_pagination.scss +++ /dev/null @@ -1,120 +0,0 @@ -// .mat-paginator { -// background: var(--colo-common-bg); -// &.default-mat-paginator { -// background-color: transparent !important; -// .mat-form-field { -// .mat-form-field-wrapper { -// padding-bottom: 6px !important; -// } -// } -// .mat-paginator-range-label { -// @media only screen and (max-width: 768px) { -// margin: 0 10px 0 10px; -// } -// } -// } -// } - -// .cdk-overlay-pane .mat-select-panel-wrap { -// margin-top: 0 !important; -// } - -// // Goto pagination -// .mat-paginator-outer-container { -// .mat-select-value { -// line-height: 16px; -// } -// .mat-paginator-page-size-label, -// .mat-paginator-range-label { -// font-size: var(--font-size-common-12); -// } -// .mat-form-field-wrapper { -// .mat-form-field-infix { -// padding: 0px 0 10px 0 !important; -// } -// } -// } -// .go-to-pagination { -// border-top: 1px solid var(--color-table-cell-border); -// background-color: var(--color-common-white); -// .mat-paginator { -// box-shadow: none !important; -// border-top: 0px; -// .mat-paginator-page-size-label { -// @media (max-width: 660px) { -// display: none; -// } -// } -// } -// .go-to-container { -// display: flex; -// align-items: baseline; -// height: 39px; -// margin-top: -3px; -// .go-to-label { -// margin: 0 4px; -// font-size: 12px; -// color: var(--color-common-text); -// font-family: var(--font-family-common); -// @media (max-width: 460px) { -// display: none; -// } -// } -// .mat-form-field { -// width: 56px; -// font-size: 12px; -// .mat-form-field-wrapper { -// padding-bottom: 0px !important; -// .mat-form-field-flex { -// font-size: 12px; -// .mat-form-field-infix { -// padding: 4px 0 10px 0 !important; - -// .mat-select-arrow-wrapper { -// transform: translateY(-15%) !important; -// } - -// .mat-select-value-text { -// color: var(--color-common-text); -// } -// } -// } -// } -// } -// } -// .mat-paginator { -// .mat-paginator-container { -// @media (max-width: 460px) { -// padding-right: 0px; -// .mat-paginator-page-size { -// margin-right: 0px !important; -// } -// .mat-paginator-range-label { -// margin-right: 0px !important; -// } -// .mat-paginator-navigation-previous, -// .mat-paginator-navigation-next { -// width: 30px; -// height: 30px; -// line-height: 30px; -// } -// } -// } -// } -// } -// // Add class inside Overlay useing provider -// .custom-mat-paginator { -// .mat-select-panel-wrap { -// .mat-select-panel { -// border-radius: var(--border-common-radius); -// .mat-option { -// font-size: var(--font-size-common-11); -// } -// } -// } -// } - -// .mat-form-field-appearance-outline .mat-form-field-flex { -// font-size: var(--font-size-common-14); -// line-height: 1.225; -// } diff --git a/apps/36-blocks/src/assets/scss/component/_select-option.scss b/apps/36-blocks/src/assets/scss/component/_select-option.scss deleted file mode 100644 index 1961e70d..00000000 --- a/apps/36-blocks/src/assets/scss/component/_select-option.scss +++ /dev/null @@ -1,23 +0,0 @@ -// .cdk-overlay-pane { -// .mat-select-panel-wrap { -// .mat-select-panel { -// .mat-option { -// &.mat-selected { -// color: var(--color-common-text) !important; -// } -// } -// } -// } -// } - -// // Autocomplete -// .mat-autocomplete-panel { -// .mat-option{ -// font-size: 14px; -// height: 40px !important; -// line-height: 40px !important; -// &:hover{ -// background-color: var(--color-common-primary-light) !important; -// } -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_side-dialog.scss b/apps/36-blocks/src/assets/scss/component/_side-dialog.scss deleted file mode 100644 index 6b712f57..00000000 --- a/apps/36-blocks/src/assets/scss/component/_side-dialog.scss +++ /dev/null @@ -1,41 +0,0 @@ -// .mat-right-dialog { -// position: absolute !important; -// right: 0; -// top: 0; -// height: 100%; -// overflow: auto; -// box-shadow: -4px 0px 16px #00000059; -// &.mat-dialog-lg { -// width: 535px; -// } -// &.mat-dialog-md { -// width: 450px; -// } -// .mat-right-dialog-container { -// display: flex; -// flex-direction: column; -// height: 100%; -// } -// .mat-dialog-container { -// width: 100% !important; -// padding: 0px !important; -// border-radius: 0px !important; -// .mat-right-dialog-container { -// .mat-right-dialog-header { -// // position: sticky; -// // top: 0; -// // z-index: 1000; -// padding: 8px 16px; -// border-bottom: 1px solid var(--color-common-border); -// h2 { -// font-weight: var(--font-weight-medium); -// } -// } -// .mat-right-dialog-content { -// padding: 16px; -// overflow-y: scroll; -// height: 100%; -// } -// } -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_sidenav.scss b/apps/36-blocks/src/assets/scss/component/_sidenav.scss deleted file mode 100644 index 856aabd8..00000000 --- a/apps/36-blocks/src/assets/scss/component/_sidenav.scss +++ /dev/null @@ -1,33 +0,0 @@ -// .default-sidenav { -// .mat-nav-list { -// padding-top: 0px; -// .mat-list-item { -// height: 40px !important; -// cursor: pointer !important; -// color: var(--color-sidenav-menu-link-text) !important; -// position: relative; -// .mat-icon { -// border-radius: 0px !important; -// } -// .mat-list-item-content { -// padding: 0px 0px 0px 16px; -// } -// &.mat-list-item-disabled { -// background-color: transparent; -// pointer-events: none; -// } -// .mat-line { -// font-size: 14px !important; -// font-weight: 400; -// &.menu-svg-icon { -// fill: red; -// svg { -// path { -// fill: var(--color-common-slate); -// } -// } -// } -// } -// } -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_status.scss b/apps/36-blocks/src/assets/scss/component/_status.scss deleted file mode 100644 index 3f294281..00000000 --- a/apps/36-blocks/src/assets/scss/component/_status.scss +++ /dev/null @@ -1,42 +0,0 @@ -// .status { -// padding: 0px 12px; -// border-radius: 13px; -// font-size: 12px; -// text-transform: capitalize; -// font-weight: normal; -// width: min-content; -// display: inline-block; -// text-align: center; -// height: 24px; -// line-height: 24px; - -// // Used in unverified, open, status -// &.status-default { -// background-color: var(--color-common-graph-bg) !important; -// color: var(--color-common-rock) !important; -// } -// // Used in in-progress status -// &.status-pending { -// color: var(--color-hello-primary-dark) !important; -// background-color: var(--color-hello-primary-light) !important; -// } - -// // Used in submitted delivered -// &.status-success { -// color: var(--color-whatsApp-primary) !important; -// background-color: var(--color-whatsApp-primary-light) !important; -// } -// // Used in removed, rejected -// &.status-failed { -// color: var(--color-email-primary) !important; -// background-color: var(--color-email-primary-light) !important; -// } -// &.status-approved { -// color: var(--color-common-primary) !important; -// background-color: var(--color-common-primary-light) !important; -// } -// &.status-warning { -// color: var(--color-short-url-primary) !important; -// background-color: var(--color-short-url-primary-light) !important; -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_stepper.scss b/apps/36-blocks/src/assets/scss/component/_stepper.scss deleted file mode 100644 index 680a2d52..00000000 --- a/apps/36-blocks/src/assets/scss/component/_stepper.scss +++ /dev/null @@ -1,72 +0,0 @@ -// .mat-stepper-horizontal{ -// .mat-horizontal-stepper-wrapper { -// height: 100%; -// .mat-horizontal-stepper-header { - -// // height: 36px; -// padding: 16px 12px; -// .mat-step-label{ -// font-size: var(--font-size-common-12); -// color: #3F4346; -// font-weight: 500; -// padding-top: 8px; -// } -// } -// } -// .mat-horizontal-content-container{ -// height: 100%; -// padding: 0 24px 12px 24px !important; -// } -// .mat-horizontal-stepper-content{ -// height: 100%; -// } -// // When Label Position set to labelPosition="bottom" in html -// &.mat-stepper-label-position-bottom{ -// .mat-horizontal-stepper-wrapper { -// .mat-horizontal-stepper-header{ -// &-container{ -// padding: 8px 16px; -// .mat-stepper-horizontal-line{ -// top: 28px; -// } -// } -// &::before, &::after{ -// top: 28px; -// } -// } -// } -// } -// } - -// .mat-stepper-horizontal, -// .mat-stepper-vertical { -// .mat-step-icon-selected, -// .mat-step-icon-state-done, -// .mat-step-icon-state-edit { -// background-color: var(--color-dark-accent) !important; -// color: var(--color-dark-primary) !important; -// } -// } - -// // &.mat-stepper-starched { -// // .mat-horizontal-stepper-wrapper { -// // height: 100%; -// // .mat-horizontal-stepper-header { - -// // // height: 36px; -// // padding: 16px 12px; -// // .mat-step-label{ -// // font-size: var(--font-size-common-12); -// // color: #3F4346; -// // font-weight: 500; -// // padding-top: 8px; -// // } -// // } -// // } -// // .mat-horizontal-content-container{ -// // height: 100%; -// // } -// // .mat-horizontal-stepper-content{ -// // height: 100%; -// // } -// // } diff --git a/apps/36-blocks/src/assets/scss/component/_tabs.scss b/apps/36-blocks/src/assets/scss/component/_tabs.scss deleted file mode 100644 index da415a0f..00000000 --- a/apps/36-blocks/src/assets/scss/component/_tabs.scss +++ /dev/null @@ -1,57 +0,0 @@ -// @use '../../../../../../node_modules/@angular/material/index' as mat; -// /* -// // Tabs -// */ -// .mat-tab-header { -// .mat-tab-labels { -// margin-left: 14px; -// margin-right: 16px; -// .mat-tab-label { -// font-size: 14px; -// line-height: 22px; -// font-weight: 400; -// opacity: 1; -// &.mat-tab-label-active { -// font-weight: 600; -// } -// } -// } -// } - -// // MDC Tab styles (Angular Material 15+) -// .mat-mdc-tab-group, -// .mat-mdc-tab-nav-bar { -// // Active tab text color -// .mdc-tab--active .mdc-tab__text-label { -// color: var(--color-dark-accent) !important; -// } - -// // Tab underline/indicator color - multiple selectors for compatibility -// .mdc-tab-indicator--active .mdc-tab-indicator__content--underline { -// border-color: var(--color-dark-accent) !important; -// } - -// .mat-mdc-tab-header .mat-mdc-ink-bar { -// background-color: var(--color-dark-accent) !important; -// } - -// .mat-ink-bar { -// background-color: var(--color-dark-accent) !important; -// } - -// // Inactive tab text color -// .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label { -// color: var(--color-dark-primary) !important; -// } -// } - -// // Legacy tab styles -// .mat-tab-group { -// .mat-ink-bar { -// background-color: var(--color-dark-accent) !important; -// } - -// .mat-tab-label-active { -// color: var(--color-dark-primary) !important; -// } -// } diff --git a/apps/36-blocks/src/assets/scss/component/_text-style.scss b/apps/36-blocks/src/assets/scss/component/_text-style.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss index d89557d2..2b36fa35 100644 --- a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss +++ b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss @@ -11,12 +11,6 @@ html { @include mat.all-component-themes(theme.$light-theme); @include mat.system-level-colors(theme.$light-theme); @include mat.system-level-typography(theme.$light-theme); - - // Dynamic Material Design System variables for dark theme only - // Explicitly picks tone 40 for primary and tone 90 for on-primary from Azure palette - // --mat-sys-primary: #{map.get(theme.$primary-palette, 80)}; - // --mat-sys-on-primary: #{map.get(theme.$theme-primary, 90)}; - // --mat-button-outlined-label-text-color: var(--color-white, #ffffff); } /* System default: follow OS dark mode when body has no theme class */ @@ -37,5 +31,4 @@ body.dark-theme { body.light-theme { @include mat.all-component-colors(theme.$light-theme); @include mat.system-level-colors(theme.$light-theme); - // --mat-sys-primary: #{map.get(theme.$primary-palette, 80)}; } diff --git a/apps/36-blocks/src/environments/environment.test.ts b/apps/36-blocks/src/environments/environment.test.ts deleted file mode 100644 index 24e25d53..00000000 --- a/apps/36-blocks/src/environments/environment.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -import { envVariables } from './env-variables'; - -export const environment = { - production: false, - env: 'dev', - proxyServer: 'https://test.proxy.msg91.com', - baseUrl: 'https://apitest.msg91.com/api', - ...envVariables, -}; -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss index 38e3c0ff..0a282700 100644 --- a/apps/36-blocks/src/styles.scss +++ b/apps/36-blocks/src/styles.scss @@ -3,34 +3,13 @@ @use 'assets/scss/base/light-theme'; @use 'assets/scss/base/dark-theme'; -/* Reset*/ -@use 'assets/scss/base/reset'; -/* Component*/ -@use 'assets/scss/component/modal'; - /* Theme*/ @use 'assets/scss/theme/default-theme'; /*Components*/ -@use 'assets/scss/component/filters'; @use 'assets/scss/component/toast'; -// @use 'assets/scss/component/table'; @use 'assets/scss/component/loader'; @use 'assets/scss/component/icon'; -@use 'assets/scss/component/card'; -@use 'assets/scss/component/form-field'; -@use 'assets/scss/component/pagination'; -@use 'assets/scss/component/tabs'; -@use 'assets/scss/component/buttons'; -@use 'assets/scss/component/status'; -@use 'assets/scss/component/text-style'; -@use 'assets/scss/component/side-dialog'; -@use 'assets/scss/component/menu'; -@use 'assets/scss/component/sidenav'; -@use 'assets/scss/component/select-option'; -@use 'assets/scss/component/chart'; -@use 'assets/scss/component/mat-list'; -@use 'assets/scss/component/stepper'; @use 'assets/scss/component/animation'; @use '../../shared/scss/global'; body { @@ -73,9 +52,3 @@ body { width: 100%; } } - -// .block-feature-tabs { -// .mat-tab-body-wrapper { -// height: 100%; -// } -// }