refactor(theming): theme announcement toggle (#3467)

Signed-off-by: banklesss <[email protected]> Co-authored-by: Michal S <[email protected]>
Emurgo · Jul 30, 2024 · 59b9c4a · 59b9c4a
1 parent 5626192
commit 59b9c4a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/...wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx b/...wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx
@@ -2,7 +2,7 @@ import {parseBoolean, useAsyncStorage, useMutationWithInvalidations} from '@yoro
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
-import {Platform, StyleSheet, Switch, View} from 'react-native'
+import {Platform, Pressable, StyleSheet, Switch, View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {useQuery, UseQueryOptions} from 'react-query'
@@ -13,9 +13,8 @@ import {useWalletNavigation} from '../../../kernel/navigation'
 import {ThemeIlustration} from '../illustrations/ThemeIlustration'
 
 export const DarkThemeAnnouncement = () => {
-  const {styles, color} = useStyles()
+  const {styles} = useStyles()
   const strings = useStrings()
-  const {isLight, selectThemeName} = useTheme()
   const {setScreenShown, isLoading: isSetScreenShownLoading} = useSetScreenShown()
 
   const scrollViewRef = React.useRef<ScrollView | null>(null)
@@ -49,15 +48,7 @@ export const DarkThemeAnnouncement = () => {
 
           <Text style={styles.description}>{strings.description}</Text>
 
-          <View style={styles.toggle}>
-            <Switch
-              style={styles.switch}
-              value={isLight === false}
-              onValueChange={() => selectThemeName(isLight === true ? 'default-dark' : 'default-light')}
-              trackColor={{false: color.gray_c100, true: color.gray_c100}}
-              thumbColor={isLight === true ? color.sys_yellow_c500 : color.el_primary_medium}
-            />
-          </View>
+          <Toggle />
 
           <Text style={styles.caption}>{strings.changeTheme}</Text>
         </View>
@@ -70,6 +61,27 @@ export const DarkThemeAnnouncement = () => {
   )
 }
 
+export const Toggle = () => {
+  const {styles, color} = useStyles()
+  const {isLight, isDark, selectThemeName} = useTheme()
+
+  const handleOnValueChange = () => selectThemeName(isLight ? 'default-dark' : 'default-light')
+
+  return (
+    <View style={styles.toggle}>
+      <Switch
+        style={styles.switch}
+        value={!isLight}
+        onValueChange={handleOnValueChange}
+        trackColor={{false: color.gray_c100, true: color.gray_c100}}
+        thumbColor={isLight ? color.sys_yellow_c500 : color.el_primary_medium}
+      />
+
+      {isDark && Platform.OS === 'ios' && <Pressable style={styles.switchCircle} onPress={handleOnValueChange} />}
+    </View>
+  )
+}
+
 export const darkThemeAnnouncementShownKey = 'dark-theme-announcement-shown-key'
 export const useShowDarkThemeAnnouncementScreen = (
   options: UseQueryOptions<boolean, Error, boolean, ['useShowDarkThemeAnnouncementScreen']> = {},
@@ -134,10 +146,20 @@ const useStyles = () => {
     },
     toggle: {
       ...atoms.pb_2xl,
+      position: 'relative',
     },
     switch: {
       transform: [{scaleX: 1.3}, {scaleY: 1.3}],
     },
+    switchCircle: {
+      width: 35,
+      height: 35,
+      top: -2,
+      right: 8,
+      backgroundColor: color.gray_c100,
+      position: 'absolute',
+      borderRadius: 9999,
+    },
   })
 
   return {styles, color}

diff --git a/...ons/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json b/...ons/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json
@@ -4,59 +4,59 @@
     "defaultMessage": "!!!Try Yoroi dark theme",
     "file": "src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx",
     "start": {
-      "line": 157,
+      "line": 179,
       "column": 10,
-      "index": 4639
+      "index": 5060
     },
     "end": {
-      "line": 160,
+      "line": 182,
       "column": 3,
-      "index": 4732
+      "index": 5153
     }
   },
   {
     "id": "walletinit.theme.description",
     "defaultMessage": "!!!Press the theme switcher and dive into the new stylish theme crafted to enhance your Cardano wallet experience",
     "file": "src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx",
     "start": {
-      "line": 161,
+      "line": 183,
       "column": 15,
-      "index": 4749
+      "index": 5170
     },
     "end": {
-      "line": 165,
+      "line": 187,
       "column": 3,
-      "index": 4937
+      "index": 5358
     }
   },
   {
     "id": "walletinit.theme.chanageTheme",
     "defaultMessage": "!!!Anonymous analytics data",
     "file": "src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx",
     "start": {
-      "line": 166,
+      "line": 188,
       "column": 15,
-      "index": 4954
+      "index": 5375
     },
     "end": {
-      "line": 169,
+      "line": 191,
       "column": 3,
-      "index": 5051
+      "index": 5472
     }
   },
   {
     "id": "components.walletinit.walletform.continueButton",
     "defaultMessage": "!!!Continue",
     "file": "src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx",
     "start": {
-      "line": 170,
+      "line": 192,
       "column": 12,
-      "index": 5065
+      "index": 5486
     },
     "end": {
-      "line": 173,
+      "line": 195,
       "column": 3,
-      "index": 5164
+      "index": 5585
     }
   }
 ]