MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

UPGRADE to material 3, refactor tenant configuration css colors

This commit is contained in:
mchouliara 2024-10-14 11:48:03 +03:00
parent 4c039f0bab
commit f29f9f33c7
28 changed files with 454 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/package.json
View File

@ -18,11 +18,12 @@
"@angular/compiler": "^18.0.2",
"@angular/core": "^18.0.2",
"@angular/forms": "^18.0.2",
"@angular/material-moment-adapter": "^18.0.2",
"@angular/material-moment-adapter": "^18.2.7",
"@angular/platform-browser": "^18.0.2",
"@kolkov/angular-editor": "^2.1.0",
"@mat-datetimepicker/core": "^13.0.2",
"@mat-datetimepicker/moment": "^13.0.2",
"@material/material-color-utilities": "^0.3.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@swimlane/ngx-datatable": "^20.1.0",
@ -53,11 +54,11 @@
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.3",
"@angular/cdk": "^18.0.2",
"@angular/cdk": "^18.2.7",
"@angular/cli": "18.0.3",
"@angular/compiler-cli": "^18.0.2",
"@angular/language-service": "^18.0.2",
"@angular/material": "^18.0.2",
"@angular/material": "^18.2.7",
"@angular/platform-browser-dynamic": "^18.0.2",
"@angular/router": "^18.0.2",
"@types/dragula": "^3.7.5",

12
frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts
View File

@ -14,9 +14,7 @@ export interface TenantConfiguration extends BaseEntity{
export interface CssColorsTenantConfiguration{
primaryColor: string;
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
cssOverride: string;
}
export interface DefaultUserLocaleTenantConfiguration{
@ -70,13 +68,7 @@ export interface TenantConfigurationPersist extends BaseEntityPersist{
export interface CssColorsTenantConfigurationPersist{
primaryColor: string;
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
primaryText?: string;
secondaryText?: string;
invertedBtnColor?: string;
warningColor?: string;
cssOverride: string;
}
export interface DefaultUserLocaleTenantConfigurationPersist{

4
frontend/src/app/core/services/configuration/configuration.service.ts
View File

@ -294,9 +294,7 @@ export class ConfigurationService extends BaseComponent {
if (config.defaultCssColors) {
this._cssColorsTenantConfiguration = {
primaryColor: config.defaultCssColors.primaryColor,
primaryColor2: config.defaultCssColors.primaryColor2,
primaryColor3: config.defaultCssColors.primaryColor3,
secondaryColor: config.defaultCssColors.secondaryColor,
cssOverride: config.defaultCssColors.cssOverride
}
}
}

20
frontend/src/app/core/services/tenant/tenant-handling.service.ts
View File

@ -7,6 +7,7 @@ import { BaseService } from '@common/base/base.service';
import { Observable, takeUntil } from 'rxjs';
import { nameof } from 'ts-simple-nameof';
import { TenantConfigurationService } from '../tenant-configuration/tenant-configuration.service';
import { generateDynamicTheme, overrideCss } from '@app/ui/misc/theme-helper';
@Injectable()
export class TenantHandlingService extends BaseService {
@ -74,24 +75,19 @@ export class TenantHandlingService extends BaseService {
return this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [
nameof<TenantConfiguration>(x => x.type),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.cssOverride)].join('.')
]);
}
public applyTenantCssColors(cssColors: CssColorsTenantConfiguration) {
if (cssColors) {
if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor);
if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--link-color`, cssColors.primaryColor2);
if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--draft-color`, 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'));
if (localStorage.getItem('invertedBtnColor')) document.documentElement.style.setProperty(`--inverted-btn-color`, localStorage.getItem('invertedBtnColor'));
if (localStorage.getItem('warningColor')) document.documentElement.style.setProperty(`--warning-color`, localStorage.getItem('warningColor'));
if (cssColors.primaryColor){
generateDynamicTheme(cssColors.primaryColor);
}
if (cssColors.cssOverride){
overrideCss(cssColors.cssOverride);
}
}
}
}

132
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html
View File

@ -4,137 +4,41 @@
<div class="row" style="row-gap: 0.5rem">
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColorInput')" required />
<mat-label [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-HINT' | translate">
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="cssColorForm?.get('primaryColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[overlayClassName]="mr-1"
[formControl]="formGroup.get('cssColors')?.get('primaryColor')"
[formControl]="cssColorForm?.get('primaryColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('backendError')">{{cssColorForm?.get('primaryColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.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' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('secondaryColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('secondaryColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('secondaryColor')?.getError('backendError').message}}</mat-error>
<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>
<mat-form-field class="col-12 col-md-6">
<mat-label >
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.WARNING-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('warningColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('warningColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('invertedBtnColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-form-field class="col-12 pt-2 pb-2 ">
<mat-label>
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR' | translate}}
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.CSS-OVERRIDE' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor2Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor2')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.DRAFT-STATUS-COLOR-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.DRAFT-STATUS-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor3Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor3')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label >
<mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-HINT' | translate">
info
</mat-icon>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('invertedBtnColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('invertedBtnColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('invertedBtnColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('invertedBtnColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
<textarea
matInput
class="w-100 css-override"
[formControl]="cssColorForm?.get('cssOverride')"
></textarea>
<mat-error *ngIf="cssColorForm?.get('cssOverride')?.hasError('backendError')">{{cssColorForm?.get('cssOverride')?.getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-12">
<div class="row actions-row">
<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="primary" class="rounded-btn" (click)="delete()">
{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
</button>
</div>
<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
<div class="col-auto"><button mat-flat-button color="primary" class="rounded-btn" (click)="formSubmit()">
{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>

7
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.scss
View File

@ -1,7 +1,8 @@
.css-colors {
}
::ng-deep .mat-mdc-form-field-icon-suffix {
margin-right: 0.2em;
}
.css-override {
min-height: 5rem;
}

110
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { FormGroup, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { AppPermission } from '@app/core/common/enum/permission.enum';
@ -10,7 +10,7 @@ import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog
import { HttpError, HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { TranslateService } from '@ngx-translate/core';
import { map, takeUntil } from 'rxjs/operators';
import { TenantConfigurationEditorModel } from './css-colors-editor.model';
import { CssColorForm, TenantConfigurationEditorModel } from './css-colors-editor.model';
import { TenantConfiguration, TenantConfigurationPersist } from '@app/core/model/tenant-configuaration/tenant-configuration';
import { TenantConfigurationService } from '@app/core/services/tenant-configuration/tenant-configuration.service';
import { CssColorsEditorService } from './css-colors-editor.service';
@ -21,6 +21,7 @@ import { TenantConfigurationType } from '@app/core/common/enum/tenant-configurat
import { HttpErrorResponse } from '@angular/common/http';
import { LoggingService } from '@app/core/services/logging/logging-service';
import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
import { TenantHandlingService } from '@app/core/services/tenant/tenant-handling.service';
@Component({
@ -60,7 +61,8 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
private logger: LoggingService,
private tenantConfigurationService: TenantConfigurationService,
private cssColorsEditorService: CssColorsEditorService,
private analyticsService: AnalyticsService
private analyticsService: AnalyticsService,
private tenantHandlingService: TenantHandlingService
) {
super();
}
@ -80,90 +82,21 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
}
get cssColorForm(): FormGroup<CssColorForm> {
return this.formGroup.get('cssColors') as FormGroup<CssColorForm>;
}
private bindColorInputs() {
this.formGroup.get('cssColors')?.get('primaryColorInput').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('primaryColor').setValue(color, {
this.cssColorForm?.get('primaryColorInput').valueChanges.subscribe((color) => {
this.cssColorForm?.get('primaryColor').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('primaryColor').valueChanges.subscribe((color) =>
this.formGroup.get('cssColors')?.get('primaryColorInput').setValue(color, {
this.cssColorForm?.get('primaryColor').valueChanges.subscribe((color) =>
this.cssColorForm?.get('primaryColorInput').setValue(color, {
emitEvent: false,
})
);
this.formGroup.get('cssColors')?.get('primaryColor2Input').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('primaryColor2').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('primaryColor2').valueChanges.subscribe((color) =>
this.formGroup.get('cssColors')?.get('primaryColor2Input').setValue(color, {
emitEvent: false,
})
);
this.formGroup.get('cssColors')?.get('primaryColor3Input').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('primaryColor3').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('primaryColor3').valueChanges.subscribe((color) =>
this.formGroup.get('cssColors')?.get('primaryColor3Input').setValue(color, {
emitEvent: false,
})
);
this.formGroup.get('cssColors')?.get('secondaryColorInput').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('secondaryColor').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('secondaryColor').valueChanges.subscribe((color) =>
this.formGroup.get('cssColors')?.get('secondaryColorInput').setValue(color, {
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,
});
});
this.formGroup.get('cssColors')?.get('invertedBtnColor').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('invertedBtnColorInput').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('invertedBtnColorInput').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('invertedBtnColor').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('warningColor').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('warningColorInput').setValue(color, {
emitEvent: false,
});
});
this.formGroup.get('cssColors')?.get('warningColorInput').valueChanges.subscribe((color) => {
this.formGroup.get('cssColors')?.get('warningColor').setValue(color, {
emitEvent: false,
});
});
}
getItem(successFunction: (item: TenantConfiguration) => void) {
@ -186,9 +119,9 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
}
}
onCallbackSuccess(data?: any): void {
onCallbackSuccess(cssColors?: any): void {
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.tenantHandlingService.applyTenantCssColors(cssColors);
this.refreshData();
}
@ -221,16 +154,11 @@ 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);
localStorage.setItem('invertedBtnColor', formData?.cssColors?.invertedBtnColor);
localStorage.setItem('warningColor', formData?.cssColors?.warningColor);
this.tenantConfigurationService.persist(formData)
.pipe(takeUntil(this._destroyed)).subscribe(
complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete),
error => this.onCallbackError(error)
);
.pipe(takeUntil(this._destroyed)).subscribe({
next: (complete) => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(formData?.cssColors),
error: (error) => this.onCallbackError(error)
});
}
formSubmit(): void {

57
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts
View File

@ -1,4 +1,4 @@
import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
import { FormControl, FormGroup, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
import { TenantConfigurationType } from "@app/core/common/enum/tenant-configuration-type";
import { CssColorsTenantConfiguration, CssColorsTenantConfigurationPersist, TenantConfiguration, TenantConfigurationPersist } from "@app/core/model/tenant-configuaration/tenant-configuration";
import { BaseEditorModel } from "@common/base/base-form-editor-model";
@ -54,13 +54,7 @@ export class TenantConfigurationEditorModel extends BaseEditorModel implements T
export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantConfigurationPersist {
primaryColor: string;
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
primaryText: string;
secondaryText: string;
invertedBtnColor: string;
warningColor: string;
cssOverride: string;
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
@ -71,13 +65,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
public fromModel(item: CssColorsTenantConfiguration): CssColorsTenantConfigurationEditorModel {
if (item) {
this.primaryColor = item.primaryColor;
this.primaryColor2 = item.primaryColor2;
this.primaryColor3 = item.primaryColor3;
this.secondaryColor = item.secondaryColor;
this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff';
this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000';
this.invertedBtnColor = localStorage.getItem('invertedBtnColor') ?? '#ffffff';
this.warningColor = localStorage.getItem('warningColor') ?? '#ff4081';
this.cssOverride = item.cssOverride
}
return this;
}
@ -86,7 +74,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
context?: ValidationContext,
disabled?: boolean,
rootPath?: string
}): UntypedFormGroup {
}): FormGroup<CssColorForm> {
let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) {
context = CssColorsTenantConfigurationEditorModel.createValidationContext({
@ -97,22 +85,8 @@ 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],
invertedBtnColor: [{ value: this.invertedBtnColor, disabled: disabled }, context.getValidation('invertedBtnColor').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 ],
invertedBtnColorInput: [{ value: this.invertedBtnColor, disabled: disabled}, context.getValidation('invertedBtnColorInput').validators ],
warningColor: [{ value: this.warningColor, disabled: disabled }, context.getValidation('secondaryText').validators],
warningColorInput: [{ value: this.warningColor, disabled: disabled }, context.getValidation('invertedBtnColor').validators],
cssOverride: [{value: this.cssOverride, disabled: disabled}, context.getValidation('cssOverride').validators]
},
{ updateOn: "change" });
@ -129,23 +103,16 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>();
baseValidationArray.push({ key: 'primaryColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor`)] });
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: 'invertedBtnColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}invertedBtnColor`)] });
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()] });
baseValidationArray.push({ key: 'invertedBtnColorInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'warningColor', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'warningColorInput', validators: [validColorValidator()] });
baseValidationArray.push({ key: 'cssOverride', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}cssOverride`)] });
baseContext.validation = baseValidationArray;
return baseContext;
}
}
export interface CssColorForm {
primaryColor: FormControl<string>;
primaryColorInput: FormControl<string>;
cssOverride: FormControl<string>;
}

4
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.resolver.ts
View File

@ -23,9 +23,7 @@ export class CssColorsEditorResolver extends BaseEditorResolver {
nameof<TenantConfiguration>(x => x.cssColors),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.cssOverride)].join('.'),
nameof<TenantConfiguration>(x => x.createdAt),

4
frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -45,12 +45,12 @@
<div class="row d-flex align-items-center">
<div *ngIf="!this.hasPlans()" class="col-auto p-0 add-description-btn d-flex">
<div class="pr-2">
<button type="button" mat-button class="align-self-center rounded-btn primary" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
<button type="button" color="accent" mat-flat-button class="align-self-center rounded-btn" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
</div>
</div>
<div *ngIf="this.hasPlans()" class="col-auto p-0 new-description-tour add-description-btn col-auto d-flex">
<div class="pr-2">
<button mat-button type="button" class="align-self-center rounded-btn secondary" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
<button mat-flat-button color="accent" type="button" class="align-self-center rounded-btn" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
</div>
</div>
<span class="col-auto ml-auto">

127
frontend/src/app/ui/misc/theme-helper.ts Normal file
View File

@ -0,0 +1,127 @@
import { argbFromHex, hexFromArgb, themeFromSourceColor, TonalPalette, applyTheme } from "@material/material-color-utilities";
export function generateDynamicTheme(primaryColor: string) {
const fallbackPrimary = '#18488F';
let argbPrimary;
try {
argbPrimary = argbFromHex(primaryColor);
} catch (error) {
// falling to default color if it's invalid color
argbPrimary = argbFromHex(fallbackPrimary);
}
const targetElement = document.documentElement;
// Get the theme from a hex color
const theme = themeFromSourceColor(argbPrimary);
// Apply theme to root element
applyTheme(theme, {
target: targetElement,
dark: false,
brightnessSuffix: true,
});
const styles = targetElement.style;
for (const key in styles) {
if (Object.prototype.hasOwnProperty.call(styles, key)) {
const propName = styles[key];
if (propName.indexOf('--md-sys') === 0) {
const sysPropName = '--sys' + propName.replace('--md-sys-color', '');
targetElement.style.setProperty(
sysPropName,
targetElement.style.getPropertyValue(propName)
);
}
}
}
}
// export function applyThemeFromSelectedColors(primary: string, secondary: string, error: string): void {
// const primaryPalette = getColorPalette(primary ?? '#18488F');
// const secondaryPalette = getColorPalette(secondary ?? '#36900B');
// const errorPalette = getColorPalette(error ?? '#cf1407');
// primaryPalette.error = errorPalette?.primary;
// document.documentElement.style.setProperty(`--primary-color`, primary);
// createCustomProperties(primaryPalette, 'p');
// createCustomProperties(secondaryPalette, 't');
// document.documentElement.style.setProperty(`--secondary-color`, secondary);
// // errorPalette?.forEach((color) => {
// // document.documentElement.style.setProperty(`--error-${color.tone}`, color.hex);
// // })
// }
// function getColorPalette(color: string): Record<string, ColorData[]>{
// const tones = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 99, 100];
// const theme = themeFromSourceColor(
// argbFromHex(color)
// );
// const colors = Object.entries(theme.palettes).reduce(
// (acc: any, curr: [string, TonalPalette]) => {
// const hexColors = tones.map((tone) => ({
// tone,
// hex: hexFromArgb(curr[1].tone(tone))// tone < 30 || tone > 60 ? hexFromArgb(curr[1].tone(tone)) : color,
// }));
// return { ...acc, [curr[0]]: hexColors };
// },
// {}
// );
// return colors;
// }
// function createCustomProperties(
// colorsFromPaletteConfig: Record<string, ColorData[]>,
// paletteKey: 'p' | 't',
// ) {
// let styleString = '';
// for (const [key, palette] of Object.entries(colorsFromPaletteConfig)) {
// palette.forEach(({ hex, tone }) => {
// if (key === 'primary') {
// styleString = `--${paletteKey === 'p' ? key : 'tertiary'}-${tone}`;
// } else {
// styleString = `--${paletteKey}-${key}-${tone}`;
// }
// document.documentElement.style.setProperty(styleString, hex)
// });
// }
// }
export function overrideCss(input: string){
let json;
const targetElement = document.documentElement;
try {
input = input.replace(/(\r\n|\n|\r)/gm, "");
json = JSON.parse(input);
} catch(error) {
return;
}
for (const [key, rgba] of Object.entries(json)) {
if (key.indexOf('--md-sys') === 0) {
const sysPropName = '--sys' + key.replace('--md-sys-color', '');
targetElement.style.setProperty(
sysPropName,
rgba.toString()
);
}
targetElement.style.setProperty(
key,
rgba.toString()
);
}
}
interface ColorData {
tone: number;
hex: string;
}

8
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -25,7 +25,7 @@
</li>
<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
<button type="button" mat-flat-button color="primary" class="rounded-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li>
<li class="navbar-item-lg">
<button mat-icon-button
@ -53,7 +53,7 @@
<mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
</button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<mat-menu #tenantMenu="matMenu">
<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
</mat-menu>
</li>
@ -103,13 +103,13 @@
<mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
</button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<mat-menu #tenantMenu="matMenu">
<app-tenant-switch></app-tenant-switch>
</mat-menu>
</ng-container>
</li>
<li class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
<button type="button" mat-button color="primary" class="rounded-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li>
</ul>
</mat-menu>

14
frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -73,13 +73,18 @@ $mat-card-header-size: 40px !default;
.faq-title {
text-align: left;
font-weight: bold;
color: #000000;
opacity: 1;
}
.faq-title, .lang {
color: #000000 !important;
&:hover {
color: var(--sys-primary)
}
}
.faq-title:hover,
.lang:hover {
color: var(--primary-color) !important;
color: var(--sys-primary) !important;
}
.lang {
@ -184,8 +189,9 @@ $mat-card-header-size: 40px !default;
height: auto !important;
}
::ng-deep .nav-mat-menu {
.mat-mdc-menu-content {
::ng-deep .mat-mdc-menu-content {
padding: 0 !important;
.mat-button-toggle-group {
border: none !important;
}
}

4
frontend/src/app/ui/plan/overview/plan-overview.component.html
View File

@ -60,7 +60,7 @@
<div class="row mb-4" *ngIf="!lockStatus || canClonePlan() || (canDeletePlan() && !isLocked)">
<div class="col-auto pr-0">
@if(isActive && canEditPlan(plan) && !lockStatus){
<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<button color="primary" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button>
} @else {
@ -184,7 +184,7 @@
<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
<div class="col-auto pr-0" aria-hidden>
<button mat-mini-fab class="finalize-btn" aria-hidden="true">
<button mat-mini-fab color="primary" aria-hidden="true">
<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
</button>
</div>

3
frontend/src/app/ui/plan/overview/plan-overview.component.ts
View File

@ -489,7 +489,8 @@ export class PlanOverviewComponent extends BaseComponent implements OnInit {
planId: rowId,
planName: rowName,
blueprint: this.selectedBlueprint
}
},
minWidth: '80vw'
});
}

14
frontend/src/assets/i18n/baq.json
View File

@ -469,18 +469,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/de.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/en.json
View File

@ -478,18 +478,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/es.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/gr.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

13
frontend/src/assets/i18n/hr.json
View File

@ -472,17 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/pl.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/pt.json
View File

@ -471,18 +471,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/sk.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/sr.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

14
frontend/src/assets/i18n/tr.json
View File

@ -472,18 +472,8 @@
"CULTURE": "Format",
"LANGUAGE": "Language",
"PRIMARY-COLOR": "Primary Color",
"PRIMARY-COLOR-2": "Primary Color 2",
"PRIMARY-COLOR-3": "Primary Color 3",
"DRAFT-STATUS-COLOR": "Draft Status Color",
"DRAFT-STATUS-COLOR-HINT": "Font color for plans and descriptions that are in drafted status",
"LINK-COLOR": "Link Color",
"LINK-COLOR-HINT": "Font color for the links in the application",
"SECONDARY-COLOR": "Secondary Color",
"PRIMARY-COLOR-TEXT": "Primary Color Text",
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
"INVERTED-BUTTON-COLOR": "Inverted Button Color",
"INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
"WARNING-COLOR": "Warning Color",
"PRIMARY-COLOR-HINT": "This color generates a theme based on it. Any changes to the theme can be made using the CSS override",
"CSS-OVERRIDE": "CSS Override",
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
"DEPOSIT-PLUGINS": "Plugin",
"FILE-TRANSFORMER-PLUGINS": "Plugin",

126
frontend/src/material-theme.scss Normal file
View File

@ -0,0 +1,126 @@
@use 'sass:map';
@use '@angular/material' as mat;
// Be sure that you only ever include this mixin once!
@include mat.core();
:root {
--primary-color: #18488F;
--link-color: #1E59B1;
--draft-color: #f16868;
--secondary-color: #36900B;
--primary-text: #ffffff;
--secondary-text: #000000;
--inverted-btn-color: #ffffff;
--warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for better contrast
--gray: #707070; //previously #848484
--light-gray: #aaaaaa;
--dark-gray: #212121;
}
$angular-material-3-theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$cyan-palette,
tertiary: mat.$yellow-palette,
use-system-variables: true
),
typography: (
plain-family: 'Roboto, sans-serif',
brand-family: 'Roboto, sans-serif',
regular-weight: 400,
medium-weight: 400,
bold-weight: 700,
use-system-variables: true
),
density: (
scale: 0
)
));
:root {
@include mat.all-component-themes($angular-material-3-theme);
@include mat.color-variants-backwards-compatibility($angular-material-3-theme);
@include mat.system-level-colors($angular-material-3-theme);
@include mat.system-level-typography($angular-material-3-theme);
// --sys-body-large: 400 1rem / 1.5rem Roboto, sans-serif;
--sys-body-large-line-height: 1.125rem;
--sys-body-large-size: 1rem;
// --sys-body-large-tracking: 0.031rem;
// --sys-body-large-weight: 400;
// --sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
--sys-body-medium-line-height: 1.25rem;
--sys-body-medium-size: 0.875rem;
// --sys-body-medium-tracking: 0.016rem;
// --sys-body-medium-weight: 400;
// --sys-body-small: 400 0.75rem / 1rem Roboto, sans-serif;
--sys-body-small-line-height: 1rem;
--sys-body-small-size: 0.75rem;
// --sys-body-small-tracking: 0.025rem;
// --sys-body-small-weight: 400;
// --sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;
--sys-display-large-line-height: 4rem;
--sys-display-large-size: 3.562rem;
// --sys-display-large-tracking: -0.016rem;
// --sys-display-large-weight: 400;
// --sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;
--sys-display-medium-line-height: 3.25rem;
--sys-display-medium-size: 2.812rem;
// --sys-display-medium-tracking: 0rem;
// --sys-display-medium-weight: 400;
// --sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;
--sys-display-small-line-height: 2.75rem;
--sys-display-small-size: 2.25rem;
// --sys-display-small-tracking: 0rem;
// --sys-display-small-weight: 400;
// --sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;
--sys-headline-large-line-height: 2.5rem;
--sys-headline-large-size: 2rem;
// --sys-headline-large-tracking: 0rem;
// --sys-headline-large-weight: 400;
// --sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;
--sys-headline-medium-line-height: 2.25rem;
--sys-headline-medium-size: 1.75rem;
// --sys-headline-medium-tracking: 0rem;
// --sys-headline-medium-weight: 400;
// --sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;
--sys-headline-small-line-height: 2rem;
--sys-headline-small-size: 1.5rem;
// --sys-headline-small-tracking: 0rem;
// --sys-headline-small-weight: 400;
// --sys-label-large: 500 0.875rem / 1.25rem Roboto, sans-serif;
--sys-label-large-line-height: 1.25rem;
--sys-label-large-size: 0.87rem;
// --sys-label-large-tracking: 0.006rem;
// --sys-label-large-weight: 500;
--sys-label-large-weight-prominent: 700;
// --sys-label-medium: 500 0.75rem / 1rem Roboto, sans-serif;
--sys-label-medium-line-height: 1rem;
--sys-label-medium-size: 0.75rem;
// --sys-label-medium-tracking: 0.031rem;
// --sys-label-medium-weight: 500;
--sys-label-medium-weight-prominent: 700;
// --sys-label-small: 500 0.688rem / 1rem Roboto, sans-serif;
--sys-label-small-line-height: 1rem;
--sys-label-small-size: 0.688rem;
// --sys-label-small-tracking: 0.031rem;
// --sys-label-small-weight: 500;
// --sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
--sys-title-large-line-height: 1.75rem;
--sys-title-large-size: 1.375rem;
// --sys-title-large-tracking: 0rem;
--sys-title-large-weight: 500;
// --sys-title-medium: 500 1rem / 1.5rem Roboto, sans-serif;
--sys-title-medium-line-height: 1.125rem;
--sys-title-medium-size: 1rem;
// --sys-title-medium-tracking: 0.009rem;
// --sys-title-medium-weight: 500;
// --sys-title-small: 500 0.875rem / 1.25rem Roboto, sans-serif;
--sys-title-small-line-height: 1.25rem;
--sys-title-small-size: 0.875rem;
// --sys-title-small-tracking: 0.006rem;
// --sys-title-small-weight: 500;
}

192
frontend/src/styles.scss
View File

@ -18,136 +18,122 @@
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
// Be sure that you only ever include this mixin once!
@include mat.core();
//@include mat.core();
// styles moved from material-dashboard.scss -> overwrite bootstrap default styles
// @import "assets/scss/core/type";
:root {
--primary-color: #18488F;
--link-color: #1E59B1;
--draft-color: #f16868;
--secondary-color: #36900B;
--primary-text: #ffffff;
--secondary-text: #000000;
--inverted-btn-color: #ffffff;
// :root {
// --primary-color: #18488F;
// --link-color: #1E59B1;
// --draft-color: #f16868;
// --secondary-color: #36900B;
// --primary-text: #ffffff;
// --secondary-text: #000000;
// --inverted-btn-color: #ffffff;
--warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for better contrast
--gray: #707070; //previously #848484
--light-gray: #aaaaaa;
--dark-gray: #212121;
}
// --warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for better contrast
// --gray: #707070; //previously #848484
// --light-gray: #aaaaaa;
// --dark-gray: #212121;
// }
// Define your theme with color palettes, typography and density
$mat-theme-primary-palette: map-merge(mat.$m2-cyan-palette, (501: var(--primary-color), contrast: (100: black, )));
$mat-theme-primary: mat.m2-define-palette($mat-theme-primary-palette,
$default: 501,
$lighter: 100,
$darker: 700,
$text: 500);
// $mat-theme-primary-palette: map-merge(mat.$m2-cyan-palette, (501: var(--primary-color), contrast: (100: black, )));
// $mat-theme-primary: mat.m2-define-palette($mat-theme-primary-palette,
// $default: 501,
// $lighter: 100,
// $darker: 700,
// $text: 500);
$mat-theme-accent-palette: map-merge(mat.$m2-teal-palette, (501: var(--secondary-color), contrast: (A100: white, A200: white, )));
$mat-theme-accent: mat.m2-define-palette($mat-theme-accent-palette,
$default: 501,
$lighter: A100,
$darker: A200,
$text: 600);
// $mat-theme-accent-palette: map-merge(mat.$m2-teal-palette, (501: var(--secondary-color), contrast: (A100: white, A200: white, )));
// $mat-theme-accent: mat.m2-define-palette($mat-theme-accent-palette,
// $default: 501,
// $lighter: A100,
// $darker: A200,
// $text: 600);
$mat-theme-warn-palette: map-merge(mat.$m2-pink-palette, ());
$mat-theme-warn: mat.m2-define-palette($mat-theme-warn-palette,
$default: A200,
$lighter: 500,
$darker: 500,
$text: A700);
$mat-dark-theme-primary-palette: map-merge(mat.$m2-lime-palette, (contrast: (200: #030844, A100: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87), )));
$mat-dark-theme-primary: mat.m2-define-palette($mat-dark-theme-primary-palette,
$default: 200,
$lighter: A100,
$darker: A700,
$text: 700);
$mat-dark-theme-accent-palette: map-merge(mat.$m2-green-palette, (contrast: (A200: black, 50: black, A400: black, )));
$mat-dark-theme-accent: mat.m2-define-palette($mat-dark-theme-accent-palette,
$default: A200,
$lighter: 50,
$darker: A400,
$text: A100);
$mat-dark-theme-warn-palette: map-merge(mat.$m2-pink-palette, (contrast: (A100: black, 100: white, )));
$mat-dark-theme-warn: mat.m2-define-palette($mat-dark-theme-warn-palette,
$default: A100,
$lighter: 100,
$darker: A700,
$text: 100);
// $mat-theme-warn-palette: map-merge(mat.$m2-pink-palette, ());
// $mat-theme-warn: mat.m2-define-palette($mat-theme-warn-palette,
// $default: A200,
// $lighter: 500,
// $darker: 500,
// $text: A700);
//including the typography rules from _type.scss here
$mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
// $headline-2: mat.m2-define-typography-level($font-size: 2.25rem),
// $headline-3: mat.m2-define-typography-level($font-size: 1.5625rem),
// $headline-4: mat.m2-define-typography-level($font-size: 1.125rem),
// $headline-5: mat.m2-define-typography-level($font-size: 1.0625rem),
// $headline-6: mat.m2-define-typography-level($font-size: 1rem ),
$body-1: mat.m2-define-typography-level($font-size: 1.125rem),
$body-2: mat.m2-define-typography-level($font-size: 0.9rem),
$button: mat.m2-define-typography-level($font-size: 0.87rem),
$caption: mat.m2-define-typography-level($font-size: 0.77rem),
// Line-height must be unit-less fraction of the font-size.
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125),
);
// $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// // $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
// // $headline-2: mat.m2-define-typography-level($font-size: 2.25rem),
// // $headline-3: mat.m2-define-typography-level($font-size: 1.5625rem),
// // $headline-4: mat.m2-define-typography-level($font-size: 1.125rem),
// // $headline-5: mat.m2-define-typography-level($font-size: 1.0625rem),
// // $headline-6: mat.m2-define-typography-level($font-size: 1rem ),
// $body-1: mat.m2-define-typography-level($font-size: 1.125rem),
// $body-2: mat.m2-define-typography-level($font-size: 0.9rem),
// $button: mat.m2-define-typography-level($font-size: 0.87rem),
// $caption: mat.m2-define-typography-level($font-size: 0.77rem),
// // Line-height must be unit-less fraction of the font-size.
// // $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125),
// );
$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
// $headline-2: mat.m2-define-typography-level($font-size: 2.38rem),
// $headline-3: mat.m2-define-typography-level($font-size: 1.6925rem),
// $headline-4: mat.m2-define-typography-level($font-size: 1.255rem),
// $headline-5: mat.m2-define-typography-level($font-size: 1.1925rem),
// $headline-6: mat.m2-define-typography-level($font-size: 1.13rem ),
$body-1: mat.m2-define-typography-level($font-size: 1.255rem),
$body-2: mat.m2-define-typography-level($font-size: 1.15rem),
$button: mat.m2-define-typography-level($font-size: 1rem),
);
// $mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// // $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
// // $headline-2: mat.m2-define-typography-level($font-size: 2.38rem),
// // $headline-3: mat.m2-define-typography-level($font-size: 1.6925rem),
// // $headline-4: mat.m2-define-typography-level($font-size: 1.255rem),
// // $headline-5: mat.m2-define-typography-level($font-size: 1.1925rem),
// // $headline-6: mat.m2-define-typography-level($font-size: 1.13rem ),
// $body-1: mat.m2-define-typography-level($font-size: 1.255rem),
// $body-2: mat.m2-define-typography-level($font-size: 1.15rem),
// $button: mat.m2-define-typography-level($font-size: 1rem),
// );
$mat-density: 0;
// $mat-density: 0;
// @include mat.elevation(
// $zValue: 12,
// $color: #000,
// $opacity: 0.5
// );
$mat-core-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
accent: $mat-theme-accent,
warn: $mat-theme-warn),
typography: $mat-typography,
density: $mat-density));
// $mat-core-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
// accent: $mat-theme-accent,
// warn: $mat-theme-warn),
// typography: $mat-typography,
// density: $mat-density));
$mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-primary,
accent: $mat-dark-theme-accent,
warn: $mat-dark-theme-warn,
)));
$mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
accent: $mat-theme-accent,
warn: $mat-theme-warn),
typography: $mat-accessibility-typography,
density: $mat-density));
@import './material-theme.scss';
@include mat.all-component-themes($mat-core-theme);
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
//m3 styles overwrites
.mat-mdc-mini-fab {
border-radius: 50% !important;
}
.mat-mdc-dialog-surface {
border-radius: 8px !important;
}
.mat-button-toggle-group.mat-button-toggle-group-appearance-standard{
border-radius: 4px;
border-color: var(--mat-standard-button-toggle-selected-state-background-color);
.mat-button-toggle.mat-button-toggle-appearance-standard {
border-left-color: var(--mat-standard-button-toggle-selected-state-background-color);
}
}
// $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
// accent: $mat-theme-accent,
// warn: $mat-theme-warn),
// typography: $mat-accessibility-typography,
// density: $mat-density));
// @include mat.all-component-themes($mat-core-theme);
.accessibility-theme {
@include mat.all-component-themes($mat-accessibility-theme);
// @include mat.all-component-themes($mat-accessibility-theme);
// change individual classes set in components' scss
.frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
@ -172,9 +158,6 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
}
a {
color: var(--link-color);
&:hover {
@ -502,11 +485,6 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
&.rounded-btn{
padding: 0.62rem 1.87rem;
min-height: 40px;
border-radius: 30px;
opacity: 1;
// padding-left: 2em;
// padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
}
&.primary {