From 80dc797ce945b53054a802c05797b69b76ca01d5 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 14:41:12 +0530 Subject: [PATCH 1/2] implement the dark theme --- apps/proxy-auth/src/app/app.component.html | 3 +- apps/proxy-auth/src/app/app.component.ts | 5 +- .../app/otp/send-otp/send-otp.component.html | 3 +- .../user-profile/user-profile.component.html | 2 +- .../user-profile/user-profile.component.scss | 259 ++++++++++++++++++ .../user-profile/user-profile.component.ts | 1 + 6 files changed, 267 insertions(+), 6 deletions(-) diff --git a/apps/proxy-auth/src/app/app.component.html b/apps/proxy-auth/src/app/app.component.html index fdbd484f..8141f0f7 100644 --- a/apps/proxy-auth/src/app/app.component.html +++ b/apps/proxy-auth/src/app/app.component.html @@ -1,3 +1,4 @@ -
+ +
diff --git a/apps/proxy-auth/src/app/app.component.ts b/apps/proxy-auth/src/app/app.component.ts index 916668d9..d8edb2f3 100644 --- a/apps/proxy-auth/src/app/app.component.ts +++ b/apps/proxy-auth/src/app/app.component.ts @@ -32,9 +32,8 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy { // showCompanyDetails: false, authToken: 'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09', - type: 'user-management', - exclude_role_ids: [2], - include_role_ids: [1], + // type: 'user-management', + isHidden: true, theme: 'light', // isPreview: true, isLogin: true, diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html index e1003946..478c1774 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html @@ -4,7 +4,7 @@ [ngClass]="{ 'with-reference-id': referenceId, 'without-reference-id': authToken, - 'dark-theme': theme === 'dark' && type === 'user-management' + 'dark-theme': theme === 'dark' && (type === 'user-management' || authToken) }" >
+

Client Details

diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss index aa6c6706..58e07d5d 100644 --- a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss +++ b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss @@ -13,6 +13,264 @@ body { min-height: 600px; height: 100%; z-index: 10; + + // Dark theme styles + &.dark-theme { + background: transparent; + color: #e0e0e0; + + h2, + h3 { + color: #ffffff; + } + + .mat-mdc-form-field { + .mat-mdc-text-field-wrapper { + background-color: transparent; + } + + .mat-mdc-input-element { + color: #e0e0e0 !important; + } + + .mat-mdc-floating-label { + color: #a0a0a0 !important; + } + + // Label styling for dark theme + .mdc-floating-label { + color: #a0a0a0 !important; + } + + mat-label { + color: #a0a0a0 !important; + } + } + + // Force label color in all states + ::ng-deep .mat-mdc-form-field-flex .mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mat-mdc-form-field .mat-mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mdc-text-field--outlined .mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mat-form-field-label { + color: #a0a0a0 !important; + } + + // Force white border on outlined form fields + ::ng-deep .mat-mdc-form-field-flex { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #ffffff !important; + } + } + + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { + border-color: #ffffff !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { + color: #ffffff !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick { + color: #ffffff !important; + } + + .input-field { + color: #e0e0e0 !important; + } + + table { + background-color: transparent; + box-shadow: none; + border: 1px solid #e0e0e0; + + th { + background-color: transparent; + color: #e0e0e0; + border-color: #e0e0e0; + font-weight: bold; + } + + td { + color: #c0c0c0; + border-color: #e0e0e0; + } + + tr:hover { + background-color: rgba(255, 255, 255, 0.05); + } + } + + .status-active { + color: #4caf50; + } + + .success-message { + color: #4caf50; + } + + .error-message { + color: #ff6b6b; + } + + .no-data { + color: #a0a0a0; + } + + button[mat-flat-button] { + background-color: #000000; + color: #ffffff; + border: 1px solid #ffffff; + + &:hover { + background-color: #222222; + } + + &[color='warn'] { + background-color: #000000; + color: #ffffff; + border: 1px solid #ffffff; + } + } + } + + // Light theme (default) + &.light-theme { + color: #333333; + + h2, + h3 { + color: #1a1a1a; + } + + .mat-mdc-form-field { + .mat-mdc-text-field-wrapper { + background-color: #ffffff; + } + + .mat-mdc-input-element { + color: #333333 !important; + } + + .mat-mdc-floating-label { + color: #555555 !important; + } + } + + // Form field outline styling for light theme + ::ng-deep .mat-mdc-form-field-flex { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #cccccc !important; + } + } + + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { + border-color: #cccccc !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { + color: #cccccc !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick { + color: #1976d2 !important; + } + + .input-field { + color: #333333 !important; + } + + table { + background-color: #ffffff; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; + + th { + background-color: #f5f5f5; + color: #333333; + border-color: #e0e0e0; + font-weight: bold; + } + + td { + color: #434242; + border-color: #e0e0e0; + } + + tr:hover { + background-color: rgba(0, 0, 0, 0.04); + } + } + + .status-active { + color: #2e7d32; + } + + .success-message { + color: #2e7d32; + } + + .error-message { + color: #d32f2f; + } + + .no-data { + color: #757575; + } + + button[mat-flat-button] { + background-color: #1976d2; + color: #ffffff; + border: none; + + &:hover { + background-color: #1565c0; + } + + &[color='warn'] { + background-color: #d32f2f; + color: #ffffff; + border: none; + } + } + + .dropdown-btn { + background: #ffffff; + border-color: #cccccc; + color: #333333; + } + + .dropdown-content { + background: #ffffff; + border-color: #cccccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + } + + .modal-content { + background-color: #ffffff; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .input-label { + color: #404040; + } + } } .full-width { max-width: 300px; @@ -80,6 +338,7 @@ td.mat-cell { th { background-color: #f4f4f4; font-size: small; + font-weight: bold; height: 22px; padding-left: 24px !important; } diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts index 34d4e409..c3067bf5 100644 --- a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts +++ b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts @@ -31,6 +31,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit { @Input() public authToken: string; @Input() public target: string; @Input() public showCard: boolean; + @Input() public theme: string; @Input() set css(type: NgStyle['ngStyle']) { this.cssSubject$.next(type); From 27105a1652c2588a9d1ae0bb2a59d80a68f7b730 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 18:39:17 +0530 Subject: [PATCH 2/2] add login button --- apps/proxy/src/app/auth/auth.component.html | 4 +++ apps/proxy/src/app/auth/auth.component.scss | 37 +++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/apps/proxy/src/app/auth/auth.component.html b/apps/proxy/src/app/auth/auth.component.html index 18b9d9bf..5f62b090 100644 --- a/apps/proxy/src/app/auth/auth.component.html +++ b/apps/proxy/src/app/auth/auth.component.html @@ -1,4 +1,8 @@
+
+ +
+
diff --git a/apps/proxy/src/app/auth/auth.component.scss b/apps/proxy/src/app/auth/auth.component.scss index 2af80930..c11a35c2 100644 --- a/apps/proxy/src/app/auth/auth.component.scss +++ b/apps/proxy/src/app/auth/auth.component.scss @@ -55,6 +55,43 @@ $accent-dark: #14b8a6; overflow-x: hidden; } +.landing-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 16px 72px; + + @include media-breakpoint-down('tablet') { + padding: 16px 32px; + } + + @include media-breakpoint-down('phone') { + padding: 12px 20px; + } +} + +.header-login-btn { + padding: 10px 24px; + background: transparent; + color: $accent; + border: 1px solid $accent; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba($accent, 0.1); + transform: translateY(-1px); + } +} + .hero { position: relative; z-index: 1;