[DDW-776] Fix wrong styling of the Stake Pool in the Dark Blue theme (#…

…1484) * DDW-776 Fix wrong styling of the Stake Pool in the Dark Blue theme * DDW-776 CHANGELOG * DDW-776 missing border for big pool * [DDW-776] Stake pool thumb colors improvements * [DDW-776] Apply new stake pool thumb colors to selection box
input-output-hk · Jul 30, 2019 · 4ce4874 · 4ce4874
1 parent 175c2b6
commit 4ce4874
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,7 +38,7 @@ Changelog
   - Implemented "Staking" screens navigation ([PR 1395](https://github.com/input-output-hk/daedalus/pull/1395), [PR 1400](https://github.com/input-output-hk/daedalus/pull/1400), [PR 1461](https://github.com/input-output-hk/daedalus/pull/1461))
   - Implemented "Delegation center" screen UI ([PR 1440](https://github.com/input-output-hk/daedalus/pull/1440), [PR 1463](https://github.com/input-output-hk/daedalus/pull/1463))
   - Implemented "Delegation setup" wizard UI ([PR 1416](https://github.com/input-output-hk/daedalus/pull/1416)), [PR 1430](https://github.com/input-output-hk/daedalus/pull/1430), [PR 1439](https://github.com/input-output-hk/daedalus/pull/1439), [PR 1442](https://github.com/input-output-hk/daedalus/pull/1442))
-  - Implemented "Stake pools" screen UI ([PR 1397](https://github.com/input-output-hk/daedalus/pull/1397), [PR 1412](https://github.com/input-output-hk/daedalus/pull/1412), [PR 1420](https://github.com/input-output-hk/daedalus/pull/1420), [PR 1429](https://github.com/input-output-hk/daedalus/pull/1429), [PR 1431](https://github.com/input-output-hk/daedalus/pull/1431))
+  - Implemented "Stake pools" screen UI ([PR 1397](https://github.com/input-output-hk/daedalus/pull/1397), [PR 1412](https://github.com/input-output-hk/daedalus/pull/1412), [PR 1420](https://github.com/input-output-hk/daedalus/pull/1420), [PR 1429](https://github.com/input-output-hk/daedalus/pull/1429), [PR 1431](https://github.com/input-output-hk/daedalus/pull/1431), [PR 1484](https://github.com/input-output-hk/daedalus/pull/1484))
   - Implemented "Rewards" screen UI ([PR 1403](https://github.com/input-output-hk/daedalus/pull/1403))
   - Implemented "Epochs" screen UI ([PR 1418](https://github.com/input-output-hk/daedalus/pull/1418))
   - Implemented "Info" screen UI ([PR 1394](https://github.com/input-output-hk/daedalus/pull/1394))

diff --git a/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss b/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
@@ -7,6 +7,13 @@
       margin-bottom: 0;
     }
 
+    .StakePoolThumbnail_component {
+      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 {
       color: var(--theme-delegation-steps-choose-wallet-steps-indicator-color);
     }
@@ -40,7 +47,8 @@
 
       .selectedPoolBlock {
         background-color: transparent;
-        border: 2px solid var(--theme-staking-stake-pool-border-color);
+        border: 2px solid
+          var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
         border-style: dashed;
         border-radius: 5.8px;
         height: 103px;
@@ -74,7 +82,8 @@
           background-color: var(
             --theme-staking-stake-pool-selected-background-color
           );
-          border: 2px solid var(--theme-staking-stake-pool-border-color);
+          border: 2px solid
+            var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
 
           .label {
             color: var(

diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js
@@ -159,6 +159,9 @@ export const CARDANO_THEME_CONFIG = {
     '--theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color':
       '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color':
+      '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color': '#c6cdd6',
     '--theme-delegation-steps-choose-stake-pool-title-color':
       'rgba(94, 96, 102, 0.8)',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':

diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js
@@ -159,6 +159,10 @@ export const DARK_BLUE_THEME_CONFIG = {
       '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-slug-color': '#536370',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color':
+      '#263345',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color':
+      'rgba(102, 122, 138, 0.2)',
     '--theme-delegation-steps-choose-stake-pool-title-color':
       'rgba(233, 244, 254, 0.8)',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':

diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js
@@ -290,6 +290,10 @@ export const DARK_CARDANO_THEME_CONFIG = {
     '--theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color':
       '#ffffff',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#ffffff',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color':
+      'rgba(42, 43, 60, 1)',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color':
+      'rgba(255, 255, 255, 0.2)',
     '--theme-delegation-steps-choose-stake-pool-title-color': '#ffffffcc',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':
       '#ffffffe6',

diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js
@@ -158,6 +158,9 @@ export const LIGHT_BLUE_THEME_CONFIG = {
     '--theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color':
       '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color':
+      '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color': '#c6cdd6',
     '--theme-delegation-steps-choose-stake-pool-title-color':
       'rgba(94, 96, 102, 0.8)',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':

diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js
@@ -286,6 +286,9 @@ export const WHITE_THEME_CONFIG = {
     '--theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color':
       '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color': '#fff',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color':
+      'rgba(45, 45, 45, 0.1)',
     '--theme-delegation-steps-choose-stake-pool-title-color': '#2d2d2dcc',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':
       '#2d2d2de6',

diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js
@@ -290,6 +290,8 @@ export const YELLOW_THEME_CONFIG = {
     '--theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color':
       '#fafbfc',
     '--theme-delegation-steps-choose-stake-pool-selected-slug-color': '#fafbfc',
+    '--theme-delegation-steps-choose-stake-pool-thumb-background-color': '#fff',
+    '--theme-delegation-steps-choose-stake-pool-thumb-border-color': '#e1dac6',
     '--theme-delegation-steps-choose-stake-pool-title-color': '#2d2d2dcc',
     '--theme-delegation-steps-choose-stake-pool-tooltip-arrow-color':
       '#2d2d2de6',

diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js
@@ -448,6 +448,12 @@ export const createDaedalusComponentsTheme = (
       '--theme-delegation-steps-choose-stake-pool-selected-slug-color': `${
         text.secondary
       }`,
+      '--theme-delegation-steps-choose-stake-pool-thumb-background-color': `${
+        background.primary.lightest
+      }`,
+      '--theme-delegation-steps-choose-stake-pool-thumb-border-color': `${chroma(
+        border
+      ).alpha(0.2)}`,
       '--theme-delegation-steps-choose-stake-pool-title-color': `${chroma(
         text.primary
       ).alpha(0.8)}`,