diff --git a/apps/desktop-wallet/src/components/InfoBox.tsx b/apps/desktop-wallet/src/components/InfoBox.tsx index 1f450b7ad..e927a3563 100644 --- a/apps/desktop-wallet/src/components/InfoBox.tsx +++ b/apps/desktop-wallet/src/components/InfoBox.tsx @@ -15,6 +15,7 @@ export interface InfoBoxProps { small?: boolean short?: boolean contrast?: boolean + align?: 'left' | 'center' className?: string } @@ -29,7 +30,8 @@ const InfoBox: FC = ({ onClick, short, children, - contrast + contrast, + align = 'center' }) => { const theme = useTheme() @@ -42,7 +44,7 @@ const InfoBox: FC = ({ )} - + {text || children} @@ -53,7 +55,7 @@ const InfoBox: FC = ({ const getImportanceColor = (theme: DefaultTheme, importance?: InfoBoxImportance) => importance ? { - default: theme.bg.accent, + default: theme.global.accent, alert: theme.global.alert, warning: theme.global.highlight, accent: theme.global.accent @@ -73,11 +75,11 @@ const IconContainer = styled.div` justify-content: center; ` -const TextContainer = styled.div<{ wordBreak?: boolean; ellipsis?: boolean }>` +const TextContainer = styled.div>` flex: 2; font-weight: var(--fontWeight-medium); word-break: ${({ wordBreak }) => (wordBreak ? 'break-all' : 'initial')}; - text-align: center; + text-align: ${({ align }) => align}; ${({ ellipsis }) => ellipsis diff --git a/apps/desktop-wallet/src/features/ledger/ConnectLedgerInstructionsPage.tsx b/apps/desktop-wallet/src/features/ledger/ConnectLedgerInstructionsPage.tsx index d0ee98f9f..ee17d64db 100644 --- a/apps/desktop-wallet/src/features/ledger/ConnectLedgerInstructionsPage.tsx +++ b/apps/desktop-wallet/src/features/ledger/ConnectLedgerInstructionsPage.tsx @@ -1,7 +1,9 @@ import { getHumanReadableError } from '@alephium/shared' +import { Power, Unplug } from 'lucide-react' import { useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' +import styled from 'styled-components' import ActionLink from '@/components/ActionLink' import Button from '@/components/Button' @@ -44,32 +46,47 @@ const ConnectLedgerInstructionsPage = () => { return ( - navigate('/')}>{t('Connect your Ledger')} -
    -
  1. {t('Plug in and unlock your Ledger device.')}
  2. -
  3. + {t('Connect your Ledger')} + + + {t('Plug in and unlock your Ledger device.')} + + Open the Alephium Ledger app. The Alephium app can be installed via openInWebBrowser(links.ledgerLive)}>Ledger Live. -
  4. -
- {error && ( - <> - -
{t('Is your device plugged in and the Alephium app open?')}
-
- -
{error}
-
- - )} - - - + + {error && ( + <> + +
{t('Is your device plugged in and the Alephium app open?')}
+
+ +
{error}
+
+ + )} + + + + +
) } export default ConnectLedgerInstructionsPage + +const FooterActionsContainerStyled = styled(FooterActionsContainer)` + margin-top: auto; +` + +const InfoBoxes = styled.div` + margin-top: var(--spacing-8); +`