Improve layout of ledger instructions page

alephium · Feb 27, 2025 · bc7cdef · bc7cdef
1 parent a31dbb4
commit bc7cdef
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 24 deletions.
diff --git 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<InfoBoxProps> = ({
   onClick,
   short,
   children,
-  contrast
+  contrast,
+  align = 'center'
 }) => {
   const theme = useTheme()
 
@@ -42,7 +44,7 @@ const InfoBox: FC<InfoBoxProps> = ({
             <Icon color={getImportanceColor(theme, importance)} strokeWidth={1.5} />
           </IconContainer>
         )}
-        <TextContainer wordBreak={wordBreak} ellipsis={ellipsis}>
+        <TextContainer wordBreak={wordBreak} ellipsis={ellipsis} align={align}>
           {text || children}
         </TextContainer>
       </StyledBox>
@@ -53,7 +55,7 @@ const InfoBox: FC<InfoBoxProps> = ({
 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<Pick<InfoBoxProps, 'wordBreak' | 'ellipsis' | 'align'>>`
   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
@@ -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 (
     <LockedWalletLayout>
       <FloatingPanel enforceMinHeight>
-        <PanelTitle onBackButtonClick={() => navigate('/')}>{t('Connect your Ledger')}</PanelTitle>
-        <ol>
-          <li>{t('Plug in and unlock your Ledger device.')}</li>
-          <li>
+        <PanelTitle centerText>{t('Connect your Ledger')}</PanelTitle>
+        <InfoBoxes>
+          <InfoBox align="left" Icon={Unplug}>
+            {t('Plug in and unlock your Ledger device.')}
+          </InfoBox>
+          <InfoBox align="left" Icon={Power}>
             <Trans t={t} i18nKey="ledgerInstructionsOpenApp">
               Open the Alephium Ledger app. The Alephium app can be installed via
               <ActionLink onClick={() => openInWebBrowser(links.ledgerLive)}>Ledger Live</ActionLink>.
             </Trans>
-          </li>
-        </ol>
-        {error && (
-          <>
-            <InfoBox importance="warning">
-              <div>{t('Is your device plugged in and the Alephium app open?')}</div>
-            </InfoBox>
-            <InfoBox importance="alert">
-              <div>{error}</div>
-            </InfoBox>
-          </>
-        )}
-        <FooterActionsContainer>
-          <Button onClick={handleContinuePress}>{t('Continue')}</Button>
-        </FooterActionsContainer>
+          </InfoBox>
+          {error && (
+            <>
+              <InfoBox importance="warning">
+                <div>{t('Is your device plugged in and the Alephium app open?')}</div>
+              </InfoBox>
+              <InfoBox importance="alert">
+                <div>{error}</div>
+              </InfoBox>
+            </>
+          )}
+        </InfoBoxes>
+        <FooterActionsContainerStyled>
+          <Button onClick={() => navigate('/')} tall role="secondary">
+            {t('Back')}
+          </Button>
+          <Button onClick={handleContinuePress} tall>
+            {t('Continue')}
+          </Button>
+        </FooterActionsContainerStyled>
       </FloatingPanel>
     </LockedWalletLayout>
   )
 }
 
 export default ConnectLedgerInstructionsPage
+
+const FooterActionsContainerStyled = styled(FooterActionsContainer)`
+  margin-top: auto;
+`
+
+const InfoBoxes = styled.div`
+  margin-top: var(--spacing-8);
+`