fix(suite-native): device switcher pimping

Author: vytick

suite-native/atoms/src/TextDivider.tsx

@@ -1,5 +1,6 @@
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Translation, TxKeyPath } from '@suite-native/intl';
+import { Color } from '@trezor/theme';
 
 import { Box } from './Box';
 import { HStack } from './Stack';
@@ -8,11 +9,13 @@ import { Text } from './Text';
 type TextDividerProps = {
     title: TxKeyPath;
     horizontalMargin?: number;
+    lineColor?: Color;
+    textColor?: Color;
 };
 
-const separatorStyle = prepareNativeStyle<{ horizontalMargin?: number }>(
-    (utils, { horizontalMargin }) => ({
-        backgroundColor: utils.colors.borderElevation0,
+const separatorStyle = prepareNativeStyle<{ horizontalMargin?: number; color: Color }>(
+    (utils, { horizontalMargin, color }) => ({
+        backgroundColor: utils.colors[color],
         height: utils.borders.widths.small,
         flex: 1,
         // We want the separator to be full width, but we need to offset it by the parent padding
@@ -25,18 +28,23 @@ const separatorTitleStyle = prepareNativeStyle(utils => ({
     paddingVertical: utils.spacings.extraSmall,
 }));
 
-export const TextDivider = ({ title, horizontalMargin = 0 }: TextDividerProps) => {
+export const TextDivider = ({
+    title,
+    horizontalMargin = 0,
+    lineColor = 'borderElevation1',
+    textColor = 'textDefault',
+}: TextDividerProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
         <HStack alignItems="center">
-            <Box style={applyStyle(separatorStyle, { horizontalMargin })} />
+            <Box style={applyStyle(separatorStyle, { horizontalMargin, color: lineColor })} />
             <Box style={applyStyle(separatorTitleStyle)}>
-                <Text variant="label">
+                <Text variant="label" color={textColor}>
                     <Translation id={title} />
                 </Text>
             </Box>
-            <Box style={applyStyle(separatorStyle, { horizontalMargin })} />
+            <Box style={applyStyle(separatorStyle, { horizontalMargin, color: lineColor })} />
         </HStack>
     );
 };

suite-native/device-manager/src/components/AddHiddenWalletButton.tsx

@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { Translation } from '@suite-native/intl';
 import { createDeviceInstance, selectDevice } from '@suite-common/wallet-core';
-import { Text } from '@suite-native/atoms';
+import { HStack, Text } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Icon } from '@suite-common/icons';
 
@@ -34,10 +34,12 @@ export const AddHiddenWalletButton = () => {
             onPress={handleAddHiddenWallet}
             flex={1}
         >
-            <Text variant="hint" style={applyStyle(textStyle)}>
-                <Translation id="deviceManager.deviceButtons.addHiddenWallet" />
-            </Text>
-            <Icon name="chevronRight" color="iconDefault" size="mediumLarge" />
+            <HStack>
+                <Text variant="hint" style={applyStyle(textStyle)}>
+                    <Translation id="deviceManager.deviceButtons.addHiddenWallet" />
+                </Text>
+                <Icon name="chevronRight" color="iconDefault" size="mediumLarge" />
+            </HStack>
         </DeviceAction>
     );
 };

suite-native/device-manager/src/components/DeviceItem/DeviceItemContent.tsx

@@ -18,11 +18,11 @@ import { SimpleDeviceItemContent } from './SimpleDeviceItemContent';
 import { WalletDetailDeviceItemContent } from './WalletDetailDeviceItemContent';
 
 export type DeviceItemContentVariant = 'simple' | 'walletDetail';
+
 export type DeviceItemContentMode = 'compact' | 'header';
 
 export type DeviceItemContentProps = {
     deviceState: NonNullable<TrezorDevice['state']>;
-    isPortfolioLabelDisplayed?: boolean;
     headerTextVariant?: TypographyStyle;
     variant?: DeviceItemContentVariant;
     isCompact?: boolean;
@@ -34,13 +34,19 @@ const contentWrapperStyle = prepareNativeStyle<{ height: number }>((utils, { hei
     alignItems: 'center',
     spacing: utils.spacings.medium,
 }));
-const itemStyle = prepareNativeStyle(_ => ({
+
+const itemStyle = prepareNativeStyle<{ isCompact: boolean }>((_, { isCompact }) => ({
     flexShrink: 1,
+    extend: {
+        condition: !isCompact,
+        style: {
+            gap: 2,
+        },
+    },
 }));
 
 export const DeviceItemContent = ({
     deviceState,
-    isPortfolioLabelDisplayed = true,
     headerTextVariant = 'body',
     variant = 'simple',
     isCompact = true,
@@ -76,16 +82,14 @@ export const DeviceItemContent = ({
         <HStack style={applyStyle(contentWrapperStyle, { height: isCompact ? 46 : 56 })}>
             <DeviceItemIcon
                 deviceId={areAllDevicesDisconnectedOrAccountless ? undefined : device.id}
-                iconSize={isCompact ? 'large' : 'extraLarge'}
             />
-            <Box style={applyStyle(itemStyle)}>
+            <Box style={applyStyle(itemStyle, { isCompact })}>
                 {variant === 'simple' ? (
                     <SimpleDeviceItemContent
                         deviceState={deviceState}
                         headerTextVariant={headerTextVariant}
                         header={deviceHeader}
                         isPortfolioTrackerDevice={isPortfolioTrackerDevice}
-                        isPortfolioLabelDisplayed={isPortfolioLabelDisplayed}
                     />
                 ) : (
                     <WalletDetailDeviceItemContent
@@ -94,7 +98,6 @@ export const DeviceItemContent = ({
                         header={deviceHeader}
                         subHeader={walletNameLabel}
                         isPortfolioTrackerDevice={isPortfolioTrackerDevice}
-                        isPortfolioLabelDisplayed={isPortfolioLabelDisplayed}
                     />
                 )}
             </Box>

suite-native/device-manager/src/components/DeviceItem/DeviceItemIcon.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 
-import { Icon, IconSize } from '@suite-common/icons';
+import { Icon } from '@suite-common/icons';
 import {
     DeviceRootState,
     PORTFOLIO_TRACKER_DEVICE_ID,
@@ -12,20 +12,21 @@ import { DeviceModelIcon } from '../DeviceModelIcon';
 
 type DeviceItemIconProps = {
     deviceId: TrezorDevice['id'];
-    iconSize: IconSize;
 };
 
-export const DeviceItemIcon = ({ deviceId, iconSize }: DeviceItemIconProps) => {
+const ICON_SIZE = 28;
+
+export const DeviceItemIcon = ({ deviceId }: DeviceItemIconProps) => {
     const deviceModel = useSelector((state: DeviceRootState) =>
         selectDeviceModelById(state, deviceId),
     );
 
     if (deviceId === PORTFOLIO_TRACKER_DEVICE_ID) {
-        return <Icon name="database" color="iconDefault" size={iconSize} />;
+        return <Icon name="database" color="iconDefault" size={ICON_SIZE} />;
     }
     if (deviceModel !== null) {
-        return <DeviceModelIcon deviceModel={deviceModel} size={iconSize} />;
+        return <DeviceModelIcon deviceModel={deviceModel} size={ICON_SIZE} />;
     }
 
-    return <Icon name="trezor" color="iconDefault" size={iconSize} />;
+    return <Icon name="trezor" color="iconDefault" size={ICON_SIZE} />;
 };

suite-native/device-manager/src/components/DeviceItem/SimpleDeviceItemContent.tsx

@@ -18,7 +18,6 @@ export type SimpleDeviceItemContentProps = {
     deviceState: NonNullable<TrezorDevice['state']>;
     headerTextVariant?: TypographyStyle;
     header: ReactNode;
-    isPortfolioLabelDisplayed?: boolean;
     isPortfolioTrackerDevice: boolean;
 };
 
@@ -30,7 +29,6 @@ const headerStyle = prepareNativeStyle(_ => ({
 export const SimpleDeviceItemContent = ({
     deviceState,
     headerTextVariant,
-    isPortfolioLabelDisplayed,
     header,
     isPortfolioTrackerDevice,
 }: SimpleDeviceItemContentProps) => {
@@ -45,9 +43,7 @@ export const SimpleDeviceItemContent = ({
     }
 
     const isPortfolioTrackerSubHeaderVisible =
-        isPortfolioTrackerDevice &&
-        isPortfolioLabelDisplayed &&
-        !areAllDevicesDisconnectedOrAccountless;
+        isPortfolioTrackerDevice && !areAllDevicesDisconnectedOrAccountless;
 
     const isConnectionStateVisible =
         !isPortfolioTrackerDevice && !areAllDevicesDisconnectedOrAccountless;
@@ -68,7 +64,7 @@ export const SimpleDeviceItemContent = ({
             </Text>
             <Box>
                 {isPortfolioTrackerSubHeaderVisible && (
-                    <Text variant="label" color="textSubdued">
+                    <Text variant="hint" color="textSubdued">
                         <Translation id="deviceManager.status.portfolioTracker" />
                     </Text>
                 )}

suite-native/device-manager/src/components/DeviceItem/WalletDetailDeviceItemContent.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 import { ReactNode } from 'react';
 
-import { HStack, Text, Box } from '@suite-native/atoms';
+import { HStack, Text } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { DeviceRootState, selectDeviceByState } from '@suite-common/wallet-core';
@@ -15,7 +15,6 @@ export type WalletDetailDeviceItemContentProps = {
     headerTextVariant?: TypographyStyle;
     header: ReactNode;
     subHeader?: ReactNode;
-    isPortfolioLabelDisplayed?: boolean;
     isPortfolioTrackerDevice: boolean;
 };
 
@@ -33,7 +32,7 @@ const headerTextStyle = prepareNativeStyle(() => ({
 export const WalletDetailDeviceItemContent = ({
     deviceState,
     headerTextVariant,
-    isPortfolioLabelDisplayed,
+
     header,
     subHeader,
     isPortfolioTrackerDevice,
@@ -58,20 +57,12 @@ export const WalletDetailDeviceItemContent = ({
                 </Text>
                 {!isPortfolioTrackerDevice && <ConnectionDot isConnected={device.connected} />}
             </HStack>
-            <Box>
-                {isPortfolioTrackerDevice && isPortfolioLabelDisplayed && (
-                    <Text variant="label" color="textSubdued">
-                        <Translation id="deviceManager.status.portfolioTracker" />
-                    </Text>
-                )}
-                {!isPortfolioTrackerDevice && (
-                    <HStack alignItems="center" spacing="small">
-                        <Text variant="label" color="textSubdued">
-                            {subHeader}
-                        </Text>
-                    </HStack>
+            <Text variant="hint" color="textSubdued">
+                {isPortfolioTrackerDevice && (
+                    <Translation id="deviceManager.status.portfolioTracker" />
                 )}
-            </Box>
+                {!isPortfolioTrackerDevice && subHeader}
+            </Text>
         </>
     );
 };