DDW-659 - Review and fix incorrect global instances in css files

input-output-hk · Jun 8, 2021 · 6629d3f · 6629d3f
1 parent c91baea
commit 6629d3f
Show file tree

Hide file tree

Showing 14 changed files with 363 additions and 321 deletions.
diff --git a/source/renderer/app/components/appUpdate/AppUpdateOverlay.scss b/source/renderer/app/components/appUpdate/AppUpdateOverlay.scss
@@ -30,14 +30,14 @@
 
     &::-webkit-scrollbar-thumb {
       background-color: var(
-          --theme-news-overlay-update-content-scroll-background-color
+        --theme-news-overlay-update-content-scroll-background-color
       );
       outline: none;
       width: 4px;
 
       &:hover {
         background-color: var(
-            --theme-news-overlay-update-content-scroll-hover-background-color
+          --theme-news-overlay-update-content-scroll-hover-background-color
         );
       }
     }
@@ -153,7 +153,7 @@
 
     .button {
       background-color: var(
-          --theme-news-overlay-update-button-background-color
+        --theme-news-overlay-update-button-background-color
       );
       border: 1px solid var(--theme-news-overlay-update-button-text-color);
       color: var(--theme-news-overlay-update-button-text-color);
@@ -215,7 +215,9 @@
 
     :global {
       .SimpleLoadingSpinner_root {
-        border-color: var(--theme-news-overlay-update-button-text-color) var(--theme-news-overlay-update-button-text-color) transparent transparent;
+        border-color: var(--theme-news-overlay-update-button-text-color)
+          var(--theme-news-overlay-update-button-text-color) transparent
+          transparent;
       }
     }
   }
@@ -240,7 +242,7 @@
 
     &:hover {
       background-color: var(
-          --theme-news-overlay-update-content-background-color
+        --theme-news-overlay-update-content-background-color
       );
       opacity: 0.8;
     }

diff --git a/source/renderer/app/components/navigation/NavDropdown.scss b/source/renderer/app/components/navigation/NavDropdown.scss
@@ -68,7 +68,7 @@
 
             &.SimpleOptions_highlightedOption:hover {
               background-color: var(
-                  --theme-nav-dropdown-item-background-color-hover
+                --theme-nav-dropdown-item-background-color-hover
               );
             }
           }

diff --git a/source/renderer/app/components/news/NewsFeed.scss b/source/renderer/app/components/news/NewsFeed.scss
@@ -71,7 +71,7 @@
 
         &:hover {
           background-color: var(
-              --theme-news-feed-icon-close-hover-background-color
+            --theme-news-feed-icon-close-hover-background-color
           );
         }
       }
@@ -123,13 +123,13 @@
     :global {
       *::-webkit-scrollbar-thumb {
         background-color: var(
-            --theme-splash-network-scrollbar-thumb-background
+          --theme-splash-network-scrollbar-thumb-background
         );
         min-height: 150px;
 
         &:hover {
           background-color: var(
-              --theme-splash-network-scrollbar-thumb-background-hover
+            --theme-splash-network-scrollbar-thumb-background-hover
           );
         }
       }

diff --git a/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss b/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
@@ -1,8 +1,10 @@
 .delegationStepsChooseStakePoolDialogWrapper {
   :global {
     .StakePoolThumbnail_content {
-      background-color: 1px solid var(--theme-delegation-steps-choose-stake-pool-thumb-background-color);
-      border: 1px solid var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
+      background-color: 1px solid
+        var(--theme-delegation-steps-choose-stake-pool-thumb-background-color);
+      border: 1px solid
+        var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
     }
 
     .Dialog_subtitle {
@@ -39,7 +41,7 @@
 
         &.retiring {
           background: var(
-              --theme-staking-stake-pool-retirement-background-color
+            --theme-staking-stake-pool-retirement-background-color
           ) !important;
         }
 
@@ -49,7 +51,8 @@
       }
 
       .selectPoolBlockPlaceholder {
-        border: 2px solid var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
+        border: 2px solid
+          var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
         border-style: dashed;
 
         .icon {
@@ -61,19 +64,20 @@
 
             path {
               stroke: var(
-                  --theme-delegation-steps-choose-stake-pool-checkmark-icon-color
+                --theme-delegation-steps-choose-stake-pool-checkmark-icon-color
               );
             }
           }
         }
       }
 
       .selectedPoolBlock {
-        border: 1px solid var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
+        border: 1px solid
+          var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
 
         .ticker {
           color: var(
-              --theme-delegation-steps-choose-stake-pool-selected-ticker-color
+            --theme-delegation-steps-choose-stake-pool-selected-ticker-color
           );
           font-family: var(--font-semibold);
           font-size: 14px;
@@ -93,7 +97,7 @@
 
             path {
               stroke: var(
-                  --theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color
+                --theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color
               );
             }
           }
@@ -108,7 +112,7 @@
 
               path {
                 stroke: var(
-                    --theme-staking-stake-pool-retirement-background-color
+                  --theme-staking-stake-pool-retirement-background-color
                 );
               }
             }
@@ -118,7 +122,7 @@
 
       .selectStakePoolLabel {
         color: var(
-            --theme-delegation-steps-choose-stake-pool-delegated-pools-label-color
+          --theme-delegation-steps-choose-stake-pool-delegated-pools-label-color
         );
         flex: 1;
         font-family: var(--font-light);

diff --git a/...rer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseWalletDialog.scss b/...rer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseWalletDialog.scss
@@ -12,7 +12,7 @@
 
     .WalletsDropdownLabel_syncing .LoadingSpinner_icon svg path {
       fill: var(
-          --theme-delegation-steps-choose-wallet-custom-value-color
+        --theme-delegation-steps-choose-wallet-custom-value-color
       ) !important;
       opacity: 0.5;
     }
@@ -34,7 +34,7 @@
 
       span > span {
         color: var(
-            --theme-delegation-steps-choose-wallet-description-highlighted-color
+          --theme-delegation-steps-choose-wallet-description-highlighted-color
         );
         font-family: var(--font-medium);
         font-weight: 500;
@@ -61,7 +61,7 @@
 
     .errorMessage {
       color: var(
-          --theme-delegation-steps-choose-wallet-error-message-light-color
+        --theme-delegation-steps-choose-wallet-error-message-light-color
       );
       font-size: 14px;
       letter-spacing: normal;

diff --git a/source/renderer/app/components/staking/epochs/StakingEpochs.scss b/source/renderer/app/components/staking/epochs/StakingEpochs.scss
@@ -34,10 +34,10 @@
       }
 
       .SimpleOptions_options.SimpleOptions_firstOptionHighlighted:not(.SimpleOptions_openUpward)
-      [data-bubble-arrow]:after {
+        [data-bubble-arrow]:after {
         border-bottom-color: var(
-            --rp-bubble-arrow-bg-color,
-            #fafbfc
+          --rp-bubble-arrow-bg-color,
+          #fafbfc
         ) !important;
       }
     }
@@ -78,11 +78,11 @@
 
   .progress {
     background: repeating-linear-gradient(
-        -63deg,
-        var(--theme-staking-progress-stripe-dark-1-background-color),
-        var(--theme-staking-progress-stripe-dark-1-background-color) 10px,
-        var(--theme-staking-progress-stripe-dark-2-background-color) 10px,
-        var(--theme-staking-progress-stripe-dark-2-background-color) 20px
+      -63deg,
+      var(--theme-staking-progress-stripe-dark-1-background-color),
+      var(--theme-staking-progress-stripe-dark-1-background-color) 10px,
+      var(--theme-staking-progress-stripe-dark-2-background-color) 10px,
+      var(--theme-staking-progress-stripe-dark-2-background-color) 20px
     );
     border-radius: 5px;
     height: 100%;

diff --git a/source/renderer/app/components/staking/info/StakingInfo.scss b/source/renderer/app/components/staking/info/StakingInfo.scss
@@ -14,61 +14,61 @@
       }
     }
   }
-}
 
-.mainContent {
-  @extend %contentBorderAndBackground;
-  padding: 20px;
-}
+  .mainContent {
+    @extend %contentBorderAndBackground;
+    padding: 20px;
 
-.heading {
-  @extend %accentText;
-  font-size: 19px;
-  margin-bottom: 14px;
-}
+    .heading {
+      @extend %accentText;
+      font-size: 19px;
+      margin-bottom: 14px;
+    }
 
-.description {
-  @extend %regularText;
-  color: var(--theme-staking-font-color-light);
-  margin-bottom: 24px;
-}
+    .description {
+      @extend %regularText;
+      color: var(--theme-staking-font-color-light);
+      margin-bottom: 24px;
+    }
 
-.progressBar {
-  height: 24px;
-  margin: 0 auto;
-  margin-bottom: 24px;
-  width: 80%;
-}
+    .progressBar {
+      height: 24px;
+      margin: 0 auto;
+      margin-bottom: 24px;
+      width: 80%;
 
-.progressBarContainer {
-  background-color: var(--theme-staking-progress-bar-background-color);
-  border-radius: 5px;
-  height: 100%;
-  width: 100%;
-}
+      .progressBarContainer {
+        background-color: var(--theme-staking-progress-bar-background-color);
+        border-radius: 5px;
+        height: 100%;
+        width: 100%;
 
-.progress {
-  align-items: center;
-  background: repeating-linear-gradient(
-    -63deg,
-    var(--theme-staking-progress-stripe-dark-1-background-color),
-    var(--theme-staking-progress-stripe-dark-1-background-color) 10px,
-    var(--theme-staking-progress-stripe-dark-2-background-color) 10px,
-    var(--theme-staking-progress-stripe-dark-2-background-color) 20px
-  );
-  border-radius: 5px;
-  display: flex;
-  height: 100%;
-  justify-content: flex-end;
-}
+        .progress {
+          align-items: center;
+          background: repeating-linear-gradient(
+            -63deg,
+            var(--theme-staking-progress-stripe-dark-1-background-color),
+            var(--theme-staking-progress-stripe-dark-1-background-color) 10px,
+            var(--theme-staking-progress-stripe-dark-2-background-color) 10px,
+            var(--theme-staking-progress-stripe-dark-2-background-color) 20px
+          );
+          border-radius: 5px;
+          display: flex;
+          height: 100%;
+          justify-content: flex-end;
 
-.progressLabel {
-  @extend %regularText;
-  transform: translateX(calc(100% + 8px));
-}
+          .progressLabel {
+            @extend %regularText;
+            transform: translateX(calc(100% + 8px));
+          }
 
-.progressLabelWhite {
-  @extend %accentText;
-  color: var(--theme-staking-progress-label-light);
-  transform: translateX(-8px);
+          .progressLabelWhite {
+            @extend %accentText;
+            color: var(--theme-staking-progress-label-light);
+            transform: translateX(-8px);
+          }
+        }
+      }
+    }
+  }
 }