diff --git a/frontend/components/Setup/Create/SetupBackupSigner.tsx b/frontend/components/Setup/Create/SetupBackupSigner.tsx index a0593097..1900ca05 100644 --- a/frontend/components/Setup/Create/SetupBackupSigner.tsx +++ b/frontend/components/Setup/Create/SetupBackupSigner.tsx @@ -55,12 +55,9 @@ export const SetupBackupSigner = () => { > Skip for now - - - Note that in the current version of the app, you will not be able - to set up a backup wallet afterward. This functionality is coming - soon. - + + Note that in the current version of the app, you will not be able to + set up a backup wallet afterward. This functionality is coming soon. diff --git a/frontend/components/Setup/Create/SetupCreateHeader.tsx b/frontend/components/Setup/Create/SetupCreateHeader.tsx index 68a83f88..f077e684 100644 --- a/frontend/components/Setup/Create/SetupCreateHeader.tsx +++ b/frontend/components/Setup/Create/SetupCreateHeader.tsx @@ -18,9 +18,12 @@ export const SetupCreateHeader = memo(function SetupCreateHeader({ return ( - + - + + {`GNO: ${masterEoa}`} + + } + message={ + 'After this point, do not send more funds to this address. Once your account is created, you will be given a new address - send further funds there.' + } + /> + + ); }; -const AccountCreationCardFlex = styled(CardFlex)` - .ant-card-body { - background-color: ${COLOR.ACCOUNT_CREATION_CARD_GRAY}; +const AccountCreationCard = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 24px; + margin-bottom: 24px; + padding: 16px; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23A3AEBB' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='15' stroke-linecap='square'/%3e%3c/svg%3e"); + border-radius: 12px; + + .account-creation-alert { + margin-top: 8px; + background: #e6f4ff; + border: 1px solid #91caff; + color: #002c8c; + align-items: flex-start; } `; + +const ICON_STYLE = { color: '#606F85' }; diff --git a/frontend/constants/color.ts b/frontend/constants/color.ts index 286576eb..dd52eda2 100644 --- a/frontend/constants/color.ts +++ b/frontend/constants/color.ts @@ -8,5 +8,4 @@ export const COLOR = { WHITE: '#ffffff', BORDER_GRAY: '#f0f0f0', BROWN: '#873800', - ACCOUNT_CREATION_CARD_GRAY: '#f2f4f9', }; diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss index ffeb3b25..a2b493f5 100644 --- a/frontend/styles/globals.scss +++ b/frontend/styles/globals.scss @@ -66,6 +66,7 @@ button, input, select, textarea, .ant-input-suffix { border-left: 0; border-right: 0; margin: -24px; + align-items: flex-start; } .can-select-text { diff --git a/frontend/theme/mainTheme.ts b/frontend/theme/mainTheme.ts index 8f345345..3033c7d1 100644 --- a/frontend/theme/mainTheme.ts +++ b/frontend/theme/mainTheme.ts @@ -42,6 +42,8 @@ export const mainTheme: ThemeConfig = { colorTextLightSolid: 'black', colorBgSpotlight: 'white', }, - Typography: {}, + Typography: { + colorTextDescription: '#4D596A', + }, }, };