[DDW-932] Update color of secondary text action in redeem rewards dialogs (#2861)

Co-authored-by: Daniel Main <[email protected]>

Author: szymonmaslowski

CHANGELOG.md

@@ -12,8 +12,9 @@
 ### Fixes
 
 - Fixed behaviour of wallet settings option of the app menu ([PR 2838](https://github.com/input-output-hk/daedalus/pull/2838))
+- Fixed styling of ITN rewards feature ([PR 2861](https://github.com/input-output-hk/daedalus/pull/2861))
 - Fixed available disk space takes a long time to show ([PR 2849](https://github.com/input-output-hk/daedalus/pull/2849))
-
+  
 ### Chores
 
 - Migrated codebase from javascript to typescript ([PR 2843](https://github.com/input-output-hk/daedalus/pull/2843))

source/renderer/app/components/widgets/DialogFullSizeOverride.scss

@@ -94,15 +94,13 @@
     .SimpleInput_input,
     .SimpleInput_input::placeholder,
     .SimpleInput_input:focus,
-    .SimpleInput_input:hover,
-    .SimpleLink_root {
+    .SimpleInput_input:hover {
       color: var(--theme-dialog-fullsize-text-color);
     }
 
     // Text color highlight
     .SimpleAutocomplete_autocompleteContent input,
-    .SimpleOptions_option,
-    .SimpleLink_root {
+    .SimpleOptions_option {
       color: var(--theme-dialog-fullsize-text-highlight-color);
     }
 
@@ -113,24 +111,31 @@
     .SimpleInput_customValueWrapper .SimpleInput_input,
     .SimpleInput_input:focus:not(.SimpleInput_errored),
     .SimpleInput_input:hover:not(.SimpleInput_errored),
-    .SimpleLink_root,
     .SimpleOptions_option:after {
       background-color: transparent !important;
       border-color: var(--theme-dialog-fullsize-text-color) !important;
     }
 
     .SimpleLink_root {
-      color: var(--theme-dialog-fullsize-text-highlight-color);
-      opacity: 0.8;
+      --opacity: 0.8;
+      --main-color: rgba(
+        var(--theme-dialog-fullsize-secondary-text-action-color),
+        1
+      );
+
+      border-color: rgba(
+        var(--theme-dialog-fullsize-secondary-text-action-color),
+        0.75
+      );
+      color: var(--main-color);
+      opacity: var(--opacity);
 
       &:hover {
-        opacity: 1;
+        --opacity: 1;
       }
 
       &:after {
-        background-color: var(
-          --theme-dialog-fullsize-text-highlight-color
-        ) !important;
+        background-color: var(--main-color);
       }
     }
 

source/renderer/app/themes/daedalus/cardano.ts

@@ -294,6 +294,7 @@ export const CARDANO_THEME_OUTPUT = {
     '--theme-dialog-fullsize-text-color': 'rgba(255, 255, 255, 0.7)',
     '--theme-dialog-fullsize-text-highlight-color': '#ffffff',
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
+    '--theme-dialog-fullsize-secondary-text-action-color': '255, 255, 255',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/dark-blue.ts

@@ -295,6 +295,7 @@ export const DARK_BLUE_THEME_OUTPUT = {
     '--theme-dialog-fullsize-text-color': 'rgba(255, 255, 255, 0.7)',
     '--theme-dialog-fullsize-text-highlight-color': '#ffffff',
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
+    '--theme-dialog-fullsize-secondary-text-action-color': '233, 244, 254',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/dark-cardano.ts

@@ -279,6 +279,7 @@ export const DARK_CARDANO_THEME_OUTPUT = {
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
     '--theme-dialog-fullsize-button-label-color': '#000000',
     '--theme-dialog-fullsize-button-label-color-hover': '#000000',
+    '--theme-dialog-fullsize-secondary-text-action-color': '255, 255, 255',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/flight-candidate.ts

@@ -279,6 +279,7 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
     '--theme-dialog-fullsize-text-color': 'rgba(255, 255, 255, 0.7)',
     '--theme-dialog-fullsize-text-highlight-color': '#ffffff',
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
+    '--theme-dialog-fullsize-secondary-text-action-color': '255, 255, 255',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/incentivized-testnet.ts

@@ -280,6 +280,7 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = {
     '--theme-dialog-fullsize-text-color': 'rgba(255, 255, 255, 0.7)',
     '--theme-dialog-fullsize-text-highlight-color': '#ffffff',
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
+    '--theme-dialog-fullsize-secondary-text-action-color': '255, 255, 255',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/light-blue.ts

@@ -292,6 +292,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
     '--theme-dialog-fullsize-text-color': 'rgba(255, 255, 255, 0.7)',
     '--theme-dialog-fullsize-text-highlight-color': '#ffffff',
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
+    '--theme-dialog-fullsize-secondary-text-action-color': '250, 251, 252',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/shelley-testnet.ts

@@ -279,6 +279,7 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = {
     '--theme-dialog-fullsize-title-text-color': '#ffffff',
     '--theme-dialog-fullsize-field-background-color':
       'rgba(255, 255, 255, 0.07)',
+    '--theme-dialog-fullsize-secondary-text-action-color': '255, 255, 255',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',

source/renderer/app/themes/daedalus/white.ts

@@ -280,6 +280,7 @@ export const WHITE_THEME_OUTPUT = {
     '--theme-dialog-fullsize-button-label-color': '#29b595',
     '--theme-dialog-fullsize-button-label-color-hover': '#fff',
     '--theme-dialog-fullsize-field-background-color': 'rgba(45, 45, 45, 0.07)',
+    '--theme-dialog-fullsize-secondary-text-action-color': '45, 45, 45',
   },
   errors: {
     '--theme-color-error': '#ea4c5b',