feat(suite-native): changing switch visuals to stand out more

trezor · Aug 15, 2024 · 82ab763 · 82ab763
1 parent b150a96
commit 82ab763
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/suite-native/atoms/src/Switch.tsx b/suite-native/atoms/src/Switch.tsx
@@ -9,46 +9,57 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { Color } from '@trezor/theme';
+import { palette } from '@trezor/theme';
 
 import { ACCESSIBILITY_FONTSIZE_MULTIPLIER } from './Text';
 
 type SwitchProps = {
     isChecked: boolean;
     onChange: (value: boolean) => void;
     isDisabled?: boolean; // Functionality of disabled works but styles are not implemented yet (waiting for design)
-    colorChecked?: Color;
-    colorUnchecked?: Color;
 };
 
-const SWITCH_CONTAINER_WIDTH = 44 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
-const SWITCH_CONTAINER_HEIGHT = 24 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+const SWITCH_CONTAINER_BORDER_WIDTH = 1;
+const SWITCH_CONTAINER_WIDTH =
+    44 * ACCESSIBILITY_FONTSIZE_MULTIPLIER + 2 * SWITCH_CONTAINER_BORDER_WIDTH;
+const SWITCH_CONTAINER_HEIGHT =
+    24 * ACCESSIBILITY_FONTSIZE_MULTIPLIER + 2 * SWITCH_CONTAINER_BORDER_WIDTH;
+
 const SWITCH_CIRCLE_SIZE = 20 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const SWITCH_CIRCLE_MARGIN = 2 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const SWITCH_CIRCLE_TRACK_WIDTH =
-    SWITCH_CONTAINER_WIDTH - SWITCH_CIRCLE_SIZE - SWITCH_CIRCLE_MARGIN * 2;
+    SWITCH_CONTAINER_WIDTH -
+    SWITCH_CIRCLE_SIZE -
+    SWITCH_CIRCLE_MARGIN * 2 -
+    SWITCH_CONTAINER_BORDER_WIDTH * 2;
 
-const switchContainerStyle = prepareNativeStyle(utils => ({
-    width: SWITCH_CONTAINER_WIDTH,
+const switchContainerStyle = prepareNativeStyle<{ isChecked: boolean }>((utils, { isChecked }) => ({
     height: SWITCH_CONTAINER_HEIGHT,
+    width: SWITCH_CONTAINER_WIDTH,
     borderRadius: utils.borders.radii.round,
     flexDirection: 'row',
+    borderWidth: SWITCH_CONTAINER_BORDER_WIDTH,
+    borderColor: 'transparent',
+    extend: [
+        {
+            condition: !isChecked,
+            style: {
+                borderColor: utils.colors.borderElevation0,
+            },
+        },
+    ],
 }));
 
 const switchCircleStyle = prepareNativeStyle(utils => ({
     width: SWITCH_CIRCLE_SIZE,
     height: SWITCH_CIRCLE_SIZE,
-    backgroundColor: utils.colors.backgroundSurfaceElevation1,
+    backgroundColor: palette.darkGray1000,
     borderRadius: utils.borders.radii.round,
     margin: SWITCH_CIRCLE_MARGIN,
     alignSelf: 'center',
 }));
 
-const useAnimationStyles = ({
-    isChecked,
-    colorChecked,
-    colorUnchecked,
-}: Pick<SwitchProps, 'isChecked' | 'colorChecked' | 'colorUnchecked'>) => {
+const useAnimationStyles = ({ isChecked }: Pick<SwitchProps, 'isChecked'>) => {
     const trackWidth = !isChecked ? 0 : SWITCH_CIRCLE_TRACK_WIDTH;
     const { utils } = useNativeStyles();
     const translateX = useSharedValue(trackWidth);
@@ -69,10 +80,8 @@ const useAnimationStyles = ({
             translateX.value,
             [0, SWITCH_CIRCLE_TRACK_WIDTH],
             [
-                colorUnchecked
-                    ? utils.colors[colorUnchecked]
-                    : utils.colors.backgroundNeutralDisabled,
-                colorChecked ? utils.colors[colorChecked] : utils.colors.backgroundSecondaryDefault,
+                utils.colors.backgroundNeutralSubtleOnElevationNegative,
+                utils.colors.backgroundPrimaryDefault,
             ],
         ),
     }));
@@ -83,18 +92,11 @@ const useAnimationStyles = ({
     };
 };
 
-export const Switch = ({
-    isChecked,
-    onChange,
-    isDisabled = false,
-    colorChecked,
-    colorUnchecked,
-}: SwitchProps) => {
+export const Switch = ({ isChecked, onChange, isDisabled = false }: SwitchProps) => {
     const { applyStyle } = useNativeStyles();
+
     const { animatedSwitchCircleStyle, animatedSwitchContainerStyle } = useAnimationStyles({
         isChecked,
-        colorChecked,
-        colorUnchecked,
     });
 
     const handlePress = () => {
@@ -104,7 +106,12 @@ export const Switch = ({
 
     return (
         <Pressable onPress={handlePress} accessibilityRole="switch">
-            <Animated.View style={[animatedSwitchContainerStyle, applyStyle(switchContainerStyle)]}>
+            <Animated.View
+                style={[
+                    animatedSwitchContainerStyle,
+                    applyStyle(switchContainerStyle, { isChecked }),
+                ]}
+            >
                 <Animated.View style={[animatedSwitchCircleStyle, applyStyle(switchCircleStyle)]} />
             </Animated.View>
         </Pressable>

diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
@@ -102,12 +102,7 @@ export const NetworkSymbolSwitchItem = ({
             </View>
             <HStack justifyContent="space-between" spacing={12} flex={1} alignItems="center">
                 <Text variant="callout">{name}</Text>
-                <Switch
-                    onChange={handleEnabledChange}
-                    isChecked={isEnabled}
-                    colorChecked="backgroundPrimaryDefault"
-                    colorUnchecked="backgroundNeutralSubtleOnElevationNegative"
-                />
+                <Switch onChange={handleEnabledChange} isChecked={isEnabled} />
             </HStack>
         </Card>
     );