From 3f601a7f20edb8b9b64f14a8f42a51063c8c3c81 Mon Sep 17 00:00:00 2001 From: Maksym Mykhailenko Date: Fri, 26 Oct 2018 11:29:05 +0800 Subject: [PATCH 1/3] issue #2632 - removed variable definitions from connect-app. Updated $tc-heading* varIables usage with a new scale --- src/components/Home/Home.scss | 2 +- src/components/Modal/Modal.scss | 1 - src/components/PanelProject/PanelProject.scss | 2 +- .../TeamManagement/TeamManagement.scss | 2 -- src/components/TopBar/ProjectsToolBar.scss | 3 +-- .../projectsCard/ProjectCardHeader.scss | 2 +- .../FeatureSelector/FeaturePicker.scss | 2 +- .../ProjectsToolBar/ProjectsToolBar.scss | 2 +- .../list/components/Walkthrough/Walkthrough.scss | 2 +- .../settings/components/SettingsPanel.scss | 2 +- src/styles/_variables.scss | 16 ---------------- 11 files changed, 8 insertions(+), 28 deletions(-) diff --git a/src/components/Home/Home.scss b/src/components/Home/Home.scss index 1b89515ea..aa372888b 100644 --- a/src/components/Home/Home.scss +++ b/src/components/Home/Home.scss @@ -110,7 +110,7 @@ p { @include roboto; - font-size: $tc-body-large; + font-size: $tc-body-lg; color: $tc-gray-70; letter-spacing: 0; line-height: $base-unit * 6; diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss index 6e21c7ae7..2862e21bb 100644 --- a/src/components/Modal/Modal.scss +++ b/src/components/Modal/Modal.scss @@ -15,7 +15,6 @@ height: 15px; top: $base-unit*3; right: $base-unit*3; - background-size: $tc-heading-extra-small; } .modal-title { diff --git a/src/components/PanelProject/PanelProject.scss b/src/components/PanelProject/PanelProject.scss index 05c049a5b..d602df602 100644 --- a/src/components/PanelProject/PanelProject.scss +++ b/src/components/PanelProject/PanelProject.scss @@ -7,7 +7,7 @@ .project-heading { @include roboto-medium; - font-size: $tc-heading; + font-size: $tc-heading-sm; color: $tc-black; line-height: $base-unit*6; .text-muted { diff --git a/src/components/TeamManagement/TeamManagement.scss b/src/components/TeamManagement/TeamManagement.scss index e53979ef0..556b8247d 100644 --- a/src/components/TeamManagement/TeamManagement.scss +++ b/src/components/TeamManagement/TeamManagement.scss @@ -3,7 +3,6 @@ // TODO where do we add these :global { - $tc-heading-extra-small: 14px; $tc-body-small: 14px; $tc-body-extra-small: 12px; @@ -191,7 +190,6 @@ position: absolute; top: $base-unit*3; right: $base-unit*3; - background-size: $tc-heading-extra-small; overflow: hidden; } diff --git a/src/components/TopBar/ProjectsToolBar.scss b/src/components/TopBar/ProjectsToolBar.scss index d0a2f40ea..844cd98a1 100644 --- a/src/components/TopBar/ProjectsToolBar.scss +++ b/src/components/TopBar/ProjectsToolBar.scss @@ -5,7 +5,6 @@ // TODO: move to includes $tc-rgba-10: rgba($tc-gray-80, 0.38); $tc-rgba-20: rgba($tc-black, 0.17); - $tc-body-large: 20px; .ProjectsToolBar { margin: 0 auto; @@ -297,7 +296,7 @@ } h2 { - font-size: $tc-body-large; + font-size: $tc-body-lg; color: $tc-black; white-space: nowrap; diff --git a/src/projects/components/projectsCard/ProjectCardHeader.scss b/src/projects/components/projectsCard/ProjectCardHeader.scss index 6a8bf4a97..285bc6931 100644 --- a/src/projects/components/projectsCard/ProjectCardHeader.scss +++ b/src/projects/components/projectsCard/ProjectCardHeader.scss @@ -23,7 +23,7 @@ .project-name { @include roboto-medium; - font-size: $tc-heading-sm; + font-size: $tc-heading-xs; line-height: $base-unit * 4; color: $tc-black; word-break: break-all; diff --git a/src/projects/detail/components/FeatureSelector/FeaturePicker.scss b/src/projects/detail/components/FeatureSelector/FeaturePicker.scss index dc2b071f9..7d9a5acb0 100644 --- a/src/projects/detail/components/FeatureSelector/FeaturePicker.scss +++ b/src/projects/detail/components/FeatureSelector/FeaturePicker.scss @@ -35,7 +35,7 @@ } > h2 { - font-size: $tc-heading-md; + font-size: $tc-heading-sm; background-color: $tc-gray-neutral-light; color: $tc-black; padding: 3 * $base_unit; diff --git a/src/projects/list/components/ProjectsToolBar/ProjectsToolBar.scss b/src/projects/list/components/ProjectsToolBar/ProjectsToolBar.scss index 8527f3b3d..d6ae3707e 100644 --- a/src/projects/list/components/ProjectsToolBar/ProjectsToolBar.scss +++ b/src/projects/list/components/ProjectsToolBar/ProjectsToolBar.scss @@ -16,7 +16,7 @@ z-index: 11; h2 { - font-size: $tc-body-large; + font-size: $tc-body-lg; line-height: 60px; color: $tc-black; width: 120px; diff --git a/src/projects/list/components/Walkthrough/Walkthrough.scss b/src/projects/list/components/Walkthrough/Walkthrough.scss index 93ca94595..59f79925d 100644 --- a/src/projects/list/components/Walkthrough/Walkthrough.scss +++ b/src/projects/list/components/Walkthrough/Walkthrough.scss @@ -142,7 +142,7 @@ h3{ @include roboto-medium; line-height:35px; - font-size: $tc-heading; + font-size: $tc-heading-sm; color: $tc-black; text-align:left; padding-bottom: 10px; diff --git a/src/routes/settings/components/SettingsPanel.scss b/src/routes/settings/components/SettingsPanel.scss index 61c0e2fe1..3a10f9c1e 100644 --- a/src/routes/settings/components/SettingsPanel.scss +++ b/src/routes/settings/components/SettingsPanel.scss @@ -24,7 +24,7 @@ > .title { @include roboto-light; - color: $tc-heading-lg; + color: $tc-heading-md; font-size: 32px; line-height: 30px; text-align: center; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 8ab241e08..a0a7fcd41 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,23 +1,7 @@ @import '~tc-ui/src/styles/tc-includes'; -// TODO: move to tc-includes - -$tc-body-large : 20px; -$tc-heading : 20px; -$tc-heading-extra-small : 14px; - // standard card border radius $card-border-radius : 6px; - -$gray-base : $tc-black !default; -$gray-darkest : lighten($gray-base, 3.5%); -$gray-darker : lighten($gray-base, 13.5%); -$gray-dark : lighten($gray-base, 20%); -$gray : lighten($gray-base, 33.5%); -$gray-light : lighten($gray-base, 46.7%); -$gray-lighter : lighten($gray-base, 93.5%); -$gray-lightest: lighten($gray-base, 97.5%); - // TODO: Add breakpoint to global styles $screen-rg: 992px; From 209f15f88ec2fa300769d432da1e383c15d990af Mon Sep 17 00:00:00 2001 From: Maksym Mykhailenko Date: Fri, 26 Oct 2018 11:45:18 +0800 Subject: [PATCH 2/3] issue #2632 - removed almost all variables defined in connect-app --- .../TeamManagement/TeamManagement.scss | 9 ++---- src/components/TopBar/ProjectsToolBar.scss | 6 +--- src/projects/detail/ProjectDetail.scss | 7 ++--- .../EditProjectForm/EditProjectForm.scss | 6 ++-- .../detail/components/ProjectSpecSidebar.scss | 15 ++-------- .../detail/components/SpecSection.scss | 30 +++++++++---------- 6 files changed, 24 insertions(+), 49 deletions(-) diff --git a/src/components/TeamManagement/TeamManagement.scss b/src/components/TeamManagement/TeamManagement.scss index 556b8247d..d86e1d09e 100644 --- a/src/components/TeamManagement/TeamManagement.scss +++ b/src/components/TeamManagement/TeamManagement.scss @@ -1,11 +1,6 @@ @import "~tc-ui/src/styles/tc-includes"; -// @import "../../styles/variables"; -// TODO where do we add these :global { - $tc-body-small: 14px; - $tc-body-extra-small: 12px; - @mixin icon($url) { background: url("../../assets/images/#{$url}") no-repeat; } @@ -329,7 +324,7 @@ margin: $base-unit*2 auto; @include roboto; color: $tc-gray-70; - font-size: $tc-body-small; + font-size: 14px; font-style: italic; border: 1px solid $tc-red-30; background: $tc-red-10; @@ -374,7 +369,7 @@ padding: 5px 0; text-align: center; @include roboto-medium; - font-size: $tc-body-extra-small; + font-size: $tc-label-sm; line-height: 18px; box-shadow: none; background-color: $tc-white; diff --git a/src/components/TopBar/ProjectsToolBar.scss b/src/components/TopBar/ProjectsToolBar.scss index 844cd98a1..688f07286 100644 --- a/src/components/TopBar/ProjectsToolBar.scss +++ b/src/components/TopBar/ProjectsToolBar.scss @@ -2,10 +2,6 @@ @import '~tc-ui/src/styles/tc-includes'; :global { - // TODO: move to includes - $tc-rgba-10: rgba($tc-gray-80, 0.38); - $tc-rgba-20: rgba($tc-black, 0.17); - .ProjectsToolBar { margin: 0 auto; width: 100%; @@ -241,7 +237,7 @@ &.active { background: $tc-gray-80; - box-shadow: inset 0px 1px 3px 0px $tc-rgba-10; + box-shadow: inset 0px 1px 3px 0px $tc-gray-80; svg.icon-search-filter g { fill: $tc-white; diff --git a/src/projects/detail/ProjectDetail.scss b/src/projects/detail/ProjectDetail.scss index 18710a6b1..943bde323 100644 --- a/src/projects/detail/ProjectDetail.scss +++ b/src/projects/detail/ProjectDetail.scss @@ -1,9 +1,6 @@ @import '~tc-ui/src/styles/tc-includes'; :global { - // FIXME: bad names for variables; - $gray-color: $tc-gray-50; - $title-color: $tc-gray-80; // FIXME: repeated mixin use! Use global @mixin flexBox { display: flex; @@ -46,7 +43,7 @@ @include flexWidth(2); border-radius: 4px; .title { - color: $title-color; + color: $tc-gray-80; @include roboto; } .right-area-item { @@ -61,7 +58,7 @@ .big-titles { @include roboto-light; font-size: 28px; - color: $gray-color; + color: $tc-gray-50; line-height: 30px; margin-bottom: 20px; } diff --git a/src/projects/detail/components/EditProjectForm/EditProjectForm.scss b/src/projects/detail/components/EditProjectForm/EditProjectForm.scss index 5def4813e..812bacb14 100644 --- a/src/projects/detail/components/EditProjectForm/EditProjectForm.scss +++ b/src/projects/detail/components/EditProjectForm/EditProjectForm.scss @@ -2,8 +2,6 @@ :global { //TODO Additional variables - need to find a home for these - $gray-color: $tc-gray-50; - $title-color: $tc-gray-80; $sideBarWidth: 280px; $sideBarMaxWidth: 360px; @@ -188,14 +186,14 @@ .optional { background: $tc-gray-10; - color: $gray-color; + color: $tc-gray-50; } } .gray-text { @include roboto; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; line-height: 25px; strong { diff --git a/src/projects/detail/components/ProjectSpecSidebar.scss b/src/projects/detail/components/ProjectSpecSidebar.scss index dddc5f0bb..2d90cefa0 100644 --- a/src/projects/detail/components/ProjectSpecSidebar.scss +++ b/src/projects/detail/components/ProjectSpecSidebar.scss @@ -1,17 +1,8 @@ @import '~tc-ui/src/styles/tc-includes'; :global { - //TODO Additional variables - need to find a home for these - // FIXME: remove non-standard variables! Deep nesting, non-standard line-height; + // FIXME: Deep nesting, non-standard line-height; // FIXME: non-standard units (use $base-unit and $corner-radius) - $gray-color: $tc-gray-50; - $title-color: $tc-gray-80; - $hr-color-base: $tc-black; - $hr-color-darker: lighten($hr-color-base, 13.5%); - $hr-color-dark: lighten($hr-color-base, 20%); - $hr-color: lighten($hr-color-base, 33.5%); - $hr-color-light: lighten($hr-color-base, 46.7%); - $hr-color-lighter: lighten($hr-color-base, 93.5%); .projectSpecSidebar { padding: 20px 0; @@ -79,7 +70,7 @@ display: block; height: 1px; border: 0; - border-top: 1px solid $hr-color-lighter; + border-top: 1px solid $tc-gray-30; margin: 1em 0; padding: 0; @@ -92,7 +83,7 @@ @include roboto; font-size: 13px; line-height: 25px; - color: $gray-color; + color: $tc-gray-50; } } diff --git a/src/projects/detail/components/SpecSection.scss b/src/projects/detail/components/SpecSection.scss index e0a5c4693..ed1fc4bde 100644 --- a/src/projects/detail/components/SpecSection.scss +++ b/src/projects/detail/components/SpecSection.scss @@ -2,8 +2,6 @@ :global { //TODO Additional variables - need to find a home for these - $gray-color: $tc-gray-50; - $title-color: $tc-gray-80; $sideBarWidth: 280px; $sideBarMaxWidth: 360px; @@ -282,7 +280,7 @@ .titles { @include roboto-medium; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; line-height: 20px; margin-bottom: 2px; } @@ -330,7 +328,7 @@ .txt { @include roboto; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; letter-spacing: 0px; line-height: 20px; } @@ -413,7 +411,7 @@ .file-name { @include roboto-bold; font-size: 15px; - color: $title-color; + color: $tc-gray-80; letter-spacing: 0px; line-height: 20px; padding-left: 7px; @@ -422,7 +420,7 @@ .upload-status { @include roboto; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; // letter-spacing: 0px; line-height: 20px; float: right; @@ -458,7 +456,7 @@ .file-list-bottom { .txt { - color: $title-color; + color: $tc-gray-80; @include roboto-bold; } padding: 20px 0; @@ -475,7 +473,7 @@ text-align: left; @include roboto-bold; font-size: 15px; - color: $title-color; + color: $tc-gray-80; line-height: 25px; } @@ -524,7 +522,7 @@ line-height: 18px; padding: 10px 0; @include roboto-bold; - color: $title-color; + color: $tc-gray-80; } } @@ -838,7 +836,7 @@ .titles { @include roboto-medium; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; line-height: 20px; margin-bottom: 2px; } @@ -886,7 +884,7 @@ .txt { @include roboto; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; letter-spacing: 0px; line-height: 20px; } @@ -969,7 +967,7 @@ .file-name { @include roboto-bold; font-size: 15px; - color: $title-color; + color: $tc-gray-80; letter-spacing: 0px; line-height: 20px; padding-left: 7px; @@ -978,7 +976,7 @@ .upload-status { @include roboto; font-size: 15px; - color: $gray-color; + color: $tc-gray-50; // letter-spacing: 0px; line-height: 20px; float: right; @@ -1014,7 +1012,7 @@ .file-list-bottom { .txt { - color: $title-color; + color: $tc-gray-80; @include roboto-bold; } padding: 20px 0; @@ -1031,7 +1029,7 @@ text-align: left; @include roboto-bold; font-size: 15px; - color: $title-color; + color: $tc-gray-80; line-height: 25px; } @@ -1080,7 +1078,7 @@ line-height: 18px; padding: 10px 0; @include roboto-bold; - color: $title-color; + color: $tc-gray-80; } } From 95b5fd8d50add5c23de17e7ab59554ae594b7183 Mon Sep 17 00:00:00 2001 From: Maksym Mykhailenko Date: Fri, 26 Oct 2018 12:02:42 +0800 Subject: [PATCH 3/3] issue #2632 - replaced almost all hardcoded colours with color variables --- src/components/Feed/NewPostMobile.scss | 2 +- src/components/LinksMenu/LinksMenu.scss | 2 +- src/components/Select/Select.scss | 6 +++--- src/projects/create/components/ProjectSubmitted.scss | 8 ++++---- .../ReviewProjectButton/ReviewProjectButton.scss | 2 +- .../detail/components/timeline/Milestone/Milestone.scss | 2 +- .../timeline/TimelineHeader/TimelineHeader.scss | 2 +- .../MilestoneTypeAddLinks/MilestoneTypeAddLinks.scss | 4 ++-- .../MilestoneTypeCheckpointReview.scss | 4 ++-- .../MilestoneTypeFinalDesigns.scss | 4 ++-- .../list/components/Projects/ProjectsGridView.scss | 2 +- src/projects/list/components/Walkthrough/Walkthrough.scss | 2 +- src/styles/vendors/s-alert-default.scss | 4 ++-- 13 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/Feed/NewPostMobile.scss b/src/components/Feed/NewPostMobile.scss index 0ac8d819f..bc6d45d3d 100644 --- a/src/components/Feed/NewPostMobile.scss +++ b/src/components/Feed/NewPostMobile.scss @@ -22,7 +22,7 @@ display: flex; justify-content: flex-end; > svg { - fill: #FAFAFB; + fill: $tc-gray-neutral-light; } } diff --git a/src/components/LinksMenu/LinksMenu.scss b/src/components/LinksMenu/LinksMenu.scss index a5405b248..cebaeb9b9 100644 --- a/src/components/LinksMenu/LinksMenu.scss +++ b/src/components/LinksMenu/LinksMenu.scss @@ -58,7 +58,7 @@ margin-left: auto; button { padding: 0; - background: rgba(0, 0, 0, 0); + background: transparent; } } a { diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index d1074bf38..9ae8c800e 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -54,15 +54,15 @@ } .Select-item-icon { - color:rgb(153, 153, 153); - border-right-color: rgb(220, 220, 224); + color:$tc-gray-40; + border-right-color: $tc-gray-10; padding: 0 5px 1px; &:active, &:focus, &:hover { background-color: transparent; - color: rgb(208, 2, 27); + color: $tc-red-110; } } diff --git a/src/projects/create/components/ProjectSubmitted.scss b/src/projects/create/components/ProjectSubmitted.scss index 897feea29..9f83f2b13 100644 --- a/src/projects/create/components/ProjectSubmitted.scss +++ b/src/projects/create/components/ProjectSubmitted.scss @@ -9,7 +9,7 @@ width: 90%; .title { - color: #1E1E1F; + color: $tc-gray-100; font-size: 32px; font-weight: 300; line-height: 35px; @@ -21,7 +21,7 @@ } .sub-title { - color: #85807C; + color: $tc-gray-50; font-size: 12px; font-weight: 400; line-height: 20px; @@ -30,7 +30,7 @@ } .content { - color: #151516; + color: $tc-gray-100; font-size: 15px; font-weight: 400; margin-top: 50px; @@ -43,7 +43,7 @@ } .project-link-container { - background-color: #F1F0F0; + background-color: $tc-gray-neutral-light; border-radius: 6px; height: 60px; width: 100%; diff --git a/src/projects/detail/components/ReviewProjectButton/ReviewProjectButton.scss b/src/projects/detail/components/ReviewProjectButton/ReviewProjectButton.scss index e4272bb9d..40807a784 100644 --- a/src/projects/detail/components/ReviewProjectButton/ReviewProjectButton.scss +++ b/src/projects/detail/components/ReviewProjectButton/ReviewProjectButton.scss @@ -1,7 +1,7 @@ @import '~tc-ui/src/styles/tc-includes'; .container { - background-color: #fff; + background-color: $tc-white; width: 100%; /* use global style here as this style was extracted from the old component */ diff --git a/src/projects/detail/components/timeline/Milestone/Milestone.scss b/src/projects/detail/components/timeline/Milestone/Milestone.scss index 9f7c2ce93..620a3e33d 100644 --- a/src/projects/detail/components/timeline/Milestone/Milestone.scss +++ b/src/projects/detail/components/timeline/Milestone/Milestone.scss @@ -204,7 +204,7 @@ .tooltiptext { visibility: hidden; background-color: black; - color: #fff; + color: $tc-white; text-align: center; padding: 3px 10px; position: absolute; diff --git a/src/projects/detail/components/timeline/TimelineHeader/TimelineHeader.scss b/src/projects/detail/components/timeline/TimelineHeader/TimelineHeader.scss index bf4c38778..bfa202e2f 100644 --- a/src/projects/detail/components/timeline/TimelineHeader/TimelineHeader.scss +++ b/src/projects/detail/components/timeline/TimelineHeader/TimelineHeader.scss @@ -5,7 +5,7 @@ display: flex; position: relative; padding: 10px 0; - background: #fff; + background: $tc-white; @include roboto; a, diff --git a/src/projects/detail/components/timeline/milestones/MilestoneTypeAddLinks/MilestoneTypeAddLinks.scss b/src/projects/detail/components/timeline/milestones/MilestoneTypeAddLinks/MilestoneTypeAddLinks.scss index e7d2a8061..a408a9ecb 100644 --- a/src/projects/detail/components/timeline/milestones/MilestoneTypeAddLinks/MilestoneTypeAddLinks.scss +++ b/src/projects/detail/components/timeline/milestones/MilestoneTypeAddLinks/MilestoneTypeAddLinks.scss @@ -20,7 +20,7 @@ &.no-line:before{ content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; @@ -79,7 +79,7 @@ :before { content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; diff --git a/src/projects/detail/components/timeline/milestones/MilestoneTypeCheckpointReview/MilestoneTypeCheckpointReview.scss b/src/projects/detail/components/timeline/milestones/MilestoneTypeCheckpointReview/MilestoneTypeCheckpointReview.scss index ae3f4b892..099f04aff 100644 --- a/src/projects/detail/components/timeline/milestones/MilestoneTypeCheckpointReview/MilestoneTypeCheckpointReview.scss +++ b/src/projects/detail/components/timeline/milestones/MilestoneTypeCheckpointReview/MilestoneTypeCheckpointReview.scss @@ -20,7 +20,7 @@ &.no-line:before{ content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; @@ -79,7 +79,7 @@ :before { content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; diff --git a/src/projects/detail/components/timeline/milestones/MilestoneTypeFinalDesigns/MilestoneTypeFinalDesigns.scss b/src/projects/detail/components/timeline/milestones/MilestoneTypeFinalDesigns/MilestoneTypeFinalDesigns.scss index aafae1086..028c07aba 100644 --- a/src/projects/detail/components/timeline/milestones/MilestoneTypeFinalDesigns/MilestoneTypeFinalDesigns.scss +++ b/src/projects/detail/components/timeline/milestones/MilestoneTypeFinalDesigns/MilestoneTypeFinalDesigns.scss @@ -18,7 +18,7 @@ &.no-line:before{ content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; @@ -88,7 +88,7 @@ :before { content: ''; width: 4px; - background-color: #fff; + background-color: $tc-white; position: absolute; left: -20px; top: -25px; diff --git a/src/projects/list/components/Projects/ProjectsGridView.scss b/src/projects/list/components/Projects/ProjectsGridView.scss index a0bafc688..dddd2463e 100644 --- a/src/projects/list/components/Projects/ProjectsGridView.scss +++ b/src/projects/list/components/Projects/ProjectsGridView.scss @@ -499,7 +499,7 @@ $screen-one-column: 720px; } .icon-carret-down-active g g { - color: rgb(6, 129, 255) !important; + color: $tc-dark-blue-100 !important; } .icon-carret-down-active { diff --git a/src/projects/list/components/Walkthrough/Walkthrough.scss b/src/projects/list/components/Walkthrough/Walkthrough.scss index 59f79925d..f9f6fb0b1 100644 --- a/src/projects/list/components/Walkthrough/Walkthrough.scss +++ b/src/projects/list/components/Walkthrough/Walkthrough.scss @@ -114,7 +114,7 @@ .new-project-icon { width: 30px; height: 30px; - background-color: rgb(66, 133, 244); + background-color: $tc-dark-blue-70; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; diff --git a/src/styles/vendors/s-alert-default.scss b/src/styles/vendors/s-alert-default.scss index 3f1283e4e..7e65f6595 100644 --- a/src/styles/vendors/s-alert-default.scss +++ b/src/styles/vendors/s-alert-default.scss @@ -12,12 +12,12 @@ .s-alert-box { position: fixed; - background: rgba(42, 45, 50, 0.85); + background: rgba($tc-gray-90, 0.85); padding: 20px 50px 19px 20px; line-height: 20px; z-index: 9999; pointer-events: none; - color: rgba(250, 251, 255, 0.95); + color: rgba($tc-gray-neutral-light, 0.95); font-size: 15px; font-family: 'Roboto', Helvetica, Arial, sans-serif; max-width: 300px;