Emurgo · stackchain · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/apps/wallet-mobile/src/components/Button/Button.tsx b/apps/wallet-mobile/src/components/Button/Button.tsx
@@ -88,7 +88,7 @@ export const Button = (props: ButtonProps) => {
             outlineOnLight && styles.textOutlineOnLight,
             outlineOnLight && shelleyTheme && styles.textShelleyOutlineOnLight,
             outlineShelley && styles.textOutlineShelley,
-            props.disabled && styles.buttonDisabledText,
+            props.disabled && !outlineOnLight && styles.buttonDisabledText,
             textStyles,
           ]}
         >

diff --git a/apps/wallet-mobile/src/components/TextInput/TextInput.tsx b/apps/wallet-mobile/src/components/TextInput/TextInput.tsx
@@ -73,6 +73,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: Forwarded
   const [showPassword, setShowPassword] = React.useState(false)
   const [errorTextEnabled, setErrorTextEnabled] = React.useState(errorOnMount)
   const {styles, colors} = useStyles()
+  const {isDark} = useTheme()
   useDebounced(
     React.useCallback(() => setErrorTextEnabled(true), []),
     value,
@@ -103,6 +104,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: Forwarded
         autoCorrect={false}
         autoComplete={autoComplete}
         autoCapitalize="none"
+        keyboardAppearance={isDark ? 'dark' : 'light'} // ios feature
         autoFocus={selectTextOnAutoFocus || autoFocus}
         onFocus={(event) => {
           // selectTextOnFocus + autoFocus doesn't work as expected
@@ -244,7 +246,7 @@ const useStyles = () => {
 
   const colors = {
     ...color,
-    background: color.gray_min,
+    background: color.bg_color_max,
     gray: color.gray_400,
     textInput: color.gray_600,
     actionGray: color.gray_500,

diff --git a/apps/wallet-mobile/src/components/TokenIcon/TokenIcon.tsx b/apps/wallet-mobile/src/components/TokenIcon/TokenIcon.tsx
@@ -86,7 +86,7 @@ const useStyles = () => {
   const {color} = useTheme()
   const styles = StyleSheet.create({
     primary: {
-      backgroundColor: color.primary_600,
+      backgroundColor: color.primary_500,
     },
     icon: {
       backgroundColor: 'transparent',

diff --git a/apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowserSearchToolbar.tsx b/apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowserSearchToolbar.tsx
@@ -14,6 +14,7 @@ type Props = {
 export const BrowserSearchToolbar = ({onBack, onSearchChange, onSearchSubmit, searchValue}: Props) => {
   const {styles} = useStyles()
   const {track} = useMetrics()
+  const {isDark} = useTheme()
 
   React.useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | undefined
@@ -46,6 +47,7 @@ export const BrowserSearchToolbar = ({onBack, onSearchChange, onSearchSubmit, se
           style={styles.searchInputStyle}
           onSubmitEditing={onSearchSubmit}
           enablesReturnKeyAutomatically={searchValue.length === 0}
+          keyboardAppearance={isDark ? 'dark' : 'light'}
         />
       </View>
     </View>

diff --git a/apps/wallet-mobile/src/features/Initialization/InitialScreen/InitialScreen.tsx b/apps/wallet-mobile/src/features/Initialization/InitialScreen/InitialScreen.tsx
@@ -92,12 +92,19 @@ export const InitialScreen = () => {
 
 const LanguagePickRow = ({onPress}: {onPress: () => void}) => {
   const {styles, color} = useStyles()
+  const {isDark} = useTheme()
   const {languageCode, supportedLanguages} = useLanguage()
   const language = supportedLanguages.find((lang) => lang.code === languageCode) ?? defaultLanguage
 
   return (
     <TouchableOpacity onPress={onPress} testID="dropDownLanguagePicker">
-      <TextInput style={styles.input} value={language.label} pointerEvents="none" editable={false} />
+      <TextInput
+        style={styles.input}
+        value={language.label}
+        pointerEvents="none"
+        editable={false}
+        keyboardAppearance={isDark ? 'dark' : 'light'}
+      />
 
       <View style={styles.inputIcon}>
         <Icon.Chevron size={34} direction="down" color={color.el_gray_medium} />

diff --git a/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx b/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx
@@ -71,7 +71,7 @@ const useStyles = () => {
   const {color} = useTheme()
   const styles = StyleSheet.create({
     primary: {
-      backgroundColor: color.primary_600,
+      backgroundColor: color.primary_500,
     },
     iconMedium: {
       backgroundColor: 'transparent',

diff --git a/apps/wallet-mobile/src/features/Search/SearchContext.tsx b/apps/wallet-mobile/src/features/Search/SearchContext.tsx
@@ -216,7 +216,7 @@ type Props = {
 }
 const InputSearch = ({placeholder}: Props) => {
   const {search, searchChanged} = useSearch()
-  const {color} = useTheme()
+  const {color, isDark} = useTheme()
 
   return (
     <TextInput
@@ -228,6 +228,7 @@ const InputSearch = ({placeholder}: Props) => {
       style={{flex: 1, color: color.el_gray_max}}
       testID="inputSearch"
       placeholderTextColor={color.text_gray_medium}
+      keyboardAppearance={isDark ? 'dark' : 'light'}
     />
   )
 }

diff --git a/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/...et-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
@@ -223,6 +223,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
     const inputRef = React.useRef<RNTextInput>(null)
     const {styles, colors} = useStyles()
     const [word, setWord] = React.useState(selectedWord)
+    const {isDark} = useTheme()
 
     React.useImperativeHandle(
       ref,
@@ -311,6 +312,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
         cursorColor={colors.primary_600} // only works for android
         selectionColor={Platform.OS === 'android' ? colors.gray_100 : 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/...ile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/TextInput/TextInput.tsx b/...ile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/TextInput/TextInput.tsx
@@ -68,6 +68,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For
   const [errorTextEnabled, setErrorTextEnabled] = React.useState(errorOnMount)
   const [isValidWord, setIsValidWord] = React.useState(false)
   const {colors} = useStyles()
+  const {isDark} = useTheme()
 
   useDebounced(
     React.useCallback(() => setErrorTextEnabled(true), []),
@@ -148,6 +149,7 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For
               {...inputProps}
               cursorColor={cursorColor}
               selectionColor={selectionColor}
+              keyboardAppearance={isDark ? 'dark' : 'light'} // ios feature
               style={[
                 style,
                 renderComponentStyle,

diff --git a/apps/wallet-mobile/src/features/Staking/Governance/useCases/ConfirmTx/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Staking/Governance/useCases/ConfirmTx/ConfirmTxScreen.tsx
@@ -11,6 +11,7 @@ import {ConfirmTxWithHwModal} from '../../../../../components/ConfirmTxWithHwMod
 import {ConfirmTxWithOsModal} from '../../../../../components/ConfirmTxWithOsModal'
 import {ConfirmTxWithSpendingPasswordModal} from '../../../../../components/ConfirmTxWithSpendingPasswordModal'
 import {PairedBalance} from '../../../../../components/PairedBalance/PairedBalance'
+import {Space} from '../../../../../components/Space/Space'
 import {useMetrics} from '../../../../../kernel/metrics/metricsManager'
 import {useUnsafeParams} from '../../../../../kernel/navigation'
 import {Amounts} from '../../../../../yoroi-wallets/utils'
@@ -130,6 +131,8 @@ export const ConfirmTxScreen = () => {
 
   return (
     <View style={styles.root}>
+      <Space height="lg" />
+
       <Text style={styles.secondaryText}>{title}</Text>
 
       <Spacer height={4} />
@@ -239,7 +242,7 @@ const useStyles = () => {
     },
     secondaryText: {
       ...atoms.body_2_md_regular,
-      color: color.text_gray_medium,
+      color: color.text_gray_low,
     },
     row: {
       ...atoms.flex_row,

diff --git a/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx b/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx
@@ -40,6 +40,7 @@ export const AmountCard = ({
   const [isFocused, setIsFocused] = React.useState(false)
   const strings = useStrings()
   const {styles, colors} = useStyles()
+  const {isDark} = useTheme()
 
   const noTokenSelected = !touched
   const info = amount?.info
@@ -80,6 +81,7 @@ export const AmountCard = ({
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
               testID={`${testId}-amount-input`}
+              keyboardAppearance={isDark ? 'dark' : 'light'} // ios feature
               {...(!info && {onPressIn: navigateTo})}
             />
           </Pressable>

diff --git a/...obile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/EditPrice/EditPrice.tsx b/...obile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/EditPrice/EditPrice.tsx
@@ -15,6 +15,7 @@ export const EditPrice = () => {
   const strings = useStrings()
   const [isFocused, setIsFocused] = React.useState(false)
   const {styles, colors} = useStyles()
+  const {isDark} = useTheme()
 
   const {orderData} = useSwap()
   const sellTokenInfo = orderData.amounts.sell?.info
@@ -58,6 +59,7 @@ export const EditPrice = () => {
             ref={limitInputRef}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
+            keyboardAppearance={isDark ? 'dark' : 'light'} // ios feature
           />
 
           <View style={[styles.textWrapper, disabled && styles.disabled]}>

diff --git a/apps/wallet-mobile/src/features/WalletManager/illustrations/SupportIllustration.tsx b/apps/wallet-mobile/src/features/WalletManager/illustrations/SupportIllustration.tsx
@@ -1,14 +1,19 @@
 import * as React from 'react'
-import Svg, {Path, SvgProps} from 'react-native-svg'
+import Svg, {Path} from 'react-native-svg'
 
-export const SupportIllustration = (props: SvgProps) => {
+type Props = {
+  color?: string
+  size?: number
+}
+
+export const SupportIllustration = ({color = '#4B6DDE', size = 20}: Props) => {
   return (
-    <Svg width={20} height={21} viewBox="0 0 20 21" fill="none" {...props}>
+    <Svg width={size} height={size} viewBox="0 0 20 21" fill="none">
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.343 4.843A8 8 0 0118 10.5v1h-2a3 3 0 00-3 3v3a3 3 0 003 3h1a3 3 0 003-3v-7a10 10 0 00-20 0v7a3 3 0 003 3h1a3 3 0 003-3v-3a3 3 0 00-3-3H2v-1a8 8 0 012.343-5.657zM2 13.5v4a1 1 0 001 1h1a1 1 0 001-1v-3a1 1 0 00-1-1H2zm16 0h-2a1 1 0 00-1 1v3a1 1 0 001 1h1a1 1 0 001-1v-4z"
-        fill="#4B6DDE"
+        fill={color}
       />
     </Svg>
   )

diff --git a/...features/WalletManager/useCases/SelectWalletFromListScreen/SelectWalletFromListScreen.tsx b/...features/WalletManager/useCases/SelectWalletFromListScreen/SelectWalletFromListScreen.tsx
@@ -105,11 +105,11 @@ const linkToSupportOpenTicket = 'https://emurgohelpdesk.zendesk.com/hc/en-us/req
 const SupportTicketLink = () => {
   const onPress = () => Linking.openURL(linkToSupportOpenTicket)
   const strings = useStrings()
-  const {styles} = useStyles()
+  const {styles, colors} = useStyles()
 
   return (
     <TouchableOpacity style={styles.link} onPress={onPress}>
-      <SupportIllustration />
+      <SupportIllustration color={colors.blue} />
 
       <Space width="sm" />
 
@@ -165,7 +165,8 @@ const useStyles = () => {
       backgroundColor: color.primary_500,
     },
     linkText: {
-      color: color.primary_500,
+      ...atoms.button_2_md,
+      color: color.text_primary_medium,
     },
     link: {
       ...atoms.button_2_md,
@@ -182,6 +183,7 @@ const useStyles = () => {
   })
 
   const colors = {
+    blue: color.text_primary_medium,
     gray: color.gray_600,
     lightGray: color.gray_200,
   }

diff --git a/...-mobile/src/features/WalletManager/useCases/SelectWalletFromListScreen/WalletListItem.tsx b/...-mobile/src/features/WalletManager/useCases/SelectWalletFromListScreen/WalletListItem.tsx
@@ -126,18 +126,32 @@ export const WalletListItem = ({walletMeta, onPress}: Props) => {
               <Space width="md" />
 
               {isSelected && <Icon.Check size={20} color={colors.selected} />}
-
-              <Space width="md" />
             </>
           )}
 
-          {isButtonPressed ? <ChevronRightDarkIllustration /> : <ChevronRightGrayIllustration />}
+          <Space width="xl" />
+
+          <Chevron pressed={isButtonPressed} />
         </TouchableOpacity>
       </View>
     </Swipeable>
   )
 }
 
+const Chevron = ({pressed}: {pressed: boolean}) => {
+  const {styles} = useStyles()
+
+  return (
+    <View style={styles.chevron}>
+      <Space height="sm" />
+
+      {pressed ? <ChevronRightDarkIllustration /> : <ChevronRightGrayIllustration />}
+
+      <Space fill />
+    </View>
+  )
+}
+
 const getImplementationName = (walletMeta: Wallet.Meta) => {
   if (isByron(walletMeta.implementation)) return 'Byron'
   if (isShelley(walletMeta.implementation)) return 'Shelley'
@@ -148,26 +162,26 @@ const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     item: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      flexWrap: 'wrap',
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+      ...atoms.align_center,
+      ...atoms.flex_wrap,
     },
     leftSide: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      ...atoms.flex_row,
+      ...atoms.align_center,
     },
     walletDetails: {
-      justifyContent: 'space-between',
-      flex: 1,
+      ...atoms.justify_between,
+      ...atoms.flex_1,
     },
     walletName: {
+      ...atoms.flex_1,
       ...atoms.body_1_lg_medium,
-      color: color.gray_max,
-      flex: 1,
+      color: color.text_gray_medium,
     },
     walletMeta: {
-      color: color.gray_600,
+      color: color.text_gray_low,
       opacity: 0.5,
     },
     walletMetaPressed: {
@@ -178,13 +192,13 @@ const useStyles = () => {
       opacity: 0.5,
     },
     rightContainer: {
-      justifyContent: 'center',
-      alignItems: 'center',
+      ...atoms.justify_center,
+      ...atoms.align_center,
       width: 100,
     },
     rigthActionsContainer: {
-      justifyContent: 'center',
-      alignItems: 'center',
+      ...atoms.justify_center,
+      ...atoms.align_center,
       ...atoms.px_md,
     },
     actionDangerousText: {
@@ -193,6 +207,10 @@ const useStyles = () => {
       ...atoms.p_sm,
       backgroundColor: color.sys_magenta_100,
     },
+    chevron: {
+      ...atoms.flex_col,
+      ...atoms.align_start,
+    },
   })
 
   const colors = {

diff --git a/apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json b/apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json
@@ -4,29 +4,29 @@
     "defaultMessage": "!!!Select token",
     "file": "src/features/Swap/common/AmountCard/AmountCard.tsx",
     "start": {
-      "line": 132,
+      "line": 134,
       "column": 15,
-      "index": 4163
+      "index": 4269
     },
     "end": {
-      "line": 135,
+      "line": 137,
       "column": 3,
-      "index": 4246
+      "index": 4352
     }
   },
   {
     "id": "swap.swapScreen.currentBalance",
     "defaultMessage": "!!!Current Balance",
     "file": "src/features/Swap/common/AmountCard/AmountCard.tsx",
     "start": {
-      "line": 136,
+      "line": 138,
       "column": 18,
-      "index": 4266
+      "index": 4372
     },
     "end": {
-      "line": 139,
+      "line": 141,
       "column": 3,
-      "index": 4355
+      "index": 4461
     }
   }
 ]