From 1f6e47156343f4bb6a1d33d9699c687009d3f755 Mon Sep 17 00:00:00 2001 From: mchouliara Date: Wed, 18 Sep 2024 15:47:24 +0300 Subject: [PATCH] add pseudo tenant settings primary text color, secondary text color saved in local storage --- .../tenant-configuration.ts | 2 ++ .../tenant/tenant-handling.service.ts | 2 ++ ...ion-template-preview-dialog.component.scss | 2 +- ...ate-editor-section-fieldset.component.scss | 2 +- .../plan-blueprint-editor.component.scss | 2 +- ...mport-plan-blueprint.dialog.component.scss | 4 +-- .../css-colors-editor.component.html | 26 +++++++++++++++++++ .../css-colors/css-colors-editor.component.ts | 24 +++++++++++++++++ .../css-colors/css-colors-editor.model.ts | 12 +++++++++ .../annotation-dialog.component.scss | 2 +- .../contact-content.component.scss | 2 +- .../app/ui/dashboard/dashboard.component.scss | 6 ++--- .../recent-edited-activity.component.scss | 2 +- .../description-copy-dialog.component.scss | 4 +-- .../editor/description-editor.component.scss | 4 +-- .../description-listing-item.component.scss | 2 +- .../description-overview.component.scss | 4 +-- .../plan-listing-item.component.scss | 2 +- .../overview/plan-overview.component.scss | 4 +-- .../plan-authors/plan-authors.component.scss | 2 +- .../plan-editor.component.scss | 2 +- .../plan-finalize-dialog.component.scss | 6 ++--- .../add-account-dialog.component.scss | 6 ++--- frontend/src/assets/i18n/baq.json | 2 ++ frontend/src/assets/i18n/de.json | 2 ++ frontend/src/assets/i18n/en.json | 2 ++ frontend/src/assets/i18n/es.json | 2 ++ frontend/src/assets/i18n/gr.json | 2 ++ frontend/src/assets/i18n/hr.json | 2 ++ frontend/src/assets/i18n/pl.json | 2 ++ frontend/src/assets/i18n/pt.json | 2 ++ frontend/src/assets/i18n/sk.json | 2 ++ frontend/src/assets/i18n/sr.json | 2 ++ frontend/src/assets/i18n/tr.json | 2 ++ ...rm-validation-errors-dialog.component.scss | 2 +- .../inapp-notification-editor.component.scss | 2 +- frontend/src/styles.scss | 19 ++++++++------ 37 files changed, 130 insertions(+), 39 deletions(-) diff --git a/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts b/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts index 111542d22..fd67504d9 100644 --- a/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts +++ b/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts @@ -73,6 +73,8 @@ export interface CssColorsTenantConfigurationPersist{ primaryColor2: string; primaryColor3: string; secondaryColor: string; + primaryText?: string; + secondaryText?: string; } export interface DefaultUserLocaleTenantConfigurationPersist{ diff --git a/frontend/src/app/core/services/tenant/tenant-handling.service.ts b/frontend/src/app/core/services/tenant/tenant-handling.service.ts index 284ebe80e..661ee65d5 100644 --- a/frontend/src/app/core/services/tenant/tenant-handling.service.ts +++ b/frontend/src/app/core/services/tenant/tenant-handling.service.ts @@ -87,6 +87,8 @@ export class TenantHandlingService extends BaseService { if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2); if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3); if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor); + if (localStorage.getItem('primaryText')) document.documentElement.style.setProperty(`--primary-text`, localStorage.getItem('primaryText')); + if (localStorage.getItem('secondaryText')) document.documentElement.style.setProperty(`--secondary-text`, localStorage.getItem('secondaryText')); } } } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss index 08f8d7013..266e3126a 100644 --- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss +++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss @@ -4,7 +4,7 @@ width: 100%; height: 89px; background-color: var(--primary-color); - color: #FFFFFF; + color: var(--primary-color-text); font-size: 1.25rem; } diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss index 1b2213760..b6ae5c388 100644 --- a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss +++ b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss @@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2; margin-right: 0.5em; margin-left: -.09em; height: auto; - color: var(--primary-color);; + color: var(--primary-color); } .input_icon{ width: 14px; diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss index e52566192..bb1b3b8f8 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss @@ -36,7 +36,7 @@ .finalize-btn { border-radius: 30px; border: 1px solid var(--primary-color); - background: transparent; + background: var(--primary-text); padding-left: 2em; padding-right: 2em; box-shadow: 0px 3px 6px #1E202029; diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss index 0b4772fdb..3517fba29 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss @@ -14,7 +14,7 @@ min-width: 101px; } .next-btn { - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--primary-text) 0% 0% no-repeat padding-box; border: 1px solid var(--primary-color); border-radius: 30px; opacity: 1; @@ -35,7 +35,7 @@ min-width: 101px; .next-btn:not([disabled]):hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } //ngx dropzone diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html index 5d2b00d8a..2213f1cce 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html @@ -56,6 +56,32 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-TEXT' | translate}} + + + {{formGroup.get('cssColors')?.get('primaryText')?.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR-TEXT' | translate}} + + + {{formGroup.get('cssColors')?.get('secondaryText')?.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} +
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts index 742c52df1..f945f765e 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts @@ -122,6 +122,28 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem emitEvent: false, }) ); + + this.formGroup.get('cssColors')?.get('primaryTextInput').valueChanges.subscribe((color) => { + this.formGroup.get('cssColors')?.get('primaryText').setValue(color, { + emitEvent: false, + }); + }); + this.formGroup.get('cssColors')?.get('secondaryTextInput').valueChanges.subscribe((color) => { + this.formGroup.get('cssColors')?.get('secondaryText').setValue(color, { + emitEvent: false, + }); + }); + + this.formGroup.get('cssColors')?.get('primaryText').valueChanges.subscribe((color) => { + this.formGroup.get('cssColors')?.get('primaryTextInput').setValue(color, { + emitEvent: false, + }); + }); + this.formGroup.get('cssColors')?.get('secondaryText').valueChanges.subscribe((color) => { + this.formGroup.get('cssColors')?.get('secondaryTextInput').setValue(color, { + emitEvent: false, + }); + }); } getItem(successFunction: (item: TenantConfiguration) => void) { @@ -179,6 +201,8 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem persistEntity(onSuccess?: (response) => void): void { const formData = this.formService.getValue(this.formGroup.value) as TenantConfigurationPersist; + localStorage.setItem('primaryText', formData?.cssColors?.primaryText); + localStorage.setItem('secondaryText', formData?.cssColors?.secondaryText); this.tenantConfigurationService.persist(formData) .pipe(takeUntil(this._destroyed)).subscribe( diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts index e346182f8..973acdb8d 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts @@ -57,6 +57,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC primaryColor2: string; primaryColor3: string; secondaryColor: string; + primaryText: string; + secondaryText: string; protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder(); @@ -70,6 +72,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC this.primaryColor2 = item.primaryColor2; this.primaryColor3 = item.primaryColor3; this.secondaryColor = item.secondaryColor; + this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff' + this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000' } return this; } @@ -89,13 +93,17 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC const form: UntypedFormGroup = this.formBuilder.group({ primaryColor: [{ value: this.primaryColor, disabled: disabled }, context.getValidation('primaryColor').validators], + primaryText: [{ value: this.primaryText, disabled: disabled }, context.getValidation('primaryText').validators], primaryColor2: [{ value: this.primaryColor2, disabled: disabled }, context.getValidation('primaryColor2').validators], primaryColor3: [{ value: this.primaryColor3, disabled: disabled }, context.getValidation('primaryColor3').validators], secondaryColor: [{ value: this.secondaryColor, disabled: disabled }, context.getValidation('secondaryColor').validators], + secondaryText: [{ value: this.secondaryText, disabled: disabled }, context.getValidation('secondaryText').validators], primaryColorInput: [{ value: this.primaryColor, disabled: disabled}, context.getValidation('primaryColorInput').validators ], primaryColor2Input: [{ value: this.primaryColor2, disabled: disabled}, context.getValidation('primaryColor2Input').validators ], primaryColor3Input: [{ value: this.primaryColor3, disabled: disabled}, context.getValidation('primaryColor3Input').validators ], secondaryColorInput: [{ value: this.secondaryColor, disabled: disabled}, context.getValidation('secondaryColorInput').validators ], + secondaryTextInput: [{ value: this.secondaryText, disabled: disabled}, context.getValidation('secondaryTextInput').validators ], + primaryTextInput: [{ value: this.primaryText, disabled: disabled}, context.getValidation('primaryTextInput').validators ], }, { updateOn: "change" }); @@ -115,10 +123,14 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC baseValidationArray.push({ key: 'primaryColor2', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor2`)] }); baseValidationArray.push({ key: 'primaryColor3', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor3`)] }); baseValidationArray.push({ key: 'secondaryColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}secondaryColor`)] }); + baseValidationArray.push({ key: 'primaryText', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColorText`)] }); + baseValidationArray.push({ key: 'secondaryText', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}secondaryColorText`)] }); baseValidationArray.push({ key: 'primaryColorInput', validators: [validColorValidator()] }); baseValidationArray.push({ key: 'primaryColor2Input', validators: [validColorValidator()] }); baseValidationArray.push({ key: 'primaryColor3Input', validators: [validColorValidator()] }); baseValidationArray.push({ key: 'secondaryColorInput', validators: [validColorValidator()] }); + baseValidationArray.push({ key: 'primaryTextInput', validators: [validColorValidator()] }); + baseValidationArray.push({ key: 'secondaryTextInput', validators: [validColorValidator()] }); baseContext.validation = baseValidationArray; return baseContext; diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss index f2242d7b4..65582240f 100644 --- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss +++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss @@ -65,7 +65,7 @@ $mat-card-header-size: 40px !default; .comments-count { background-color: var(--primary-color) !important;// #129D99; - color: #FFFFFF !important; + color: var(--primary-text) !important; min-width: 2rem; border-radius: 15px; } diff --git a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss index e99210458..f969c7a15 100644 --- a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss +++ b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss @@ -28,7 +28,7 @@ img { } .send-btn { - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--primary-text) 0% 0% no-repeat padding-box; border: 1px solid var(--primary-color); border-radius: 30px; opacity: 1; diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss index 7380ff239..4e713f5c9 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.scss +++ b/frontend/src/app/ui/dashboard/dashboard.component.scss @@ -62,7 +62,7 @@ box-shadow: 0px 3px 6px #1e202029; border-radius: 30px; border: none; - color: #ffffff; + color: var(--primary-text); opacity: 1; line-height: 1; font-size: 0.87rem; @@ -78,7 +78,7 @@ border-radius: 30px; opacity: 1; border: none; - color: #000000; + color: var(--secondary-text); opacity: 1; line-height: 1; font-size: 0.87rem; @@ -179,7 +179,7 @@ input[type="text"] { opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--primary-text); line-height: 2.4; } diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss index 30ec96771..4c2916502 100644 --- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss +++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss @@ -19,7 +19,7 @@ input[type="text"] { opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--primary-text); line-height: 2.4; } diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss index d28fc193c..875ae1252 100644 --- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss +++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss @@ -17,7 +17,7 @@ min-width: 101px; } .confirm-btn { - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--primary-text) 0% 0% no-repeat padding-box; border: 1px solid var(--primary-color); border-radius: 30px; opacity: 1; @@ -29,5 +29,5 @@ min-width: 101px; .confirm-btn:hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } diff --git a/frontend/src/app/ui/description/editor/description-editor.component.scss b/frontend/src/app/ui/description/editor/description-editor.component.scss index 6c5c5df1c..24d413573 100644 --- a/frontend/src/app/ui/description/editor/description-editor.component.scss +++ b/frontend/src/app/ui/description/editor/description-editor.component.scss @@ -171,7 +171,7 @@ min-width: 67px; height: 37px; background: var(--primary-color) 0% 0% no-repeat padding-box; - color: white; + color: var(--primary-text); border-radius: 4px; opacity: 1; display: flex; @@ -331,7 +331,7 @@ .next { background: var(--primary-color) 0% 0% no-repeat padding-box; - color: white; + color: var(--primary-text); box-shadow: 0px 3px 6px #1e202029; font-weight: 400; cursor: pointer; diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss index 7b6720861..04ff15e0e 100644 --- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss +++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss @@ -116,7 +116,7 @@ input[type="text"] { opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--primary-text); line-height: 2.4; } diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss index 229103750..e5dc860e5 100644 --- a/frontend/src/app/ui/description/overview/description-overview.component.scss +++ b/frontend/src/app/ui/description/overview/description-overview.component.scss @@ -24,7 +24,7 @@ .actions-btn:hover, .finalize-btn:hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } .status-icon { @@ -70,7 +70,7 @@ .plan-btn, .plan-btn > mat-icon { - color: #ffffff; + color: var(--primary-text); } .show-more-btn { diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss index 66974a038..1563f434c 100644 --- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss +++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss @@ -147,7 +147,7 @@ input[type="text"] { opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--primary-text); line-height: 2.4; } diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss index 00d53e4fa..d1935b8e9 100644 --- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss +++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss @@ -15,7 +15,7 @@ width: 2.5em; height: 2.5em; background-color: var(--primary-color); - color: white; + color: var(--primary-text); } .mat-mini-fab-icon, @@ -110,7 +110,7 @@ background: var(--primary-color); border-radius: 4px; font-size: 0.875em; - color: #ffffff; + color: var(--primary-text); } .label-txt { diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss index 9219f11e1..0a1885ba2 100644 --- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss +++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss @@ -29,6 +29,6 @@ .delete-btn:hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } } diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss index 3fde2879a..9d3c5b547 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss @@ -60,7 +60,7 @@ } .save-btn, .plan-export-btn { - background: #ffffff 0% 0% no-repeat padding-box !important; + background: var(--primary-text) 0% 0% no-repeat padding-box !important; border-radius: 30px; opacity: 1; width: auto; diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss index f7c7bf2b0..66c94be9f 100644 --- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss +++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss @@ -87,14 +87,14 @@ justify-content: center; align-items: center; font-weight: 700; - color: #ffffff; + color: var(--primary-text); cursor: pointer; } .submit-btn { min-width: 84px; height: 43px; - background: #ffffff; + background: var(--primary-text); color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 30px; @@ -107,7 +107,7 @@ .submit-btn:not([disabled]):hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } .default-btn { diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss index fa53b5323..0f03d9885 100644 --- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss +++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss @@ -5,7 +5,7 @@ width: 100%; height: 89px; background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); font-size: 1.25rem; } @@ -32,7 +32,7 @@ .add-btn { width: 84px; height: 43px; - background: #ffffff; + background: var(--primary-text); color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 30px; @@ -41,6 +41,6 @@ .add-btn:hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } } diff --git a/frontend/src/assets/i18n/baq.json b/frontend/src/assets/i18n/baq.json index 46e6fb75f..f40a50b6f 100644 --- a/frontend/src/assets/i18n/baq.json +++ b/frontend/src/assets/i18n/baq.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json index f32703dd8..8f1cf72b8 100644 --- a/frontend/src/assets/i18n/de.json +++ b/frontend/src/assets/i18n/de.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 137e0edc3..dd608557e 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -474,6 +474,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json index a148167cc..8978fa0ff 100644 --- a/frontend/src/assets/i18n/es.json +++ b/frontend/src/assets/i18n/es.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/gr.json b/frontend/src/assets/i18n/gr.json index 6e3a74fc0..d23200987 100644 --- a/frontend/src/assets/i18n/gr.json +++ b/frontend/src/assets/i18n/gr.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/hr.json b/frontend/src/assets/i18n/hr.json index 17935d254..ac015ac4b 100644 --- a/frontend/src/assets/i18n/hr.json +++ b/frontend/src/assets/i18n/hr.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json index 5030528c4..a88aab1be 100644 --- a/frontend/src/assets/i18n/pl.json +++ b/frontend/src/assets/i18n/pl.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/pt.json b/frontend/src/assets/i18n/pt.json index fdc4d82ed..ef7d8eaf7 100644 --- a/frontend/src/assets/i18n/pt.json +++ b/frontend/src/assets/i18n/pt.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/sk.json b/frontend/src/assets/i18n/sk.json index f1eaadf44..e454ece8a 100644 --- a/frontend/src/assets/i18n/sk.json +++ b/frontend/src/assets/i18n/sk.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/sr.json b/frontend/src/assets/i18n/sr.json index c589b8f6f..d55dcf2e2 100644 --- a/frontend/src/assets/i18n/sr.json +++ b/frontend/src/assets/i18n/sr.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/assets/i18n/tr.json b/frontend/src/assets/i18n/tr.json index 99d672fcb..5a4a75dd4 100644 --- a/frontend/src/assets/i18n/tr.json +++ b/frontend/src/assets/i18n/tr.json @@ -468,6 +468,8 @@ "PRIMARY-COLOR-2": "Primary Color 2", "PRIMARY-COLOR-3": "Primary Color 3", "SECONDARY-COLOR": "Secondary Color", + "PRIMARY-COLOR-TEXT": "Primary Color Text", + "SECONDARY-COLOR-TEXT": "Secondary Color Text", "DISABLE-SYSTEM-SOURCES": "Disable System Sources", "DEPOSIT-PLUGINS": "Plugin", "FILE-TRANSFORMER-PLUGINS": "Plugin", diff --git a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss index 7b8a07176..ca17ea154 100644 --- a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss +++ b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss @@ -56,7 +56,7 @@ min-width: 101px; } .next-btn { - background: #ffffff 0% 0% no-repeat padding-box; + background: var(--primary-text) 0% 0% no-repeat padding-box; border: 1px solid var(--primary-color); border-radius: 30px; opacity: 1; diff --git a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss index 8166d1f9f..549eb087f 100644 --- a/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss +++ b/frontend/src/notification-service/ui/inapp-notification/editor/inapp-notification-editor.component.scss @@ -15,7 +15,7 @@ box-shadow: 0px 3px 6px #1E202029; border-radius: 30px; border: none; - color: #FFFFFF; + color: var(--primary-text); opacity: 1; font-size: 0.87rem; padding: 0.62rem 1.87rem; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index ac471132b..8f61dcb86 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -9,6 +9,8 @@ --primary-color-3: #246AD3; --secondary-color: #36900B; --warning-color: #f44336; + --primary-text: #ffffff; + --secondary-text: #000000 } // Define your theme with color palettes, typography and density @@ -425,7 +427,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ } &.primary { background: var(--primary-color) 0% 0% no-repeat padding-box; - color: #ffffff; + color: var(--primary-text); border: none; &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{ background: #CBCBCB; @@ -436,7 +438,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ &.secondary { background: var(--secondary-color) 0% 0% no-repeat padding-box; - color: #000000; + color: var(--secondary-text); border: none; &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{ background: #CBCBCB; @@ -448,14 +450,14 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ &.primary-inverted { color: var(--primary-color); border: 1px solid var(--primary-color); - background: #fafafafa; + background: var(--primary-text); &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{ border: 1px solid #CBCBCB; color: #CBCBCB; } &.primary-inverted-hover:hover { background-color: var(--primary-color); - color: white; + color: var(--primary-text); } } @@ -508,10 +510,11 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ height: 44px; color: #ffffff; background: var(--primary-color) 0% 0% no-repeat padding-box; + color: var(--primary-text); box-shadow: 0px 3px 6px #1e202029; border-radius: 30px; &:hover { - background-color: #ffffff; + background-color: var(--primary-text); border: 1px solid var(--primary-color); color: var(--primary-color); } @@ -535,7 +538,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ } &.primary{ background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); &:hover { background-color: var(--secondary-color); color: #000000; @@ -545,10 +548,10 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ &.secondary{ background-color: var(--secondary-color); - color: #000000; + color: var(--secondary-text); &:hover { background-color: var(--primary-color); - color: #ffffff; + color: var(--primary-text); } }