feature(theme): input selected color (#3670)

Emurgo · Oct 2, 2024 · b331af4 · b331af4
1 parent ef59d2c
commit b331af4
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 6 deletions.
diff --git a/apps/wallet-mobile/src/features/Exchange/common/AmountCard/AmountCard.tsx b/apps/wallet-mobile/src/features/Exchange/common/AmountCard/AmountCard.tsx
@@ -196,7 +196,7 @@ const useStyles = () => {
   })
   const colors = {
     placeholder: color.gray_600,
-    focused: color.gray_600,
+    focused: color.input_selected,
     blur: color.gray_900,
   }
   return {styles, colors} as const

diff --git a/...allet-mobile/src/features/Send/useCases/ListAmountsToSend/EditAmount/EditAmountScreen.tsx b/...allet-mobile/src/features/Send/useCases/ListAmountsToSend/EditAmount/EditAmountScreen.tsx
@@ -274,7 +274,7 @@ const useStyles = () => {
   })
   const colors = {
     black: color.gray_max,
-    selected: color.text_gray_medium,
+    selected: color.input_selected,
   }
   return {styles, colors} as const
 }

diff --git a/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
@@ -314,7 +314,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
         }}
         onBlur={handleOnBlur}
         cursorColor={colors.primary_600} // only works for android
-        selectionColor={Platform.OS === 'android' ? colors.gray_100 : undefined} // on ios, selectionColor changes cursor and selection
+        selectionColor={Platform.OS === 'android' ? colors.input_selected : undefined} // on ios, selectionColor changes cursor and selection
         keyboardType={Platform.OS === 'android' ? 'visible-password' : undefined} // to hide keyboard suggestions on android
         keyboardAppearance={isDark ? 'dark' : 'light'} // ios feature
       />

diff --git a/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx b/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx
@@ -227,7 +227,7 @@ const useStyles = () => {
 
   const colors = {
     placeholder: color.gray_600,
-    focused: color.gray_900,
+    focused: color.input_selected,
     blur: color.black_static,
     noSelected: color.gray_400,
     gray: color.gray_max,

diff --git a/...obile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/EditPrice/EditPrice.tsx b/...obile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/EditPrice/EditPrice.tsx
@@ -137,7 +137,7 @@ const useStyles = () => {
     },
   })
   const colors = {
-    cursor: color.text_gray_medium,
+    cursor: color.input_selected,
   }
   return {styles, colors} as const
 }
diff --git a/...s/StartOrderSwapScreen/CreateOrder/EditSlippage/EditSlippageScreen/EditSlippageScreen.tsx b/...s/StartOrderSwapScreen/CreateOrder/EditSlippage/EditSlippageScreen/EditSlippageScreen.tsx
@@ -215,7 +215,7 @@ const useStyles = () => {
 
   const colors = {
     background: color.gray_100,
-    cursor: color.text_gray_medium,
+    cursor: color.input_selected,
   }
 
   return {styles, colors}

diff --git a/packages/theme/src/themed-palettes/black.ts b/packages/theme/src/themed-palettes/black.ts
@@ -30,6 +30,8 @@ export const black: ThemedPalette = {
   el_gray_min: darkPalette.gray_400, // input stroke, disabled state for most components
   el_secondary: darkPalette.secondary_600, // success state
 
+  input_selected: `${darkPalette.primary_200}${opacity._80}`,
+
   mobile_overlay: `${darkPalette.black_static}${opacity._64}`, // mobile bottom sheet overlay
   mobile_bg_blur: `${darkPalette.gray_50}${opacity._80}`, // mobile bottom sheet background
 

diff --git a/packages/theme/src/themed-palettes/light.ts b/packages/theme/src/themed-palettes/light.ts
@@ -30,6 +30,8 @@ export const light: ThemedPalette = {
   el_gray_min: lightPalette.gray_400, // icons, shapes, lines in buttons, chips, tabs, checkboxes, readio, switch
   el_secondary: lightPalette.secondary_400, // success state
 
+  input_selected: `${lightPalette.primary_200}${opacity._80}`,
+
   mobile_overlay: `${lightPalette.black_static}${opacity._40}`, // mobile bottom sheet overlay
   mobile_bg_blur: `${lightPalette.white_static}${opacity._80}`, // mobile bottom sheet background
 

diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
@@ -104,6 +104,8 @@ export type ThemedPalette = BasePalette & {
   el_gray_min: HexColor
   el_secondary: HexColor
 
+  input_selected: HexColor
+
   web_overlay: HexColor
   web_bg_sidebar_active: HexColor
   web_bg_sidebar_inactive: HexColor