[DDW-291] Add pop over config to themes

input-output-hk · Oct 28, 2020 · 742196e · 742196e
1 parent 8ce8d6c
commit 742196e
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 4 deletions.
diff --git a/source/renderer/app/components/loading/syncing-connecting/StatusIcons.js b/source/renderer/app/components/loading/syncing-connecting/StatusIcons.js
@@ -245,8 +245,6 @@ export default class StatusIcons extends Component<Props> {
   getIconWithPopover = (icon: string, paramName: string) => (
     <PopOver
       themeVariables={{
-        '--rp-pop-over-bg-color':
-          'var(--theme-loading-status-icons-tooltip-color)',
         '--rp-pop-over-border-radius': '5px',
         '--rp-bubble-padding': '6px 12px 7px',
       }}

diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js
@@ -1071,6 +1071,10 @@ export const CARDANO_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#ffffff',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(0,0,0,0.9)',
+    '--rp-pop-over-text-color': '#ffffff',
+  },
 };
 
 const CARDANO_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js
@@ -1076,6 +1076,10 @@ export const DARK_BLUE_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#fafbfc',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': '',
+    '--rp-pop-over-text-color': '',
+  },
 };
 
 const DARK_BLUE_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js
@@ -1057,6 +1057,10 @@ export const DARK_CARDANO_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#ffffff',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(63,64,79,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const DARK_CARDANO_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/flight-candidate.js b/source/renderer/app/themes/daedalus/flight-candidate.js
@@ -1057,6 +1057,10 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#ffffff',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(63,64,79,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const FLIGHT_CANDIDATE_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.js b/source/renderer/app/themes/daedalus/incentivized-testnet.js
@@ -1060,6 +1060,10 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#ffffff',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(63,64,79,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const INCENTIVIZED_TESTNET_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js
@@ -676,7 +676,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
     '--rp-textarea-text-color': '#5e6066',
   },
   rpTooltip: {
-    '--rp-tooltip-bg-color': '#062148',
+    '--rp-tooltip-bg-color': '#5e6066',
     '--rp-tooltip-text-color': '#fafbfc',
   },
   scrollbar: {
@@ -1067,6 +1067,10 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#fafbfc',
     '--theme-news-overlay-update-button-border-color': '#fafbfc',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(94,96,102,0.9)',
+    '--rp-pop-over-text-color': '#fafbfc',
+  },
 };
 
 const LIGHT_BLUE_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.js b/source/renderer/app/themes/daedalus/shelley-testnet.js
@@ -1057,6 +1057,10 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#ffffff',
     '--theme-news-overlay-update-button-border-color': '#ffffff',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(63,64,79,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const SHELLEY_TESTNET_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js
@@ -1059,6 +1059,10 @@ export const WHITE_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#29b595',
     '--theme-news-overlay-update-button-border-color': '#29b595',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(45,45,45,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const WHITE_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js
@@ -1053,6 +1053,10 @@ export const YELLOW_THEME_OUTPUT = {
     '--theme-news-overlay-update-button-background-color-hover': '#2d2d2d',
     '--theme-news-overlay-update-button-border-color': '#2d2d2d',
   },
+  rpPopOver: {
+    '--rp-pop-over-bg-color': 'rgba(45,45,45,0.9)',
+    '--rp-pop-over-text-color': 'white',
+  },
 };
 
 const YELLOW_THEME_PARAMS: CreateThemeParams = {

diff --git a/source/renderer/app/themes/overrides/PopOverOverrides.scss b/source/renderer/app/themes/overrides/PopOverOverrides.scss
@@ -1 +1,2 @@
-.root {}
+.root {
+}
diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js
@@ -154,6 +154,10 @@ export const createReactPolymorphTheme = (
       '--rp-options-border-color': `${border}`,
       '--rp-options-shadow': 'none',
     },
+    rpPopOver: {
+      '--rp-pop-over-bg-color': '',
+      '--rp-pop-over-text-color': '',
+    },
     rpRadio: {
       '--rp-radio-border': `2px solid ${background.secondary.regular}`,
       '--rp-radio-border-color': `${background.secondary.regular}`,