diff --git a/app/filters/rating-color.filter.js b/app/filters/rating-color.filter.js index 76dab81e0..f2f50e07a 100644 --- a/app/filters/rating-color.filter.js +++ b/app/filters/rating-color.filter.js @@ -14,35 +14,35 @@ var colors = [ // grey { - 'color': '#7f7f7f', + 'color': '#9D9FA0', 'darkerColor': '#656565', 'start': 0, 'end': 899 }, // green { - 'color': '#99cc09', + 'color': '#69C329', 'darkerColor': '#7aa307', 'start': 900, 'end': 1199 }, // blue { - 'color': '#09affe', + 'color': '#616BD5', 'darkerColor': '#078ccb', 'start': 1200, 'end': 1499 }, // yellow { - 'color': '#f39426', + 'color': '#FCB816', 'darkerColor': '#c2761e', 'start': 1500, 'end': 2199 }, // red { - 'color': '#fe0866', + 'color': '#EF3A3A', 'darkerColor': '#cb0651', 'start': 2200, 'end': Infinity diff --git a/app/my-dashboard/subtrack-stats/subtrack-stats.jade b/app/my-dashboard/subtrack-stats/subtrack-stats.jade index f6d666e63..4891996a5 100644 --- a/app/my-dashboard/subtrack-stats/subtrack-stats.jade +++ b/app/my-dashboard/subtrack-stats/subtrack-stats.jade @@ -7,7 +7,7 @@ .flex-wrapper p.subtrack {{subtrack.subTrack | underscoreStrip}} - p.rating {{subtrack.stat | number}} + p.rating(style="color: {{subtrack.stat | ratingColor}}") {{subtrack.stat | number}} span(style="background-color: {{subtrack.stat | ratingColor}}", ng-if="subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE'") p {{subtrack.statType}} diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 1b0fa421d..03fd339ed 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -36,7 +36,7 @@ challenge-tile .challenge.tile-view { @include sofia-pro-medium; font-size: 14px; line-height: 18px; - color: $primary-text; + color: $gray-darkest; text-decoration: none; @include ellipsis; @@ -91,7 +91,7 @@ challenge-tile .challenge.tile-view { .time-remaining { margin-top: 5px; font-size: 24px; - color: $primary-text; + color: $gray-darkest; } .unit-of-time { @@ -128,7 +128,7 @@ challenge-tile .challenge.tile-view { @include sofia-pro-regular; font-size: 12px; text-transform: uppercase; - color: $primary-text; + color: $gray-darkest; &:before { content: ''; @@ -146,7 +146,7 @@ challenge-tile .challenge.tile-view { .roles { min-height: 36px; margin-bottom: 25px; - color: $primary-text; + color: $gray-darkest; @include source-sans-regular; font-size: 13px; line-height: 18px; @@ -185,7 +185,7 @@ challenge-tile .challenge.tile-view { p { @include sofia-pro-medium; font-size: 12px; - color: $primary-text; + color: $gray-darkest; } .forum p { @@ -243,7 +243,7 @@ challenge-tile .challenge.tile-view { @include sofia-pro-medium; font-size: 14px; line-height: 18px; - color: $primary-text; + color: $gray-darkest; text-decoration: none; &:hover { @@ -277,7 +277,7 @@ challenge-tile .challenge.tile-view { margin-bottom: 30px; @include sofia-pro-regular; font-size: 20px; - color: $primary-text; + color: $gray-darkest; &.first-place { font-weight: bold; @@ -303,7 +303,7 @@ challenge-tile .challenge.tile-view { margin-bottom: 5px; @include sofia-pro-bold; font-size: 18px; - color: $primary-text; + color: $gray-darkest; } p:last-child { @@ -360,7 +360,7 @@ challenge-tile .challenge.list-view { display: block; @include sofia-pro-medium; font-size: 18px; - color: $primary-text; + color: $gray-darkest; text-decoration: none; @include ellipsis; @@ -381,7 +381,7 @@ challenge-tile .challenge.list-view { max-width: 362px; @include source-sans-regular; font-size: 13px; - color: $primary-text; + color: $gray-darkest; @include ellipsis; .role { @@ -407,7 +407,7 @@ challenge-tile .challenge.list-view { margin-bottom: 10px; @include sofia-pro-light; font-size: 18px; - color: $primary-text; + color: $gray-darkest; text-transform: uppercase; } @@ -436,7 +436,7 @@ challenge-tile .challenge.list-view { @include sofia-pro-regular; font-size: 12px; text-transform: uppercase; - color: $primary-text; + color: $gray-darkest; &:before { content: ''; @@ -478,7 +478,7 @@ challenge-tile .challenge.list-view { p { @include sofia-pro-light; font-size: 24px; - color: $primary-text; + color: $gray-darkest; } .forum p { @@ -512,30 +512,30 @@ challenge-tile .challenge.list-view { // Dynamic colors based on track .DESIGN { - .challenge-track { background-color: $accent-color; } + .challenge-track { background-color: $design; } &.tile-view { - header .subtrack-color { color: $accent-color; } + header .subtrack-color { color: $design; } } } .DEVELOP { - .challenge-track { background-color: $success-color; } + .challenge-track { background-color: $develop; } &.tile-view { - header .subtrack-color { color: $success-color; } + header .subtrack-color { color: $develop; } } } .DATA_SCIENCE { - .challenge-track { background-color: #F39426; } + .challenge-track { background-color: $data_science; } &.tile-view { - header .subtrack-color { color: #F39426; } + header .subtrack-color { color: $data_science; } } } .COPILOT { - .challenge-track { background-color: #7F7F7F; } + .challenge-track { background-color: $copilot; } &.tile-view { - header .subtrack-color { color: #7F7F7F; } + header .subtrack-color { color: $copilot; } } } diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss index d196dc72b..ddbbaec52 100644 --- a/assets/css/directives/ios-card.scss +++ b/assets/css/directives/ios-card.scss @@ -30,7 +30,7 @@ ios-card .challenge.tile-view { @include sofia-pro-medium; font-size: 14px; line-height: 18px; - color: $primary-text; + color: $gray-darkest; text-decoration: none; @include ellipsis; } @@ -88,7 +88,7 @@ ios-card .challenge.tile-view { .time-remaining { margin-top: 5px; font-size: 24px; - color: $primary-text; + color: $gray-darkest; } .unit-of-time { @@ -107,7 +107,7 @@ ios-card .challenge.tile-view { .roles { min-height: 36px; margin-bottom: 25px; - color: $primary-text; + color: $gray-darkest; @include source-sans-regular; font-size: 13px; line-height: 18px; @@ -146,7 +146,7 @@ ios-card .challenge.tile-view { p { @include sofia-pro-bold; font-size: 11px; - color: $primary-text; + color: $gray-darkest; } .forum p { @@ -180,20 +180,20 @@ ios-card .challenge.tile-view { // Dynamic colors based on track &.DESIGN { - .challenge-track { background-color: $accent-color; } - header p { color: $accent-color; } + .challenge-track { background-color: $design; } + header p { color: $design; } } &.DEVELOP { - .challenge-track { background-color: $success-color; } - header p { color: $success-color; } + .challenge-track { background-color: $develop; } + header p { color: $develop; } } &.DATA_SCIENCE { - .challenge-track { background-color: #F39426; } - header p { color: #F39426; } + .challenge-track { background-color: $data_science; } + header p { color: $data_science; } } &.COPILOT { - .challenge-track { background-color: #7F7F7F; } - header p { color: #7F7F7F; } + .challenge-track { background-color: $copilot; } + header p { color: $copilot; } } } diff --git a/assets/css/directives/srm-tile.scss b/assets/css/directives/srm-tile.scss index 58ba45560..d3fad4948 100644 --- a/assets/css/directives/srm-tile.scss +++ b/assets/css/directives/srm-tile.scss @@ -33,7 +33,7 @@ @include sofia-pro-medium; font-size: 14px; line-height: 49px; - color: $primary-text; + color: $gray-darkest; text-decoration: none; @include ellipsis; } @@ -73,7 +73,7 @@ &.day { margin-top: 2px; font-size: 24px; - color: $primary-text; + color: $gray-darkest; } &.month, &.time-zone { letter-spacing: 1.6px; @@ -92,7 +92,7 @@ margin-left: 3px; @include sofia-pro-regular; font-size: 12px; - color: $primary-text; + color: $gray-darkest; } } } diff --git a/assets/css/layout/footer.scss b/assets/css/layout/footer.scss index 9524d0f67..00fb9b585 100644 --- a/assets/css/layout/footer.scss +++ b/assets/css/layout/footer.scss @@ -1,7 +1,7 @@ @import '../partials/combined'; .bottom-footer { - background-color: $primary-text; + background-color: $gray-darkest; padding: 1px 20px 30px 20px; } diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss index a0e278f6d..87139ba74 100644 --- a/assets/css/layout/header.scss +++ b/assets/css/layout/header.scss @@ -108,7 +108,7 @@ } .btn-open-menu { - color: $primary-text; + color: $gray-darkest; font-size: 15px; line-height: 55px; font-family: inherit; @@ -246,7 +246,7 @@ } .top-header { - background-color: $primary-text; + background-color: $gray-darkest; } } diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss index 5f44c1a27..50a69a4a4 100644 --- a/assets/css/my-dashboard/community-updates.scss +++ b/assets/css/my-dashboard/community-updates.scss @@ -3,7 +3,7 @@ .community-updates { display: flex; flex-direction: column; - color: $primary-text; + color: $gray-darkest; @media only screen and (min-width: 1132px) { padding-bottom: 60px; } diff --git a/assets/css/my-dashboard/header-dashboard.scss b/assets/css/my-dashboard/header-dashboard.scss index 04d9ba1d4..556cb40b7 100644 --- a/assets/css/my-dashboard/header-dashboard.scss +++ b/assets/css/my-dashboard/header-dashboard.scss @@ -27,7 +27,7 @@ @include sofia-pro-bold; font-size: 22px; line-height: 26px; - color: $primary-text; + color: $gray-darkest; text-transform: uppercase; @media only screen and (min-width: 600px) { margin-bottom: 0; @@ -65,7 +65,7 @@ @include sofia-pro-bold; font-size: 18px; line-height: 23px; - color: $primary-text; + color: $gray-darkest; @media only screen and (min-width: 600px) { font-size: 22px; line-height: 28px; diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss index 0407cbd4a..2c66acbd6 100644 --- a/assets/css/my-dashboard/my-challenges.scss +++ b/assets/css/my-dashboard/my-challenges.scss @@ -60,7 +60,7 @@ display: flex; flex-direction: column; align-items: center; - color: $primary-text; + color: $gray-darkest; padding-left: 20px; padding-right: 20px; diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss index ccb233027..7c7ca3eca 100644 --- a/assets/css/my-dashboard/my-dashboard.scss +++ b/assets/css/my-dashboard/my-dashboard.scss @@ -37,7 +37,7 @@ .section-title { @include sofia-pro-bold; font-size: 22px; - color: $primary-text; + color: $gray-darkest; text-align: center; text-transform: uppercase; @media only screen and (min-width: 450px) { diff --git a/assets/css/my-dashboard/programs.scss b/assets/css/my-dashboard/programs.scss index f44347275..349d1f56a 100644 --- a/assets/css/my-dashboard/programs.scss +++ b/assets/css/my-dashboard/programs.scss @@ -63,7 +63,7 @@ @include sofia-pro-light; font-size: 23px; text-transform: uppercase; - color: $primary-text; + color: $gray-darkest; @media only screen and (min-width: 900px) { margin-top: 0; } @@ -156,7 +156,7 @@ margin-bottom: 37px; @include sofia-pro-light; font-size: 20px; - color: $primary-text; + color: $gray-darkest; } .badge-timeline { @@ -210,7 +210,7 @@ @include source-sans-regular; font-size: 14px; line-height: 20px; - color: $primary-text; + color: $gray-darkest; @media only screen and (min-width: 900px) { font-size: 16px; } diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss index cb7931875..5e6b227ac 100644 --- a/assets/css/my-dashboard/srms.scss +++ b/assets/css/my-dashboard/srms.scss @@ -98,7 +98,7 @@ @include sofia-pro-light; font-size: 24px; text-align: center; - color: $primary-text; + color: $gray-darkest; text-transform: uppercase; white-space: normal; } @@ -120,7 +120,7 @@ @include source-sans-regular; font-size: 14px; line-height: 20px; - color: $primary-text; + color: $gray-darkest; @media only screen and (min-width: 900px) { font-size: 16px; } diff --git a/assets/css/my-dashboard/subtrack-stats.scss b/assets/css/my-dashboard/subtrack-stats.scss index 0ff3af429..1210d5507 100644 --- a/assets/css/my-dashboard/subtrack-stats.scss +++ b/assets/css/my-dashboard/subtrack-stats.scss @@ -26,15 +26,15 @@ cursor: pointer; &:hover { - background-color: #F5FAE5; + background-color: $gray-lightest; .subtrack { - color: #99CC00; - border-bottom-color: #99CC00; + color: $gray-darkest; + border-bottom-color: $gray-darkest; } p:last-child { - color: #5E9EF1; + color: $gray-darkest; } } @@ -73,7 +73,7 @@ p { @include sofia-pro-regular; font-size: 12px; - color: #A3A3AE; + color: $system-gray; &:last-child { text-transform: uppercase; @@ -90,7 +90,6 @@ margin-top: 17px; margin-bottom: 7px; font-size: 32px; - color: $primary-text; @media only screen and (max-width: 767px) { margin-top: 10px; } diff --git a/assets/css/partials/_colors.scss b/assets/css/partials/_colors.scss index 0bcac14db..668651470 100644 --- a/assets/css/partials/_colors.scss +++ b/assets/css/partials/_colors.scss @@ -1,8 +1,4 @@ -$white : #fff; -$off-white : #fffffe; -$white-gray : #d8d8d8; $light-black: #333; -$black : #000; // grays $light-gray : #929292; @@ -26,25 +22,42 @@ $dark-blue : #0096ff; $review-blue: #0071bc; $login-blue : #26A9E0; -//dashboard ported colors -$color_storm_dust_approx: #666; -$color_celeste_approx: rgb(207,207,207); -$color_selective_yellow_approx: #ffb800; -$color_wild_sand_approx: #f5f5f5; -$color_mine_shaft_approx: #333; -$alabaster: #fafafa; -$color_bon_jour_approx: #e1e1e1; -$color_california_approx: #ff9900; -$color_flush_orange_approx: #ff7a00; - // UI REFRESH COLORS -$primary-text: #3D3D3D; $primary-color: #00aeff; -$accent-color: #0096ff; +$accent-color: #21B2F1; $success-color: #99cc00; $danger-color: #ff0066; $warning-color: #DAD714; +$accent: #0096FF; +$error: #F31D3D; +$success: #5BC921; + +$level-5: #EF3A3A; +$level-4: #FCB816; +$level-3: #616BD5; +$level-2: #69C329; +$level-1: #9D9FA0; + +$design: #21B2F1; +$data_science: #FC9A00; +$develop: #05C14F; +$copilot: #7D939E; + +$system-dark-gray: #394146; +$system-gray: #A3A3AE; + +$white: #fff; +$black: #000; +$gray-darkest: #3D3D3D; +$gray-darker: #7F7F7F; +$gray-dark: #B7B7B7; +$gray: #D1D3D4; +$gray-light: #F0F0F0; +$gray-lighter: #F6F6F6; +$gray-lightest: #FCFCFC; + +// Refactor and get rid of these: $ui-page-gray: #f1f2f2; $ui-dark-gray: #231F20; diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss index 46db91ae7..3ca09708c 100644 --- a/assets/css/skill-picker/skill-picker.scss +++ b/assets/css/skill-picker/skill-picker.scss @@ -73,7 +73,7 @@ cursor: pointer; } &.checked-track { - color: $primary-text; + color: $gray-darkest; span { background: url(/images/checkbox-sprite.png) left top no-repeat;