add pseudo tenant settings primary text color, secondary text color saved in local storage

This commit is contained in:
mchouliara 2024-09-18 15:47:24 +03:00
parent 2146c564b7
commit 1f6e471563
37 changed files with 130 additions and 39 deletions

View File

@ -73,6 +73,8 @@ export interface CssColorsTenantConfigurationPersist{
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
primaryText?: string;
secondaryText?: string;
}
export interface DefaultUserLocaleTenantConfigurationPersist{

View File

@ -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'));
}
}
}

View File

@ -4,7 +4,7 @@
width: 100%;
height: 89px;
background-color: var(--primary-color);
color: #FFFFFF;
color: var(--primary-color-text);
font-size: 1.25rem;
}

View File

@ -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;

View File

@ -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;

View File

@ -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

View File

@ -56,6 +56,32 @@
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-TEXT' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryTextInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryText')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryText')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryText')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryText')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryText')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR-TEXT' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('secondaryTextInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('secondaryText')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('secondaryText')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-12">

View File

@ -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(

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;
}

View File

@ -19,7 +19,7 @@ input[type="text"] {
opacity: 1;
min-width: 67px;
height: 37px;
color: #ffffff;
color: var(--primary-text);
line-height: 2.4;
}

View File

@ -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);
}

View File

@ -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;

View File

@ -116,7 +116,7 @@ input[type="text"] {
opacity: 1;
min-width: 67px;
height: 37px;
color: #ffffff;
color: var(--primary-text);
line-height: 2.4;
}

View File

@ -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 {

View File

@ -147,7 +147,7 @@ input[type="text"] {
opacity: 1;
min-width: 67px;
height: 37px;
color: #ffffff;
color: var(--primary-text);
line-height: 2.4;
}

View File

@ -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 {

View File

@ -29,6 +29,6 @@
.delete-btn:hover {
background-color: var(--primary-color);
color: #ffffff;
color: var(--primary-text);
}
}

View File

@ -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;

View File

@ -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 {

View File

@ -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);
}
}

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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;

View File

@ -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;

View File

@ -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);
}
}