From da597131dbd3e62d8546aa623be5f211b4bcd61f Mon Sep 17 00:00:00 2001 From: mchouliara Date: Thu, 26 Sep 2024 17:30:09 +0300 Subject: [PATCH] replace primary color 2, primary color 3 with link + draft color. Fix respective colors in views, remove unused styles --- .../tenant/tenant-handling.service.ts | 4 +- .../editor/language-editor.component.scss | 2 +- .../plan-blueprint-editor.component.scss | 2 +- .../prefilling-source-editor.component.scss | 8 - .../reference-type-editor.component.scss | 10 +- .../editor/reference-editor.component.scss | 8 - .../css-colors-editor.component.html | 72 +++--- .../editor/tenant-editor.component.scss | 8 - .../editor/usage-limit-editor.component.scss | 10 +- .../annotation-dialog.component.scss | 2 +- .../app/ui/dashboard/dashboard.component.scss | 6 +- .../recent-edited-activity.component.scss | 2 +- ...cription-base-fields-editor.component.scss | 2 +- .../editor/description-editor.component.scss | 2 +- .../description-listing.component.scss | 9 +- .../description-filter.component.scss | 2 +- .../description-listing-item.component.scss | 45 +--- .../description-overview.component.scss | 1 - .../navigation-breadcrumb.component.html | 2 +- .../navigation-breadcrumb.component.scss | 2 +- .../src/app/ui/navbar/navbar.component.scss | 4 +- .../filtering/plan-filter.component.scss | 13 +- .../plan-listing-item.component.scss | 29 +-- .../plan/listing/plan-listing.component.scss | 16 +- .../start-new-plan-dialog.component.scss | 2 +- .../plan-editor.component.scss | 8 +- .../plan-finalize-dialog.component.scss | 2 +- .../reference-field.component.scss | 2 +- .../sidebar-footer.component.css | 8 +- .../sidebar-footer.component.html | 6 +- .../src/app/ui/sidebar/sidebar.component.scss | 2 +- .../user-profile/user-profile.component.scss | 6 - frontend/src/assets/i18n/baq.json | 4 + frontend/src/assets/i18n/de.json | 4 + frontend/src/assets/i18n/en.json | 4 + frontend/src/assets/i18n/es.json | 4 + frontend/src/assets/i18n/gr.json | 4 + frontend/src/assets/i18n/hr.json | 4 + frontend/src/assets/i18n/pl.json | 4 + frontend/src/assets/i18n/pt.json | 4 + frontend/src/assets/i18n/sk.json | 4 + frontend/src/assets/i18n/sr.json | 4 + frontend/src/assets/i18n/tr.json | 4 + frontend/src/assets/scss/core/_misc.scss | 12 +- frontend/src/assets/scss/core/_variables.scss | 2 +- ...rm-validation-errors-dialog.component.scss | 2 +- ...otification-template-editor.component.scss | 11 +- frontend/src/styles.scss | 217 ++++++++++-------- 48 files changed, 276 insertions(+), 309 deletions(-) diff --git a/frontend/src/app/core/services/tenant/tenant-handling.service.ts b/frontend/src/app/core/services/tenant/tenant-handling.service.ts index dffd84ff3..e5dff09ab 100644 --- a/frontend/src/app/core/services/tenant/tenant-handling.service.ts +++ b/frontend/src/app/core/services/tenant/tenant-handling.service.ts @@ -84,8 +84,8 @@ export class TenantHandlingService extends BaseService { if (cssColors) { if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor); - 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.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')); diff --git a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss index 44417366d..5a30a7324 100644 --- a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss +++ b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss @@ -12,7 +12,7 @@ } ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); + background-color: var(--primary-color); } ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss index 0251f5a28..b648059c0 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss @@ -26,7 +26,7 @@ } ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); + background-color: var(--primary-color); } ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { diff --git a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss index f192e16a6..c67f75a2d 100644 --- a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss +++ b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss @@ -11,14 +11,6 @@ } } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; -} - ::ng-deep .mdc-form-field { label { margin: 0; diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss index cf8c26656..b3425d986 100644 --- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss +++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss @@ -7,18 +7,10 @@ .add { background-color: white; - color: #009700; + color: #009700; //todo mchouliara } } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; -} - .dlt-section-btn { margin: 0; diff --git a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss index 84d122035..8b08c387c 100644 --- a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss +++ b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss @@ -9,12 +9,4 @@ background-color: white; color: #009700; } -} - -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html index a5e2d3913..ed995e3f8 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html @@ -17,33 +17,7 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-2' | translate}} - - - {{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-3' | translate}} - - - {{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + + + info + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR' | translate}} + + + + {{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + + + + info + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.DRAFT-STATUS-COLOR' | translate}} + + + + {{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}} + + + info + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.INVERTED-BUTTON-COLOR' | translate}} + span { line-height: 2em; } -.about-item { - display: flex; - flex-wrap: wrap; -} .links :hover { - color: var(--primary-color-3); + color: var(--primary-color); } -.about-item .length { - color: var(--primary-color-3); -} - -.about-item .title { - margin: 2px 10px; -} - -.about-item p { - margin-left: auto; - margin-bottom: 0px; - padding-top: 7px; - color: var(--gray); -} p { color: #333333; } -.storage :hover { - color: var(--primary-color-3); -} .draft-bookmark { color: #e7e6e6; @@ -160,7 +121,7 @@ input[type="text"] { font-size: 1rem; padding-top: 0.75rem; padding-bottom: 0.55rem; - color: #f16868; + color: var(--draft-color); } .icon-align { @@ -222,7 +183,7 @@ input[type="text"] { .draft { - color: #f16868; + color: var(--draft-color); } .pointer { diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss index bb119f48c..33fa40dd8 100644 --- a/frontend/src/app/ui/description/overview/description-overview.component.scss +++ b/frontend/src/app/ui/description/overview/description-overview.component.scss @@ -183,7 +183,6 @@ .plan-btn-label { margin-right: 1em; color: var(--primary-text); - opacity: 0.8; text-align: left; min-width: 0; text-wrap: nowrap; diff --git a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html index a71b43cd4..21b2ebd15 100644 --- a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html +++ b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html @@ -7,7 +7,7 @@
- + {{ item.title | translate:item.translateParams }} diff --git a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss index 71c6a0de2..0950f80d2 100644 --- a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss +++ b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss @@ -4,7 +4,7 @@ } .text-black{ - color: #000; + color: #000000; } .mat-icon{ diff --git a/frontend/src/app/ui/navbar/navbar.component.scss b/frontend/src/app/ui/navbar/navbar.component.scss index d4f731a9a..d18c6073d 100644 --- a/frontend/src/app/ui/navbar/navbar.component.scss +++ b/frontend/src/app/ui/navbar/navbar.component.scss @@ -45,6 +45,8 @@ $mat-card-header-size: 40px !default; top: 0; left: 0; right: 0; + + padding: 0.625rem 0; } .logo { @@ -72,7 +74,7 @@ $mat-card-header-size: 40px !default; .faq-title:hover, .lang:hover { - color: var(--primary-color-2) !important; + color: var(--primary-color) !important; } .lang { diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss index e13c3977b..652e3b2b9 100644 --- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss +++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss @@ -39,12 +39,11 @@ font-weight: 400; } -.filters { -} + .filters-title { width: 93px; - color: var(--primary-color-2); + color: var(--primary-color); background-color: white; padding: 0px 20px; margin-top: -10px; @@ -60,14 +59,6 @@ border: 1px solid var(--light-gray); } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, -.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, -.mat-accent .mat-pseudo-checkbox-checked, -.mat-accent .mat-pseudo-checkbox-indeterminate, -.mat-pseudo-checkbox-checked, -.mat-pseudo-checkbox-indeterminate { - background-color: var(--primary-color-3); -} ::ng-deep .mat-ripple-element { background-color: #2e74b649 !important; diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss index b66134433..8f47caaf2 100644 --- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss +++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss @@ -3,23 +3,6 @@ color: var(--gray); } -.container-header { - display: flex; - align-items: baseline; - margin-top: 0px; - text-transform: uppercase; -} - -.container-header p { - letter-spacing: 5px; - color: var(--gray); - margin-bottom: 0px; -} - -.container-header :hover { - color: var(--primary-color-3); -} - h4 { display: inline; padding-left: 1em; @@ -36,14 +19,6 @@ h4 > span { flex-wrap: wrap; } -.descriptions-counter { - display: flex; -} - -.descriptions-counter :hover { - color: var(--primary-color-3) !important; -} - .about-item .title { margin: 2px 10px; text-transform: uppercase; @@ -180,7 +155,7 @@ input[type="text"] { font-size: 1rem; padding-top: 0.75rem; padding-bottom: 0.55rem; - color: #f16868; + color: var(--draft-color); } .icon-align { @@ -242,7 +217,7 @@ input[type="text"] { .draft { - color: #f16868; + color: var(--draft-color); } .pointer { diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss index 12d14338f..8919db351 100644 --- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss +++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss @@ -57,7 +57,7 @@ } .more-icon :hover { - color: var(--primary-color-3); + color: var(--primary-color); } .header-title { @@ -160,7 +160,7 @@ .filter-btn button { color: white; - background-color: var(--primary-color-2); + background-color: var(--primary-color); width: 37px; height: 45px; } @@ -190,7 +190,7 @@ .pointer:hover, .zenodo-link:hover { - color: var(--primary-color-3); + color: var(--primary-color); } ::ng-deep .search-form .mat-form-field-wrapper { @@ -211,7 +211,10 @@ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02rem; - color: #2d72d6; + color: var(--link-color); + &:hover { + color: var(--primary-color) + } cursor: pointer; } @@ -224,6 +227,9 @@ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02rem; - color: #2d72d6; + color: var(--link-color); + &:hover { + color: var(--primary-color) + } cursor: pointer; } \ No newline at end of file diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss index 3b9ed079e..c01e124ec 100644 --- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss +++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss @@ -58,5 +58,5 @@ } .warn { - color: #f16868; + color: var(--warning-color); } diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss index 882b976c8..b58272ca8 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss @@ -139,11 +139,11 @@ mat-icon.size-16 { } .remove-description { - color: #f16868; + color: var(--draft-color); } .remove-description:hover { - color: #f16868; + color: var(--draft-color); } .stepper-actions { @@ -238,7 +238,7 @@ a { } a:hover { - color: var(--primary-color-3); + color: var(--primary-color); } .main-content { @@ -331,7 +331,7 @@ a:hover { } .input-btn :hover { - color: var(--primary-color-3) !important; + color: var(--primary-color) !important; } } diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss index f9f3f971f..a087db7f8 100644 --- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss +++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss @@ -64,7 +64,7 @@ } .descriptions span { - color: var(--primary-color-3); + color: var(--primary-color); } .emptyList { diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss index d761df787..8efe7e591 100644 --- a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss +++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss @@ -1,6 +1,6 @@ .insert-manually { text-decoration: underline; - color: var(--primary-color-3); + color: var(--primary-color); cursor: pointer; font-weight: 400; } diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css index f7e3dd68c..bdedcb6c2 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css +++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css @@ -16,11 +16,13 @@ } .sidebar-footer .option:hover { - color: var(--primary-color-3); + background-color: #ececec; + border-radius: 6px; } .sidebar-footer .option:focus { - color: var(--primary-color-3); + background-color: #ececec; + border-radius: 6px; } .sidebar-footer .vl { @@ -29,5 +31,5 @@ } .option-active { - color: var(--primary-color-3) !important; + color: var(--primary-color); } diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html index 969438a58..b88c0e8c6 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html @@ -2,8 +2,10 @@ @for(footerItems of nestedFooterItems; track footerItems){ diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss index 276ae3af9..660f32495 100644 --- a/frontend/src/app/ui/sidebar/sidebar.component.scss +++ b/frontend/src/app/ui/sidebar/sidebar.component.scss @@ -117,7 +117,7 @@ $mat-card-header-size: 30px !default; } .active a i { - color: var(--primary-color-2); + color: var(--primary-color); } .inner-line { diff --git a/frontend/src/app/ui/user-profile/user-profile.component.scss b/frontend/src/app/ui/user-profile/user-profile.component.scss index 9d5020e6a..20ccf925e 100644 --- a/frontend/src/app/ui/user-profile/user-profile.component.scss +++ b/frontend/src/app/ui/user-profile/user-profile.component.scss @@ -4,12 +4,6 @@ background-color: #ffffff; } -.clickable { - cursor: pointer; -} -.clickable:hover { - color: var(--primary-color-3) !important; -} .user-profile { .profile-card-center-row { justify-content: center; diff --git a/frontend/src/assets/i18n/baq.json b/frontend/src/assets/i18n/baq.json index ee0e5f76e..65c2444fa 100644 --- a/frontend/src/assets/i18n/baq.json +++ b/frontend/src/assets/i18n/baq.json @@ -470,6 +470,10 @@ "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", diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json index 797d39c8f..a574e9dd0 100644 --- a/frontend/src/assets/i18n/de.json +++ b/frontend/src/assets/i18n/de.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 5073128e0..9525da827 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -479,6 +479,10 @@ "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", diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json index 029d74168..91c206ab0 100644 --- a/frontend/src/assets/i18n/es.json +++ b/frontend/src/assets/i18n/es.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/gr.json b/frontend/src/assets/i18n/gr.json index 8d1f81d4e..bcac119d7 100644 --- a/frontend/src/assets/i18n/gr.json +++ b/frontend/src/assets/i18n/gr.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/hr.json b/frontend/src/assets/i18n/hr.json index 503819bdb..8b31e4ff9 100644 --- a/frontend/src/assets/i18n/hr.json +++ b/frontend/src/assets/i18n/hr.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json index e7bf966fa..d59084a08 100644 --- a/frontend/src/assets/i18n/pl.json +++ b/frontend/src/assets/i18n/pl.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/pt.json b/frontend/src/assets/i18n/pt.json index 10842a368..a38506d35 100644 --- a/frontend/src/assets/i18n/pt.json +++ b/frontend/src/assets/i18n/pt.json @@ -472,6 +472,10 @@ "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", diff --git a/frontend/src/assets/i18n/sk.json b/frontend/src/assets/i18n/sk.json index f728c0507..515249632 100644 --- a/frontend/src/assets/i18n/sk.json +++ b/frontend/src/assets/i18n/sk.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/sr.json b/frontend/src/assets/i18n/sr.json index 2377d0be3..cfb479c41 100644 --- a/frontend/src/assets/i18n/sr.json +++ b/frontend/src/assets/i18n/sr.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/i18n/tr.json b/frontend/src/assets/i18n/tr.json index 646bae7bc..9e39c914c 100644 --- a/frontend/src/assets/i18n/tr.json +++ b/frontend/src/assets/i18n/tr.json @@ -473,6 +473,10 @@ "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", diff --git a/frontend/src/assets/scss/core/_misc.scss b/frontend/src/assets/scss/core/_misc.scss index f89b34924..f8dcce7c5 100644 --- a/frontend/src/assets/scss/core/_misc.scss +++ b/frontend/src/assets/scss/core/_misc.scss @@ -22,12 +22,12 @@ legend { } a{ - color: $link-color; - &:hover, - &:focus{ - color: darken($link-color, 5%); - text-decoration: none; - } +// color: $link-color; +// &:hover, +// &:focus{ +// color: darken($link-color, 5%); +// text-decoration: none; +// } &.text-info{ &:hover, &:focus{ diff --git a/frontend/src/assets/scss/core/_variables.scss b/frontend/src/assets/scss/core/_variables.scss index defd1563a..433cf9b3c 100644 --- a/frontend/src/assets/scss/core/_variables.scss +++ b/frontend/src/assets/scss/core/_variables.scss @@ -1,4 +1,4 @@ -@import "variables/colors"; +@import "variables/colors"; //mchouliara todo check if we can remove @import "variables/shadow"; @import "variables/bootstrap-material-design-base"; diff --git a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss index 281bf5b33..d61ed0b6c 100644 --- a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss +++ b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss @@ -36,7 +36,7 @@ font-weight: 500; font-size: 1.25rem; letter-spacing: 0px; - color: #f16868; + color: var(--warning-color); opacity: 1; } diff --git a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.scss b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.scss index 4e3acdefe..cfc45c667 100644 --- a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.scss +++ b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.scss @@ -7,15 +7,8 @@ .add { background-color: white; - color: #009700; + color: #009700; //todo mchouliara } } - - ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); - } - - ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; - } + diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 032f4cf17..b5920bdaa 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,17 +1,38 @@ @use '@angular/material'as mat; + +// @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; +// @import "src/assets/scss/material-dashboard.scss"; + + +//Material-Bootstrap configuration +@import "assets/scss/bootstrap-material"; +@import "/node_modules/bootstrap/scss/bootstrap"; + +// @import "@covalent/core/theming/all-theme"; +// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming'; +@import '../node_modules/@swimlane/ngx-datatable/index.css'; +@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss'; +@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css'; + + +// 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(); + :root { --primary-color: #18488F; - --primary-color-2: #1E59B1; - --primary-color-3: #246AD3; + --link-color: #1E59B1; + --draft-color: #f16868; --secondary-color: #36900B; - --warning-color: #f44336; --primary-text: #ffffff; --secondary-text: #000000; --inverted-btn-color: #ffffff; + + --warning-color: #f44336; --gray: #707070; //previously #848484 --light-gray: #aaaaaa; --dark-gray: #212121; @@ -78,9 +99,9 @@ $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-ser // $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), ); + + $mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;', - $subtitle-1: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), - $subtitle-2: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), @@ -133,18 +154,16 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme } -// @import "@covalent/core/theming/all-theme"; -// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming'; -@import '../node_modules/@swimlane/ngx-datatable/index.css'; -@import '../node_modules/@swimlane/ngx-datatable/themes/material.scss'; -@import '../node_modules/@swimlane/ngx-datatable/assets/icons.css'; - -//Material-Bootstrap configuration -@import "assets/scss/bootstrap-material"; - -// Guided Tour style -@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss'; - +a { + color: var(--link-color); + &:hover { + color: var(--primary-color); + text-decoration: unset; + } + &.color-unset { + color: #000000; + } +} .required-text { font-size: 13px; @@ -183,7 +202,7 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme } .cc-btn { - background-color: var(--primary-color-3) !important; + background-color: var(--primary-color) !important; } .snackbar-warning { @@ -201,93 +220,93 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme color: #111010; } -.listing-item { - margin-top: 0.5em; - padding: 0.5em; - cursor: pointer; - border: 3px solid #f2f2f2; +// .listing-item { +// margin-top: 0.5em; +// padding: 0.5em; +// cursor: pointer; +// border: 3px solid #f2f2f2; - .title { - color: black; - } +// .title { +// color: black; +// } - .grant-title { - color: rgb(93, 125, 173); - } +// .grant-title { +// color: rgb(93, 125, 173); +// } - .gray-icon { - color: rgb(191, 191, 191); - } +// .gray-icon { +// color: rgb(191, 191, 191); +// } - .chip { - padding: 0.1em 1em; - border-radius: 10em; - background-color: #0d7489; - color: #fff; - text-transform: uppercase; - font-weight: 500; - max-width: 160px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +// .chip { +// padding: 0.1em 1em; +// border-radius: 10em; +// background-color: #0d7489; +// color: #fff; +// text-transform: uppercase; +// font-weight: 500; +// max-width: 160px; +// white-space: nowrap; +// overflow: hidden; +// text-overflow: ellipsis; +// } - .bordered-chip { - padding: 0.1em 1em; - border: 0.1em solid rgb(218, 227, 243); - border-radius: 10em; - background-color: rgb(236, 241, 249); - color: var(--primary-color); - text-transform: uppercase; - font-weight: 500; - max-width: 160px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +// .bordered-chip { +// padding: 0.1em 1em; +// border: 0.1em solid rgb(218, 227, 243); +// border-radius: 10em; +// background-color: rgb(236, 241, 249); +// color: var(--primary-color); +// text-transform: uppercase; +// font-weight: 500; +// max-width: 160px; +// white-space: nowrap; +// overflow: hidden; +// text-overflow: ellipsis; +// } - .squared-chip { - padding: 0.1em 1em; - border: 0.1em solid rgb(236, 241, 249); - border-radius: 0.5em; - background-color: rgb(246, 246, 246); - color: rgb(127, 127, 127); - max-width: 160px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } +// .squared-chip { +// padding: 0.1em 1em; +// border: 0.1em solid rgb(236, 241, 249); +// border-radius: 0.5em; +// background-color: rgb(246, 246, 246); +// color: rgb(127, 127, 127); +// max-width: 160px; +// white-space: nowrap; +// overflow: hidden; +// text-overflow: ellipsis; +// } - mat-icon { - width: auto; - height: auto; - } +// mat-icon { +// width: auto; +// height: auto; +// } - .mr-5 { - margin-right: 2rem !important; - } +// .mr-5 { +// margin-right: 2rem !important; +// } - .info { - background-color: #f6f6f6; - padding: 8px 15px; - margin-bottom: 15px; - } +// .info { +// background-color: #f6f6f6; +// padding: 8px 15px; +// margin-bottom: 15px; +// } - .info p { - margin-bottom: 0px; - color: rgb(37, 35, 140); - font-weight: 600; - } +// .info p { +// margin-bottom: 0px; +// color: rgb(37, 35, 140); +// font-weight: 600; +// } - .chip p { - margin-bottom: 0px; - } +// .chip p { +// margin-bottom: 0px; +// } - h4 span { - color: #089dbb; - font-weight: 600; - } -} +// h4 span { +// color: #089dbb; +// font-weight: 600; +// } +// } .listing { .mat-card { @@ -300,10 +319,10 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme } } -.gray-container { - background: linear-gradient(180deg, #f6f6f6, #fff); - margin: 5px 0px; -} +// .gray-container { +// background: linear-gradient(180deg, #f6f6f6, #fff); +// margin: 5px 0px; +// } .main-content { background-color: #f5f5f5; @@ -488,7 +507,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ background: var(--inverted-btn-color); &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{ color: var(--primary-color); - opacity: 0.7; + opacity: 0.5; } &.primary-inverted-hover:hover { background-color: var(--primary-color); @@ -686,4 +705,4 @@ ul.unstyled-list { // } // .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { // background-color: #b0b0b0; -// } \ No newline at end of file +// } //make them work \ No newline at end of file