feat: Change button color to black (#5401)

### Description - Change primary button color to black - Set opacity at 25% when disabled - Set opacity of GRAY_WITH_BORDER to 50% when disabled ### Test plan Updated unit tests, manual tests: ![token-details](https://github.com/valora-inc/wallet/assets/140328381/52e0bb80-1011-45ef-b7e7-361c0de161f6) https://github.com/valora-inc/wallet/assets/140328381/5fdf0e9c-fef7-4c9b-8608-48354a2ca6c2 https://github.com/valora-inc/wallet/assets/140328381/6afe33f8-7751-42c0-8fce-e13192324e3a https://github.com/valora-inc/wallet/assets/140328381/2dd9d319-cf81-40c4-b104-bbe1544788cc ### Related issues - N/A ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [X] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · May 16, 2024 · a76f334 · a76f334
1 parent db7459a
commit a76f334
Show file tree

Hide file tree

Showing 20 changed files with 63 additions and 76 deletions.
diff --git a/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap b/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
@@ -555,7 +555,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
                 "color": "#2E3338",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }

diff --git a/src/account/__snapshots__/Education.test.tsx.snap b/src/account/__snapshots__/Education.test.tsx.snap
@@ -241,12 +241,12 @@ exports[`Education renders correctly 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -264,7 +264,7 @@ exports[`Education renders correctly 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }

diff --git a/src/account/__snapshots__/GoldEducation.test.tsx.snap b/src/account/__snapshots__/GoldEducation.test.tsx.snap
@@ -555,7 +555,7 @@ exports[`renders correctly 1`] = `
                 "color": "#2E3338",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }

diff --git a/src/account/__snapshots__/Persona.test.tsx.snap b/src/account/__snapshots__/Persona.test.tsx.snap
@@ -61,12 +61,12 @@ exports[`Persona renders correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#1AB77580",
+            "backgroundColor": "#2E3338",
             "flexDirection": "row",
             "height": 48,
             "justifyContent": "center",
             "minWidth": 120,
-            "opacity": undefined,
+            "opacity": 0.25,
             "paddingHorizontal": 24,
             "paddingVertical": 5,
           },
@@ -82,7 +82,7 @@ exports[`Persona renders correctly 1`] = `
             "color": "#FFFFFF",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
-            "lineHeight": 22,
+            "lineHeight": 24,
             "marginLeft": 0,
             "marginRight": 0,
           }

diff --git a/src/account/__snapshots__/Profile.test.tsx.snap b/src/account/__snapshots__/Profile.test.tsx.snap
@@ -308,12 +308,12 @@ exports[`Profile renders correctly 1`] = `
                 [
                   {
                     "alignItems": "center",
-                    "backgroundColor": "#1AB775",
+                    "backgroundColor": "#2E3338",
                     "flexDirection": "row",
                     "height": 48,
                     "justifyContent": "center",
                     "minWidth": 120,
-                    "opacity": undefined,
+                    "opacity": 1,
                     "paddingHorizontal": 24,
                     "paddingVertical": 5,
                   },
@@ -329,7 +329,7 @@ exports[`Profile renders correctly 1`] = `
                     "color": "#FFFFFF",
                     "fontFamily": "Inter-SemiBold",
                     "fontSize": 16,
-                    "lineHeight": 22,
+                    "lineHeight": 24,
                     "marginLeft": 0,
                     "marginRight": 0,
                   }

diff --git a/src/app/MultichainBeta.tsx b/src/app/MultichainBeta.tsx
@@ -53,7 +53,6 @@ function MultichainBeta() {
         <View style={styles.ctaContainer}>
           <Button
             style={styles.cta}
-            fontStyle={typeScale.labelSemiBoldMedium}
             touchableStyle={styles.ctaTouchable}
             size={BtnSizes.FULL}
             text={t('multichainBeta.primaryCta')}
@@ -64,7 +63,6 @@ function MultichainBeta() {
           />
           <Button
             style={styles.cta}
-            fontStyle={typeScale.labelSemiBoldMedium}
             touchableStyle={styles.ctaTouchable}
             type={BtnTypes.SECONDARY_WHITE_BG}
             size={BtnSizes.FULL}

diff --git a/src/app/__snapshots__/Debug.test.tsx.snap b/src/app/__snapshots__/Debug.test.tsx.snap
@@ -147,12 +147,12 @@ exports[`Debug renders correctly 1`] = `
           [
             {
               "alignItems": "center",
-              "backgroundColor": "#1AB775",
+              "backgroundColor": "#2E3338",
               "flexDirection": "row",
               "height": 48,
               "justifyContent": "center",
               "minWidth": 120,
-              "opacity": undefined,
+              "opacity": 1,
               "paddingHorizontal": 24,
               "paddingVertical": 5,
             },
@@ -167,7 +167,7 @@ exports[`Debug renders correctly 1`] = `
               "color": "#FFFFFF",
               "fontFamily": "Inter-SemiBold",
               "fontSize": 16,
-              "lineHeight": 22,
+              "lineHeight": 24,
               "marginLeft": 0,
               "marginRight": 0,
             }

diff --git a/src/app/__snapshots__/ErrorScreen.test.tsx.snap b/src/app/__snapshots__/ErrorScreen.test.tsx.snap
@@ -143,12 +143,12 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -164,7 +164,7 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }
@@ -322,12 +322,12 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -343,7 +343,7 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }

diff --git a/src/backup/__snapshots__/BackupPhrase.test.tsx.snap b/src/backup/__snapshots__/BackupPhrase.test.tsx.snap
@@ -682,7 +682,7 @@ exports[`BackupPhrase renders correctly with backup not completed 1`] = `
               "color": "#666666",
               "fontFamily": "Inter-SemiBold",
               "fontSize": 16,
-              "lineHeight": 22,
+              "lineHeight": 24,
               "marginLeft": 0,
               "marginRight": 0,
             }

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,17 +1,9 @@
 import { debounce } from 'lodash'
 import React, { ReactNode, useCallback } from 'react'
-import {
-  ActivityIndicator,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
+import { ActivityIndicator, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import Touchable from 'src/components/Touchable'
 import colors, { Colors } from 'src/styles/colors'
-import fontStyles from 'src/styles/fonts'
+import { typeScale } from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
 
 const BUTTON_TAP_DEBOUNCE_TIME = 300 // milliseconds
@@ -51,7 +43,6 @@ export interface ButtonProps {
   testID?: string
   touchableStyle?: StyleProp<ViewStyle>
   iconMargin?: number
-  fontStyle?: TextStyle
 }
 
 export default React.memo(function Button(props: ButtonProps) {
@@ -70,7 +61,6 @@ export default React.memo(function Button(props: ButtonProps) {
     loadingColor,
     touchableStyle,
     iconMargin = 4,
-    fontStyle = fontStyles.regular600,
   } = props
 
   // Debounce onPress event so that it is called once on trigger and
@@ -117,7 +107,7 @@ export default React.memo(function Button(props: ButtonProps) {
                 maxFontSizeMultiplier={1}
                 accessibilityLabel={accessibilityLabel}
                 style={{
-                  ...fontStyle, // this has to be before color because the legacy font styles default to colors.dark, which will end up overriding the button type based colors
+                  ...styles.fontStyle,
                   color: textColor,
                   marginLeft: icon && iconPositionLeft ? iconMargin : 0,
                   marginRight: icon && !iconPositionLeft ? iconMargin : 0,
@@ -159,6 +149,9 @@ const styles = StyleSheet.create({
     height: 48,
     flexGrow: 1,
   },
+  fontStyle: {
+    ...typeScale.labelSemiBoldMedium,
+  },
 })
 
 function getColors(type: BtnTypes, disabled: boolean | undefined) {
@@ -169,7 +162,8 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
   switch (type) {
     case BtnTypes.PRIMARY:
       textColor = colors.white
-      backgroundColor = disabled ? colors.primaryDisabled : colors.primary
+      backgroundColor = colors.black
+      opacity = disabled ? 0.25 : 1.0
       break
     case BtnTypes.SECONDARY:
       textColor = disabled ? colors.gray4 : colors.black
@@ -193,6 +187,7 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
       textColor = colors.black
       backgroundColor = colors.gray1
       borderColor = colors.gray2
+      opacity = disabled ? 0.5 : 1.0
       break
   }
 

diff --git a/src/components/__snapshots__/Button.test.tsx.snap b/src/components/__snapshots__/Button.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Button when type is SECONDARY renders 1`] = `
             "color": "#2E3338",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
-            "lineHeight": 22,
+            "lineHeight": 24,
             "marginLeft": 0,
             "marginRight": 0,
           }
@@ -155,12 +155,12 @@ exports[`Button when type not given defaults to primary 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#1AB775",
+            "backgroundColor": "#2E3338",
             "flexDirection": "row",
             "height": 48,
             "justifyContent": "center",
             "minWidth": 120,
-            "opacity": undefined,
+            "opacity": 1,
             "paddingHorizontal": 24,
             "paddingVertical": 5,
           },
@@ -175,7 +175,7 @@ exports[`Button when type not given defaults to primary 1`] = `
             "color": "#FFFFFF",
             "fontFamily": "Inter-SemiBold",
             "fontSize": 16,
-            "lineHeight": 22,
+            "lineHeight": 24,
             "marginLeft": 0,
             "marginRight": 0,
           }

diff --git a/src/components/__snapshots__/FullscreenCTA.test.tsx.snap b/src/components/__snapshots__/FullscreenCTA.test.tsx.snap
@@ -143,12 +143,12 @@ exports[`FullscreenCTA renders correctly 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -164,7 +164,7 @@ exports[`FullscreenCTA renders correctly 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }

diff --git a/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap b/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap
@@ -135,12 +135,12 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -157,7 +157,7 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }
@@ -307,12 +307,12 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
             [
               {
                 "alignItems": "center",
-                "backgroundColor": "#1AB775",
+                "backgroundColor": "#2E3338",
                 "flexDirection": "row",
                 "height": 48,
                 "justifyContent": "center",
                 "minWidth": 120,
-                "opacity": undefined,
+                "opacity": 1,
                 "paddingHorizontal": 24,
                 "paddingVertical": 5,
               },
@@ -329,7 +329,7 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-SemiBold",
                 "fontSize": 16,
-                "lineHeight": 22,
+                "lineHeight": 24,
                 "marginLeft": 0,
                 "marginRight": 0,
               }