refactor(suite): onboarding components and layouts

packages/components/src/components/Card/Card.tsx

@@ -33,7 +33,9 @@ export const allowedCardFrameProps = [
     'minHeight',
     'maxHeight',
     'overflow',
+    'position',
     'flex',
+    'zIndex',
 ] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedCardFrameProps)[number]>;
 

packages/components/src/components/Image/images.ts

@@ -36,36 +36,12 @@ export type PngImage = keyof typeof PNG_IMAGES;
 export const PNG_IMAGES = {
     BACKUP: 'backup.png',
     BACKUP_2x: 'backup@2x.png',
-    CHECK_SHIELD: 'check-shield.png',
-    CHECK_SHIELD_2x: 'check-shield@2x.png',
-    CLOCK: 'clock.png',
-    CLOCK_2x: 'clock@2x.png',
     CLOUDY: 'cloudy.webp',
     CLOUDY_2x: 'cloudy@2x.webp',
     COINS: 'coins.webp',
     COINS_2x: 'coins@2x.webp',
     CONFIRM_FW_INSTALLATION_SCREEN_T1B1: 'confirm-fw-installation-screen-t1b1.png',
     CONNECTOR: 'connector.webp',
-    CREATE_SHAMIR_GROUP: 'create-shamir-group.webp',
-    CREATE_SHAMIR_GROUP_2x: 'create-shamir-group@2x.webp',
-    ERROR: 'error.png',
-    ERROR_2x: 'error@2x.png',
-    EXTRA_INFO: 'extra-info.png',
-    EXTRA_INFO_2x: 'extra-info@2x.png',
-    FIRMWARE: 'firmware.png',
-    FIRMWARE_2x: 'firmware@2x.png',
-    FOLDER: 'folder.png',
-    FOLDER_2x: 'folder@2x.png',
-    KEY: 'key.png',
-    KEY_2x: 'key@2x.png',
-    PIN: 'pin.png',
-    PIN_2x: 'pin@2x.png',
-    PIN_LOCKED: 'pin-locked.png',
-    PIN_LOCKED_2x: 'pin-locked@2x.png',
-    RECOVERY: 'recovery.png',
-    RECOVERY_2x: 'recovery@2x.png',
-    SHAMIR_SHARES: 'shamir-shares.png',
-    SHAMIR_SHARES_2x: 'shamir-shares@2x.png',
     TEX: 'tex.webp',
     TOUCH: 'touch.webp',
     TRADING_DCA_INVITY_APP: 'trading-dca-invity-app.webp',
@@ -117,8 +93,4 @@ export const PNG_IMAGES = {
     TREZOR_UNKNOWN_2x: 'trezor-unknown@2x.webp',
     TREZOR_UNKNOWN_LARGE: 'trezor-unknown.webp',
     TREZOR_UNKNOWN_LARGE_2x: 'trezor-unknown@2x.webp',
-    UNDERSTAND: 'understand.png',
-    UNDERSTAND_2x: 'understand@2x.png',
-    WALLET: 'wallet.png',
-    WALLET_2x: 'wallet@2x.png',
 } as const;

packages/components/src/components/typography/Text/Text.tsx

@@ -33,6 +33,7 @@ export const allowedTextFrameProps = [
     'margin',
     'maxWidth',
     'minWidth',
+    'width',
     'flex',
     'position',
     'zIndex',

packages/components/src/index.ts

@@ -98,6 +98,7 @@ export { List, type ListProps } from './components/List/List';
 export { StoryColumn, StoryWrapper } from './support/Story';
 export {
     type Margin,
+    type Padding,
     type FrameProps,
     type FramePropsKeys,
     pickAndPrepareFrameProps,

packages/suite/src/components/backup/BackupSeedCards.tsx

@@ -1,49 +1,8 @@
-import styled from 'styled-components';
-
-import { variables } from '@trezor/components';
+import { Column, Grid, Icon, Paragraph, RadioCard } from '@trezor/components';
 
 import { ConfirmKey, toggleCheckboxByKey } from 'src/actions/backup/backupActions';
 import { Translation } from 'src/components/suite/Translation';
-import { useDispatch, useSelector } from 'src/hooks/suite';
-
-import { BackupSeedCard } from './BackupSeedCard';
-
-const Wrapper = styled.div`
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-`;
-
-const Instructions = styled.div`
-    text-align: center;
-    margin: 16px 0 26px;
-    color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-    font-size: ${variables.FONT_SIZE.TINY};
-`;
-
-const Items = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 10px;
-    width: 100%;
-
-    ${variables.SCREEN_QUERY.BELOW_TABLET} {
-        grid-template-columns: 1fr;
-    }
-`;
-
-const StyledBackupSeedCard = styled(BackupSeedCard)`
-    width: 30%;
-
-    ${variables.SCREEN_QUERY.BELOW_TABLET} {
-        width: 100%;
-
-        & + & {
-            margin-top: 10px;
-        }
-    }
-`;
+import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite';
 
 const items = [
     {
@@ -65,29 +24,32 @@ const items = [
 
 export const BackupSeedCards = () => {
     const backup = useSelector(state => state.backup);
-
     const dispatch = useDispatch();
+    const { isBelowTablet } = useLayoutSize();
 
     const isChecked = (key: ConfirmKey) => backup.userConfirmed.includes(key);
 
     return (
-        <Wrapper>
-            <Instructions>
+        <Column gap={16}>
+            <Paragraph typographyStyle="hint" variant="tertiary" align="center">
                 <Translation id="TR_ONBOARDING_CLICK_TO_CONFIRM" />
-            </Instructions>
-            <Items>
+            </Paragraph>
+            <Grid columns={isBelowTablet ? 1 : 3} gap={16}>
                 {items.map(item => (
-                    <StyledBackupSeedCard
-                        // TODO: change data-test, checkbox keys to something more generic, independent of actual content
-                        data-testid={`@backup/check-item/${item.key}`}
+                    <RadioCard
                         key={item.key}
+                        isActive={isChecked(item.key)}
                         onClick={() => dispatch(toggleCheckboxByKey(item.key))}
-                        label={item.label}
-                        icon={item.icon}
-                        isChecked={isChecked(item.key)}
-                    />
+                    >
+                        <Column gap={16}>
+                            <Icon name={item.icon} />
+                            <Paragraph typographyStyle="hint" variant="tertiary" textWrap="pretty">
+                                {item.label}
+                            </Paragraph>
+                        </Column>
+                    </RadioCard>
                 ))}
-            </Items>
-        </Wrapper>
+            </Grid>
+        </Column>
     );
 };