Fix staking Theme colors UI issues (from #2292) (#2700)

* Fix button color in dark mode on Error Status modal

* Fix dark theme color in stake dialog modals

* Fix dark theme color for empty state in stake pools list

* Fix dark theme color for non-empty state in stake pools list

* Fix delegators list modal width for inactive pools

* Fix dark theme color for banned pools

* Fix differences in transition speed for input prepend block

* Fix dark theme color for input autofill

* Fix chart color in staking modals

* Fix to hide only tooltips that triggered by elements inside stakes top block

apps/block_scout_web/assets/css/_mixins.scss

@@ -157,6 +157,7 @@
   }
 
   path {
+    transition: $transition-cont;
     fill: $text-color;
   }
 

apps/block_scout_web/assets/css/components/_check.scss

@@ -26,6 +26,7 @@ $check-dimensions: 14px !default;
   }
 
   .check-icon {
+    top: -1px;
     border: 1px solid $base-border-color;
     flex-grow: 0;
     flex-shrink: 0;

apps/block_scout_web/assets/css/components/_form.scss

@@ -1,4 +1,5 @@
 $form-control-border-color: #e2e5ec !default;
+$form-control-border-color-active: $primary !default;
 
 .form-control {
   border-color: $form-control-border-color;
@@ -10,7 +11,7 @@ $form-control-border-color: #e2e5ec !default;
   }
 
   &:focus {
-    border-color: $secondary;
+    border-color: $form-control-border-color-active;
     box-shadow: none;
   }
 
@@ -41,9 +42,17 @@ $form-control-border-color: #e2e5ec !default;
     border-left: none;
     color: #a3a9b5;
     font-size: 14px;
+    transition: $input-transition;
   }
 }
 
+.form-control:focus ~ .input-group-prepend.last {
+  .input-group-text {
+    border-color: $form-control-border-color-active;
+  }
+}
+
+
 .input-group.input-status-error  {
   input {
     border-color: #FF7884 !important;

apps/block_scout_web/assets/css/components/_i_tooltip.scss

@@ -1,17 +1,22 @@
 $i-tooltip-background: #a3a9b5 !default;
+$i-tooltip-info: #fff !default;
 $i-tooltip-background-active: $primary !default;
 
 .i-tooltip {
   display: block;
   height: 16px;
   width: 16px;
 
-  path {
+  .i-tooltip-circle  {
     fill: $i-tooltip-background;
   }
 
+  .i-tooltip-info  {
+    fill: $i-tooltip-info;
+  }
+
   &:hover {
-    path {
+    .i-tooltip-circle {
       fill: $i-tooltip-background-active;
     }
   }

apps/block_scout_web/assets/css/components/_modal_status.scss

@@ -76,6 +76,13 @@ $modal-status-graph-question: #329ae9 !default;
   .btn-line {
     flex-grow: 1;
     margin-right: 20px;
+    border-color: $primary;
+    color: $primary;
+
+    &:hover {
+      background-color: $primary;
+      color: $additional-font;
+    }
 
     &:last-child {
       margin-right: 0;

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -1,5 +1,6 @@
 $stakes-table-th-background: #f5f6fa !default;
 $stakes-table-cell-separation: 25px !default;
+$stakes-link-color: $primary !default;
 
 .stakes-table-container {
   max-width: 100%;
@@ -88,6 +89,11 @@ $stakes-table-cell-separation: 25px !default;
   padding: 21px $stakes-table-cell-separation 21px 0;
   position: relative;
   z-index: 0;
+
+  .i-tooltip {
+    position: relative;
+    top: -2px;
+  }
 }
 
 .stakes-th-text {
@@ -130,7 +136,7 @@ $stakes-table-cell-separation: 25px !default;
 }
 
 .stakes-td-link-style {
-  color: $secondary;
+  color: $stakes-link-color;
   cursor: pointer;
 
   .stakes-tr-banned & {

apps/block_scout_web/assets/css/components/stakes/_modal_bottom_disclaimer.scss

@@ -21,6 +21,10 @@
   .modal-bottom-disclaimer-graphic {
     flex-shrink: 0;
     padding-right: 15px;
+
+    svg {
+      fill: #333;
+    }
   }
 
   .modal-bottom-disclaimer-text {

apps/block_scout_web/assets/css/components/stakes/_modal_delegators_info.scss

@@ -1,11 +1,11 @@
 .modal-delegators-info {
-  max-width: map-get($container-max-widths, "md");
-  min-width: map-get($container-max-widths, "md");
+  max-width: map-get($container-max-widths, "lg");
+  min-width: map-get($container-max-widths, "lg");
   width: 100%;
 
   .container {
-    @include media-breakpoint-down(sm) {
-      max-width: map-get($container-max-widths, "md");
+    @include media-breakpoint-down(md) {
+      max-width: map-get($container-max-widths, "lg");
     }
   }
 }

apps/block_scout_web/assets/css/components/stakes/_stakes.scss

@@ -99,6 +99,11 @@ $stakes-stats-item-border-color: #fff !default;
     color: $stakes-address-color;
     cursor: pointer;
   }
+
+  .check-tooltip {
+		position: relative;
+		top: -1px;
+	}
 }
 
 .stakes-controls {

apps/block_scout_web/assets/css/components/stakes/_stakes_progress.scss

@@ -1,3 +1,5 @@
+$stakes-progress-graph-color: $primary !default;
+
 .stakes-progress {
   .modal-stake-right & {
     border-left: 1px solid $base-border-color;
@@ -39,7 +41,7 @@
 }
 
 .stakes-progress-info-link {
-  color: $secondary;
+  color: $primary;
   cursor: pointer;
 }
 
@@ -53,6 +55,10 @@
   z-index: 1;
 }
 
+.stakes-progress-graph-thing-for-getting-color {
+  color: $stakes-progress-graph-color;
+}
+
 .stakes-progress-data {
   left: 50%;
   position: absolute;

apps/block_scout_web/assets/css/theme/_dai_variables.scss

@@ -35,6 +35,9 @@ $dashboard-banner-network-plain-container-background-color: #273781
 // navigation
 .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow
 
+// form
+$form-control-border-color-active: $secondary;
+
 // buttons
 $btn-line-bg: #fff; // button bg
 $btn-line-color: $primary; // button border and font color && hover bg color
@@ -73,40 +76,17 @@ $stakes-dashboard-copy-icon-color: $secondary;
 $btn-full-primary-bg: $secondary;
 $stakes-address-color: $secondary;
 $stakes-control-color: $secondary;
+$stakes-link-color: $secondary;
 $progress-from-to-progress-background: $secondary;
 $stakes-stats-item-border-color: rgba(#fff, .5);
 $check-color: $secondary;
 $modal-status-graph-success: $secondary;
-.modal-content {
-	.form-control {
-		box-shadow: none !important;
-		outline: none !important;
-		border-color: #e2e5ec !important;
-	}
-	.btn-line {
-		border-color: $primary;
-		color: $primary;
-		&:hover {
-			background-color: $primary
-		}
-	}
-}
-.stakes-table-th-content {
-	.i-tooltip {
-		position: relative;
-		top: -2px;
-	}
-}
-.stakes-address-container {
-	.check-tooltip {
-		position: relative;
-		top: -1px;
-	}
-}
+$stakes-progress-graph-color: $secondary;
 
 // Dark theme
-$dark-primary: #233174;
-$dark-secondary:#15f9bb;
+$dark-primary: #15bba6;
+$dark-secondary: #93d7ff;
+$dark-primary-alternate: #15bba6;
 $dark-tertiary: #5a77ff;
 
 .dark-theme-applied .tile .tile-body a, .dark-theme-applied .tile span[data-address-hash] {
@@ -121,4 +101,4 @@ $dark-tertiary: #5a77ff;
 
 .dark-theme-applied .btn-line:hover {
     color: $additional-font!important;
-}
+}