diff --git a/apps/wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx b/apps/wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx index 6bf1b2d299..fbadd562e5 100644 --- a/apps/wallet-mobile/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.tsx +++ b/apps/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(null) @@ -49,15 +48,7 @@ export const DarkThemeAnnouncement = () => { {strings.description} - - 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} - /> - + {strings.changeTheme} @@ -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 ( + + + + {isDark && Platform.OS === 'ios' && } + + ) +} + export const darkThemeAnnouncementShownKey = 'dark-theme-announcement-shown-key' export const useShowDarkThemeAnnouncementScreen = ( options: UseQueryOptions = {}, @@ -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/apps/wallet-mobile/translations/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json b/apps/wallet-mobile/translations/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json index 6d73a0393a..615e02fc6a 100644 --- a/apps/wallet-mobile/translations/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json +++ b/apps/wallet-mobile/translations/messages/src/features/Initialization/DarkThemeAnnouncement/DarkThemeAnnouncement.json @@ -4,14 +4,14 @@ "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 } }, { @@ -19,14 +19,14 @@ "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 } }, { @@ -34,14 +34,14 @@ "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 } }, { @@ -49,14 +49,14 @@ "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 } } ] \ No newline at end of file