chore: improve display of lock screen, closes #4606

leather-io · Dec 19, 2023 · d0977cb · d0977cb
1 parent 0b123eb
commit d0977cb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -62,7 +62,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
             >
               {title}
             </styled.h1>
-            <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
+            <styled.p textStyle={['label.01', 'heading.05']} mb="space.06" textAlign="left">
               {(isRunning && waitingMessage) || caption}
             </styled.p>
           </>
@@ -78,7 +78,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
             >
               Your password
             </styled.h2>
-            <Stack gap="space.04" alignItems="center">
+            <Stack gap="space.04" alignItems="center" minHeight="100px">
               <styled.input
                 _focus={{ border: 'focus' }}
                 autoCapitalize="off"
@@ -102,7 +102,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
                 value={password}
                 width="100%"
               />
-              {error && <ErrorLabel>{error}</ErrorLabel>}
+              {error && <ErrorLabel width="100%">{error}</ErrorLabel>}
             </Stack>
             <LeatherButton
               data-testid={SettingsSelectors.UnlockWalletBtn}

diff --git a/src/app/components/secret-key/two-column.layout.tsx b/src/app/components/secret-key/two-column.layout.tsx
@@ -26,7 +26,9 @@ export function TwoColumnLayout({
         gap="space.07"
         mx={['auto', 'space.03', 'space.03', 'space.03']}
       >
-        <styled.div maxWidth="440px">{leftColumn}</styled.div>
+        <styled.div width="390px" textAlign="left">
+          {leftColumn}
+        </styled.div>
       </Flex>
 
       <Flex

diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx
@@ -70,7 +70,7 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps
         strengthResult={strengthResult}
       />
       <Flex alignItems="center">
-        <Caption mx="space.04">Password strength:</Caption>
+        <Caption mr="space.02">Password strength:</Caption>
         <Caption>{field.value ? strengthText : '—'}</Caption>
       </Flex>
     </>