fix(common): styling minors (#3564)

Signed-off-by: banklesss <[email protected]>
Emurgo · Aug 28, 2024 · 5207d85 · 5207d85
1 parent 37a4a3c
commit 5207d85
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 4 deletions.
diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -88,6 +88,7 @@ export const Button = (props: ButtonProps) => {
             outlineOnLight && styles.textOutlineOnLight,
             outlineOnLight && shelleyTheme && styles.textShelleyOutlineOnLight,
             outlineShelley && styles.textOutlineShelley,
+            props.disabled && styles.buttonDisabledText,
             textStyles,
           ]}
         >
@@ -154,6 +155,9 @@ const useStyles = () => {
     buttonDisabled: {
       opacity: 0.5,
     },
+    buttonDisabledText: {
+      color: color.text_gray_min,
+    },
     shelleyTheme: {
       backgroundColor: color.primary_c500,
     },

diff --git a/...bile/src/features/Exchange/useCases/CreateExchangeOrderScreen/LoadingLink/ErrorScreen.tsx b/...bile/src/features/Exchange/useCases/CreateExchangeOrderScreen/LoadingLink/ErrorScreen.tsx
@@ -34,7 +34,7 @@ export const ErrorScreen = () => {
 }
 
 const useStyles = () => {
-  const {atoms} = useTheme()
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     root: {
@@ -45,6 +45,7 @@ const useStyles = () => {
     text: {
       ...atoms.heading_3_medium,
       ...atoms.text_center,
+      color: color.text_gray_max,
       maxWidth: 340,
     },
     button: {

diff --git a/...le/src/features/Exchange/useCases/CreateExchangeOrderScreen/LoadingLink/LoadingScreen.tsx b/...le/src/features/Exchange/useCases/CreateExchangeOrderScreen/LoadingLink/LoadingScreen.tsx
@@ -21,7 +21,7 @@ export const LoadingLinkScreen = () => {
 }
 
 const useStyles = () => {
-  const {atoms} = useTheme()
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     root: {
@@ -32,6 +32,7 @@ const useStyles = () => {
     text: {
       ...atoms.heading_3_medium,
       ...atoms.text_center,
+      color: color.text_gray_max,
       maxWidth: 340,
     },
   })

diff --git a/packages/theme/src/themed-palettes/black.ts b/packages/theme/src/themed-palettes/black.ts
@@ -12,9 +12,10 @@ export const black: ThemedPalette = {
   text_primary_low: darkPalette.primary_c300, // disabled, buttons, links
   text_primary_on: darkPalette.white_static, // primary color surfaces
   text_gray_max: darkPalette.gray_cmax, // hover and pressed
+  text_gray_min: darkPalette.gray_cmin, // disabled text
   text_gray_normal: darkPalette.gray_c900, // draws attention
   text_gray_medium: darkPalette.gray_c600, // accent or additional text
-  text_gray_low: darkPalette.gray_c400, // disabled text
+  text_gray_low: darkPalette.gray_c400, // accent or additional text
   text_error: darkPalette.sys_magenta_c500, // error messages
   text_warning: darkPalette.sys_orange_c500, // warning messages
   text_success: darkPalette.secondary_c500, // success messages

diff --git a/packages/theme/src/themed-palettes/light.ts b/packages/theme/src/themed-palettes/light.ts
@@ -12,9 +12,10 @@ export const light: ThemedPalette = {
   text_primary_low: lightPalette.primary_c300, // disabled, buttons, links
   text_primary_on: lightPalette.white_static, // primary color surfaces
   text_gray_max: lightPalette.gray_cmax, // hover and pressed
+  text_gray_min: lightPalette.gray_cmin, // disabled text
   text_gray_normal: lightPalette.gray_c900, // draws attention
   text_gray_medium: lightPalette.gray_c600, // accent or additional text
-  text_gray_low: lightPalette.gray_c400, // disabled text
+  text_gray_low: lightPalette.gray_c400, // accent or additional text
   text_error: lightPalette.sys_magenta_c500, // error messages
   text_warning: lightPalette.sys_orange_c500, // warning messages
   text_success: lightPalette.secondary_c500, // success messages

diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
@@ -86,6 +86,7 @@ export type ThemedPalette = BasePalette & {
   text_primary_low: HexColor
   text_primary_on: HexColor
   text_gray_max: HexColor
+  text_gray_min: HexColor
   text_gray_normal: HexColor
   text_gray_medium: HexColor
   text_gray_low: HexColor