From 85528abb457db0efb1585babe1c72c144cf0e49a Mon Sep 17 00:00:00 2001 From: vbstreetz <60554509+vbstreetz@users.noreply.github.com> Date: Wed, 20 May 2020 19:07:27 +0300 Subject: [PATCH] improvement(dark mode): more tag, input and alert styles (#6666) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(dark-mode): unavailable action * feat(dark-mode): tags * feat(dark mode): reflink * feat(dark mode): light blue text input * feat(dark mode): alerts * fix stylelint Co-authored-by: Dan Lipert Co-authored-by: Aditya Anand M C Co-authored-by: Octavio Amuchástegui --- app/assets/v2/css/activity_stream.css | 11 ++ app/assets/v2/css/forms/input.css | 5 + app/assets/v2/css/tag.css | 146 ++++++++++++++++++++------ app/assets/v2/css/town_square.css | 40 +++++++ 4 files changed, 170 insertions(+), 32 deletions(-) diff --git a/app/assets/v2/css/activity_stream.css b/app/assets/v2/css/activity_stream.css index 59487aefa89..2326315f462 100644 --- a/app/assets/v2/css/activity_stream.css +++ b/app/assets/v2/css/activity_stream.css @@ -5,6 +5,12 @@ background-color: #ecf0f4; border: 0px solid; } + +.dark-mode #reflink { + background-color: var(--gc-blue); + color: #ecf0f4; +} + .click_here_to_join_video{ width: 100%; cursor: pointer; @@ -368,6 +374,11 @@ iframe.popout{ margin-left: 25%; } +.dark-mode .activity_stream .activity_detail .tag { + background-color: var(--gc-blue); + color: white; +} + @media (min-width: 768px) { .activity_feed_kudos_image{ max-width: 110px; diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css index 72966dd9146..d835765b15e 100644 --- a/app/assets/v2/css/forms/input.css +++ b/app/assets/v2/css/forms/input.css @@ -78,3 +78,8 @@ textarea.form__input { .dark-mode .activity_stream .box { border-color:transparent!important; } + +.form-control.bg-lightblue:focus { + background: var(--main-bg) !important; + color: white; +} diff --git a/app/assets/v2/css/tag.css b/app/assets/v2/css/tag.css index b3981f9acc3..814ee27d818 100644 --- a/app/assets/v2/css/tag.css +++ b/app/assets/v2/css/tag.css @@ -1,4 +1,32 @@ .tag { + --usd-bg: #d6fbeb; + --usd-color: #00a55e; + --usd-hover-bg: #c6ebdb; + + --network_warning-bg: #fbaf95; + --network_warning-color: #fff; + --network_warning-hover-bg: #fbaf95; + + --warning-bg: #7e1518; + --warning-color: #fff; + --warning-hover-bg: #d3696c; + + --success-bg: #216a12; + --success-color: #fff; + --success-hover-bg: #68b159; + + --in-progress-bg: #162955; + --in-progress-color: #fff; + --in-progress-hover-bg: #4f628e; + + --token-bg: #e7f0fa; + --token-color: var(--gc-blue); + --token-hover-bg: #d7e0ea; + + --hiring-bg: #3a9ced; + --hiring-color: #fff; + --hiring-hover-bg: #3a9ced; + text-align: center; border-radius: 2px; margin: 4px; @@ -9,6 +37,37 @@ cursor: pointer; } +.dark-mode .tag{ + --usd-bg: #00a55e; + --usd-color: #d6fbeb; + --usd-hover-bg: #1bbb76; + + --network_warning-bg: #fbaf95; + --network_warning-color: #fff; + --network_warning-hover-bg: #fbaf95; + + --warning-bg: #7e1518; + --warning-color: #fff; + --warning-hover-bg: #d3696c; + + --success-bg: #216a12; + --success-color: #fff; + --success-hover-bg: #68b159; + + --in-progress-bg: #162955; + --in-progress-color: #fff; + --in-progress-hover-bg: #4f628e; + + --token-bg: var(--gc-blue); + --token-color: #e7f0fa; + --token-hover-bg: var(--gc-blue-hover); + + --hiring-bg: #3a9ced; + --hiring-color: #fff; + --hiring-hover-bg: #3a9ced; +} + + .tag-lg { padding: 6px 16px; } @@ -17,67 +76,90 @@ margin-bottom: 1px; } -.tag.usd { - background-color: #d6fbeb; - color: #00A55E; +/* usd */ + +.tag.usd{ + background-color: var(--usd-bg); + color: var(--usd-color); } -.tag.usd:hover { - background-color: #c6ebdb; +.tag.usd:hover{ + background-color: var(--usd-hover-bg); } -.tag.network_warning { - background-color: #fbaf95; - color: #fff; +/* usd */ + +.tag.network_warning{ + background-color: var(--network_warning-bg); + color: var(--network_warning-color); } -.tag.warning { - background-color: #7E1518; - color: #fff; +.tag.network_warning:hover{ + background-color: var(--network_warning-hover-bg); } -.tag.warning:hover { - background-color: #D3696C; +/* usd */ + +.tag.warning{ + background-color: var(--warning-bg); + color: var(--warning-color); } -.tag.success { - background-color: #216A12; - color: #fff; +.tag.warning:hover{ + background-color: var(--warning-hover-bg); } -.tag.success:hover { - background-color: #68B159; +/* usd */ + +.tag.success{ + background-color: var(--success-bg); + color: var(--success-color); } -.tag.in-progress { - background-color: #162955; - color: #fff; +.tag.success:hover{ + background-color: var(--success-hover-bg); } -.tag.in-progress:hover { - background-color: #4F628E; +/* usd */ + +.tag.in-progress{ + background-color: var(--in-progress-bg); + color: var(--in-progress-color); } -.tag.token { - background-color: #e7f0fa; - color: var(--gc-blue); +.tag.in-progress:hover{ + background-color: var(--in-progress-hover-bg); } -.tag.token:hover { - background-color: #d7e0ea; +/* usd */ + +.tag.token{ + background-color: var(--token-bg); + color: var(--token-color); } -.tag.hiring { - background-color: #3a9ced; - color: #fff; +.tag.token:hover{ + background-color: var(--token-hover-bg); } -.tag.token > a { +.tag.token > a{ height: 0; line-height: 1.5rem; float: right; } +/* hiring */ + +.tag.hiring{ + background-color: var(--hiring-bg); + color: var(--hiring-color); +} + +.tag.hiring:hover{ + background-color: var(--hiring-hover-bg); +} + + .keyword-group { display: flex; flex-wrap: wrap; diff --git a/app/assets/v2/css/town_square.css b/app/assets/v2/css/town_square.css index ae600cdf391..bb600623b71 100644 --- a/app/assets/v2/css/town_square.css +++ b/app/assets/v2/css/town_square.css @@ -381,6 +381,12 @@ a.offer_container.animate:hover .prize-gift::after { background-color: #f9f9f9; color: #808080; } +.dark-mode .empty{ + background: var(--gc-blue); + color: white; + opacity: 0.4; +} + .empty .prize-gift { color: grey; text-shadow: 0 2px 0px grey; @@ -1098,3 +1104,37 @@ body.green.offer_view .announce { max-height: 4rem; max-width: 4rem; } + +/* alerts */ +/* todo: + probably move this to seperate alert.css file +*/ + +.dark-mode .alert-primary { + color: #cce5ff; + background-color: #20037e; +} + +.dark-mode .alert-success { + color: #d4edda; + background-color: #155724; +} + +.dark-mode .alert-warning { + background-color: #856404; + color: #fff3cd; +} + +.dark-mode .alert-danger { + color: #f8d7da; + background-color: #721c24; +} + +.dark-mode .alert { + border-color: transparent !important; +} + +.dark-mode .alert .close { + opacity: 0.8; + text-shadow: none; +}