From 04ce5d166545829baf570c1f3c061cda351b31c3 Mon Sep 17 00:00:00 2001 From: mchouliara Date: Mon, 23 Sep 2024 11:41:08 +0300 Subject: [PATCH] cohesive gray text color throughout app > change from #848484 and #aaaaa to #757575, keep #aaaa borders/backgrounds --- .../user-invite-to-tenant-dialog.component.scss | 2 +- .../app/ui/dashboard/dashboard.component.scss | 4 ++-- .../recent-edited-activity.component.scss | 6 +++--- ...description-base-fields-editor.component.scss | 2 +- .../editor/description-editor.component.scss | 4 ++-- .../description-listing-item.component.scss | 12 ++++++------ .../overview/description-overview.component.scss | 2 +- .../dialog/plan-invitation-dialog.component.scss | 2 +- .../plan-listing-item.component.scss | 16 ++++++++-------- .../ui/plan/listing/plan-listing.component.scss | 2 +- .../plan/overview/plan-overview.component.scss | 4 ++-- .../plan-editor.component.scss | 2 +- frontend/src/styles.scss | 3 ++- 13 files changed, 31 insertions(+), 30 deletions(-) diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss index a2b4488c7..1bd8b81b9 100644 --- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss +++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss @@ -45,7 +45,7 @@ .select-role { width: 50% !important; font-size: 14px; - color: #848484; + color: var(--gray-text); height: min-content; margin-right: 2rem; border: none; diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss index 4e713f5c9..ce63b4652 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.scss +++ b/frontend/src/app/ui/dashboard/dashboard.component.scss @@ -218,12 +218,12 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray-text); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray-text) !important; text-decoration: none !important; } diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss index 4c2916502..bc7a87659 100644 --- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss +++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss @@ -34,7 +34,7 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray-text); } .description-card-actions, @@ -43,12 +43,12 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray-text); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray-text) !important; text-decoration: none !important; } diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss index 3541ff08c..fb703da1e 100644 --- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss +++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss @@ -44,7 +44,7 @@ .input-btn { border: none; - color: #aaaaaa; + color: var(--gray-text); background-color: #ffffff00; cursor: pointer; } diff --git a/frontend/src/app/ui/description/editor/description-editor.component.scss b/frontend/src/app/ui/description/editor/description-editor.component.scss index 24d413573..7a19c5ac5 100644 --- a/frontend/src/app/ui/description/editor/description-editor.component.scss +++ b/frontend/src/app/ui/description/editor/description-editor.component.scss @@ -75,7 +75,7 @@ .more-horiz { font-size: 28px; - color: #aaaaaa; + color: var(--gray-text); } .more-icon :hover { @@ -224,7 +224,7 @@ padding-left: 0.5rem; font-size: 0.875rem; letter-spacing: 0px; - color: #848484; + color: var(--gray-text); opacity: 1; } diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss index 04ff15e0e..1d8a2408b 100644 --- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss +++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss @@ -1,6 +1,6 @@ .gray-container { letter-spacing: 5px; - color: #aaaaaa; + color: var(--gray-text); } .container-header { @@ -12,7 +12,7 @@ .container-header p { letter-spacing: 5px; - color: #aaaaaa; + color: var(--gray-text); padding-top: 10px; margin-bottom: 0px; } @@ -57,7 +57,7 @@ h4 > span { margin-left: auto; margin-bottom: 0px; padding-top: 7px; - color: #aaaaaa; + color: var(--gray-text); } p { @@ -151,7 +151,7 @@ input[type="text"] { font-size: 0.875rem; opacity: 1; align-items: center; - color: #848484; + color: var(--gray-text); } .description-title-draft { @@ -185,12 +185,12 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray-text); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray-text) !important; text-decoration: none !important; } 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 e5dc860e5..b50c3dd15 100644 --- a/frontend/src/app/ui/description/overview/description-overview.component.scss +++ b/frontend/src/app/ui/description/overview/description-overview.component.scss @@ -139,7 +139,7 @@ .label-txt, .label2-txt { - color: #848484; + color: var(--gray-text); font-weight: 400; } diff --git a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss index 17143f8ea..fa7274e68 100644 --- a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss +++ b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss @@ -45,7 +45,7 @@ .select-role { width: 50% !important; font-size: 14px; - color: #848484; + color: var(--gray-text); height: min-content; margin-right: 2rem; border: none; 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 1563f434c..678ce7d7d 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 @@ -1,6 +1,6 @@ .gray-container { letter-spacing: 5px; - color: #aaaaaa; + color: var(--gray-text); } .container-header { @@ -12,7 +12,7 @@ .container-header p { letter-spacing: 5px; - color: #aaaaaa; + color: var(--gray-text); margin-bottom: 0px; } @@ -53,7 +53,7 @@ h4 > span { margin-left: auto; margin-bottom: 0px; padding-top: 7px; - color: #aaaaaa; + color: var(--gray-text); } p { @@ -61,7 +61,7 @@ p { } .draft-icon { - color: #aaaaaa; + color: var(--gray-text); } .lock-icon { @@ -70,7 +70,7 @@ p { .more-horiz { font-size: 28px; - color: #aaaaaa; + color: var(--gray-text); } .published-icon { @@ -170,7 +170,7 @@ input[type="text"] { font-size: 0.875rem; opacity: 1; align-items: center; - color: #848484; + color: var(--gray-text); } .plan-title-draft, @@ -205,12 +205,12 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray-text); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray-text) !important; text-decoration: none !important; } 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 be7d785fa..1a774e5b7 100644 --- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss +++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss @@ -53,7 +53,7 @@ .more-horiz { font-size: 28px; - color: #aaaaaa; + color: var(--gray-text); } .more-icon :hover { diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss index d1935b8e9..563f40107 100644 --- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss +++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss @@ -123,7 +123,7 @@ .label-txt, .label2-txt { - color: #848484; + color: var(--gray-text); font-weight: 400; } @@ -268,7 +268,7 @@ } ::ng-deep .mat-select-value { - color: #848484 !important; + color: var(--gray-text) !important; } .versions-select { 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 9d3c5b547..bea4b2dff 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 @@ -341,7 +341,7 @@ a:hover { .input-btn { border: none; - color: #aaaaaa; + color: var(--gray-text); background-color: #ffffff00; cursor: pointer; } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index ce335e201..988337832 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -10,7 +10,8 @@ --secondary-color: #36900B; --warning-color: #f44336; --primary-text: #ffffff; - --secondary-text: #000000 + --secondary-text: #000000; + --gray-text: #757575; //previously #848484 } // Define your theme with color palettes, typography and density