add pseudo tenant settings primary text color, secondary text color saved in local storage
This commit is contained in:
parent
2146c564b7
commit
1f6e471563
|
@ -73,6 +73,8 @@ export interface CssColorsTenantConfigurationPersist{
|
||||||
primaryColor2: string;
|
primaryColor2: string;
|
||||||
primaryColor3: string;
|
primaryColor3: string;
|
||||||
secondaryColor: string;
|
secondaryColor: string;
|
||||||
|
primaryText?: string;
|
||||||
|
secondaryText?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DefaultUserLocaleTenantConfigurationPersist{
|
export interface DefaultUserLocaleTenantConfigurationPersist{
|
||||||
|
|
|
@ -87,6 +87,8 @@ export class TenantHandlingService extends BaseService {
|
||||||
if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2);
|
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.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3);
|
||||||
if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor);
|
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'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 89px;
|
height: 89px;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #FFFFFF;
|
color: var(--primary-color-text);
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
margin-left: -.09em;
|
margin-left: -.09em;
|
||||||
height: auto;
|
height: auto;
|
||||||
color: var(--primary-color);;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
.input_icon{
|
.input_icon{
|
||||||
width: 14px;
|
width: 14px;
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
.finalize-btn {
|
.finalize-btn {
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
background: transparent;
|
background: var(--primary-text);
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
box-shadow: 0px 3px 6px #1E202029;
|
box-shadow: 0px 3px 6px #1E202029;
|
||||||
|
|
|
@ -14,7 +14,7 @@ min-width: 101px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-btn {
|
.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: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -35,7 +35,7 @@ min-width: 101px;
|
||||||
|
|
||||||
.next-btn:not([disabled]):hover {
|
.next-btn:not([disabled]):hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
//ngx dropzone
|
//ngx dropzone
|
||||||
|
|
|
@ -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('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-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</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>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
|
|
@ -122,6 +122,28 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
|
||||||
emitEvent: false,
|
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) {
|
getItem(successFunction: (item: TenantConfiguration) => void) {
|
||||||
|
@ -179,6 +201,8 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
|
||||||
|
|
||||||
persistEntity(onSuccess?: (response) => void): void {
|
persistEntity(onSuccess?: (response) => void): void {
|
||||||
const formData = this.formService.getValue(this.formGroup.value) as TenantConfigurationPersist;
|
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)
|
this.tenantConfigurationService.persist(formData)
|
||||||
.pipe(takeUntil(this._destroyed)).subscribe(
|
.pipe(takeUntil(this._destroyed)).subscribe(
|
||||||
|
|
|
@ -57,6 +57,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
|
||||||
primaryColor2: string;
|
primaryColor2: string;
|
||||||
primaryColor3: string;
|
primaryColor3: string;
|
||||||
secondaryColor: string;
|
secondaryColor: string;
|
||||||
|
primaryText: string;
|
||||||
|
secondaryText: string;
|
||||||
|
|
||||||
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
|
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
|
||||||
|
|
||||||
|
@ -70,6 +72,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
|
||||||
this.primaryColor2 = item.primaryColor2;
|
this.primaryColor2 = item.primaryColor2;
|
||||||
this.primaryColor3 = item.primaryColor3;
|
this.primaryColor3 = item.primaryColor3;
|
||||||
this.secondaryColor = item.secondaryColor;
|
this.secondaryColor = item.secondaryColor;
|
||||||
|
this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff'
|
||||||
|
this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000'
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -89,13 +93,17 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
|
||||||
|
|
||||||
const form: UntypedFormGroup = this.formBuilder.group({
|
const form: UntypedFormGroup = this.formBuilder.group({
|
||||||
primaryColor: [{ value: this.primaryColor, disabled: disabled }, context.getValidation('primaryColor').validators],
|
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],
|
primaryColor2: [{ value: this.primaryColor2, disabled: disabled }, context.getValidation('primaryColor2').validators],
|
||||||
primaryColor3: [{ value: this.primaryColor3, disabled: disabled }, context.getValidation('primaryColor3').validators],
|
primaryColor3: [{ value: this.primaryColor3, disabled: disabled }, context.getValidation('primaryColor3').validators],
|
||||||
secondaryColor: [{ value: this.secondaryColor, disabled: disabled }, context.getValidation('secondaryColor').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 ],
|
primaryColorInput: [{ value: this.primaryColor, disabled: disabled}, context.getValidation('primaryColorInput').validators ],
|
||||||
primaryColor2Input: [{ value: this.primaryColor2, disabled: disabled}, context.getValidation('primaryColor2Input').validators ],
|
primaryColor2Input: [{ value: this.primaryColor2, disabled: disabled}, context.getValidation('primaryColor2Input').validators ],
|
||||||
primaryColor3Input: [{ value: this.primaryColor3, disabled: disabled}, context.getValidation('primaryColor3Input').validators ],
|
primaryColor3Input: [{ value: this.primaryColor3, disabled: disabled}, context.getValidation('primaryColor3Input').validators ],
|
||||||
secondaryColorInput: [{ value: this.secondaryColor, disabled: disabled}, context.getValidation('secondaryColorInput').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" });
|
{ 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: 'primaryColor2', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor2`)] });
|
||||||
baseValidationArray.push({ key: 'primaryColor3', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor3`)] });
|
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: '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: 'primaryColorInput', validators: [validColorValidator()] });
|
||||||
baseValidationArray.push({ key: 'primaryColor2Input', validators: [validColorValidator()] });
|
baseValidationArray.push({ key: 'primaryColor2Input', validators: [validColorValidator()] });
|
||||||
baseValidationArray.push({ key: 'primaryColor3Input', validators: [validColorValidator()] });
|
baseValidationArray.push({ key: 'primaryColor3Input', validators: [validColorValidator()] });
|
||||||
baseValidationArray.push({ key: 'secondaryColorInput', validators: [validColorValidator()] });
|
baseValidationArray.push({ key: 'secondaryColorInput', validators: [validColorValidator()] });
|
||||||
|
baseValidationArray.push({ key: 'primaryTextInput', validators: [validColorValidator()] });
|
||||||
|
baseValidationArray.push({ key: 'secondaryTextInput', validators: [validColorValidator()] });
|
||||||
|
|
||||||
baseContext.validation = baseValidationArray;
|
baseContext.validation = baseValidationArray;
|
||||||
return baseContext;
|
return baseContext;
|
||||||
|
|
|
@ -65,7 +65,7 @@ $mat-card-header-size: 40px !default;
|
||||||
|
|
||||||
.comments-count {
|
.comments-count {
|
||||||
background-color: var(--primary-color) !important;// #129D99;
|
background-color: var(--primary-color) !important;// #129D99;
|
||||||
color: #FFFFFF !important;
|
color: var(--primary-text) !important;
|
||||||
min-width: 2rem;
|
min-width: 2rem;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,7 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-btn {
|
.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: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -62,7 +62,7 @@
|
||||||
box-shadow: 0px 3px 6px #1e202029;
|
box-shadow: 0px 3px 6px #1e202029;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
border: none;
|
border: none;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 0.87rem;
|
font-size: 0.87rem;
|
||||||
|
@ -78,7 +78,7 @@
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border: none;
|
border: none;
|
||||||
color: #000000;
|
color: var(--secondary-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 0.87rem;
|
font-size: 0.87rem;
|
||||||
|
@ -179,7 +179,7 @@ input[type="text"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
min-width: 67px;
|
min-width: 67px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
line-height: 2.4;
|
line-height: 2.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@ input[type="text"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
min-width: 67px;
|
min-width: 67px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
line-height: 2.4;
|
line-height: 2.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ min-width: 101px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn {
|
.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: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -29,5 +29,5 @@ min-width: 101px;
|
||||||
|
|
||||||
.confirm-btn:hover {
|
.confirm-btn:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
|
@ -171,7 +171,7 @@
|
||||||
min-width: 67px;
|
min-width: 67px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
||||||
color: white;
|
color: var(--primary-text);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -331,7 +331,7 @@
|
||||||
|
|
||||||
.next {
|
.next {
|
||||||
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
||||||
color: white;
|
color: var(--primary-text);
|
||||||
box-shadow: 0px 3px 6px #1e202029;
|
box-shadow: 0px 3px 6px #1e202029;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -116,7 +116,7 @@ input[type="text"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
min-width: 67px;
|
min-width: 67px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
line-height: 2.4;
|
line-height: 2.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
.actions-btn:hover,
|
.actions-btn:hover,
|
||||||
.finalize-btn:hover {
|
.finalize-btn:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-icon {
|
.status-icon {
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
|
|
||||||
.plan-btn,
|
.plan-btn,
|
||||||
.plan-btn > mat-icon {
|
.plan-btn > mat-icon {
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-more-btn {
|
.show-more-btn {
|
||||||
|
|
|
@ -147,7 +147,7 @@ input[type="text"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
min-width: 67px;
|
min-width: 67px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
line-height: 2.4;
|
line-height: 2.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: white;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-mini-fab-icon,
|
.mat-mini-fab-icon,
|
||||||
|
@ -110,7 +110,7 @@
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-txt {
|
.label-txt {
|
||||||
|
|
|
@ -29,6 +29,6 @@
|
||||||
|
|
||||||
.delete-btn:hover {
|
.delete-btn:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn, .plan-export-btn {
|
.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;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
|
@ -87,14 +87,14 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
min-width: 84px;
|
min-width: 84px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
background: #ffffff;
|
background: var(--primary-text);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
|
@ -107,7 +107,7 @@
|
||||||
|
|
||||||
.submit-btn:not([disabled]):hover {
|
.submit-btn:not([disabled]):hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.default-btn {
|
.default-btn {
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 89px;
|
height: 89px;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
.add-btn {
|
.add-btn {
|
||||||
width: 84px;
|
width: 84px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
background: #ffffff;
|
background: var(--primary-text);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
|
@ -41,6 +41,6 @@
|
||||||
|
|
||||||
.add-btn:hover {
|
.add-btn:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -474,6 +474,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -468,6 +468,8 @@
|
||||||
"PRIMARY-COLOR-2": "Primary Color 2",
|
"PRIMARY-COLOR-2": "Primary Color 2",
|
||||||
"PRIMARY-COLOR-3": "Primary Color 3",
|
"PRIMARY-COLOR-3": "Primary Color 3",
|
||||||
"SECONDARY-COLOR": "Secondary Color",
|
"SECONDARY-COLOR": "Secondary Color",
|
||||||
|
"PRIMARY-COLOR-TEXT": "Primary Color Text",
|
||||||
|
"SECONDARY-COLOR-TEXT": "Secondary Color Text",
|
||||||
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
|
||||||
"DEPOSIT-PLUGINS": "Plugin",
|
"DEPOSIT-PLUGINS": "Plugin",
|
||||||
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
"FILE-TRANSFORMER-PLUGINS": "Plugin",
|
||||||
|
|
|
@ -56,7 +56,7 @@ min-width: 101px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-btn {
|
.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: 1px solid var(--primary-color);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
box-shadow: 0px 3px 6px #1E202029;
|
box-shadow: 0px 3px 6px #1E202029;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
border: none;
|
border: none;
|
||||||
color: #FFFFFF;
|
color: var(--primary-text);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-size: 0.87rem;
|
font-size: 0.87rem;
|
||||||
padding: 0.62rem 1.87rem;
|
padding: 0.62rem 1.87rem;
|
||||||
|
|
|
@ -9,6 +9,8 @@
|
||||||
--primary-color-3: #246AD3;
|
--primary-color-3: #246AD3;
|
||||||
--secondary-color: #36900B;
|
--secondary-color: #36900B;
|
||||||
--warning-color: #f44336;
|
--warning-color: #f44336;
|
||||||
|
--primary-text: #ffffff;
|
||||||
|
--secondary-text: #000000
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define your theme with color palettes, typography and density
|
// 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 {
|
&.primary {
|
||||||
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
border: none;
|
border: none;
|
||||||
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
||||||
background: #CBCBCB;
|
background: #CBCBCB;
|
||||||
|
@ -436,7 +438,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
background: var(--secondary-color) 0% 0% no-repeat padding-box;
|
background: var(--secondary-color) 0% 0% no-repeat padding-box;
|
||||||
color: #000000;
|
color: var(--secondary-text);
|
||||||
border: none;
|
border: none;
|
||||||
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
||||||
background: #CBCBCB;
|
background: #CBCBCB;
|
||||||
|
@ -448,14 +450,14 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
||||||
&.primary-inverted {
|
&.primary-inverted {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
background: #fafafafa;
|
background: var(--primary-text);
|
||||||
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
&:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
|
||||||
border: 1px solid #CBCBCB;
|
border: 1px solid #CBCBCB;
|
||||||
color: #CBCBCB;
|
color: #CBCBCB;
|
||||||
}
|
}
|
||||||
&.primary-inverted-hover:hover {
|
&.primary-inverted-hover:hover {
|
||||||
background-color: var(--primary-color);
|
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;
|
height: 44px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
background: var(--primary-color) 0% 0% no-repeat padding-box;
|
||||||
|
color: var(--primary-text);
|
||||||
box-shadow: 0px 3px 6px #1e202029;
|
box-shadow: 0px 3px 6px #1e202029;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #ffffff;
|
background-color: var(--primary-text);
|
||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
color: 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{
|
&.primary{
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--secondary-color);
|
background-color: var(--secondary-color);
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
@ -545,10 +548,10 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
||||||
&.secondary{
|
&.secondary{
|
||||||
background-color: var(--secondary-color);
|
background-color: var(--secondary-color);
|
||||||
|
|
||||||
color: #000000;
|
color: var(--secondary-text);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: #ffffff;
|
color: var(--primary-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue