improvement(dark mode): more tag, input and alert styles (#6666)

* 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 <[email protected]> Co-authored-by: Aditya Anand M C <[email protected]> Co-authored-by: Octavio Amuchástegui <[email protected]>
gitcoinco · May 20, 2020 · 85528ab · 85528ab
1 parent b3446cd
commit 85528ab
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}