fix(ui): change locked screen ui to match the updated styles

leather-io · Nov 13, 2023 · 35493d5 · 35493d5
1 parent 831989d
commit 35493d5
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 41 deletions.
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -12,6 +12,7 @@ import { LeatherButton } from '@app/components/button/button';
 
 import { ErrorLabel } from './error-label';
 import { buildEnterKeyEvent } from './link';
+import { TwoColumnLayout } from './secret-key/two-column.layout';
 
 const waitingMessages: WaitingMessages = {
   '2': 'Verifying password…',
@@ -51,43 +52,65 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
   }, [analytics, startWaitingMessage, stopWaitingMessage, unlockWallet, password, onSuccess]);
 
   return (
-    <Stack
-      pb={['space.05', 'unset']}
-      px={['space.05', 'space.04']}
-      gap="space.05"
-      textAlign={['center', 'center']}
-      margin="auto"
-    >
-      <styled.h1 textStyle={['heading.03', 'heading.02']}>{title}</styled.h1>
-      <styled.p textStyle="body.02">{(isRunning && waitingMessage) || caption}</styled.p>
-      <Stack gap="space.04">
-        <Input
-          autoFocus
-          _focus={{ border: `2px solid ${token('colors.accent.text-primary')}` }}
-          borderRadius="10px"
-          data-testid={SettingsSelectors.EnterPasswordInput}
-          height="64px"
-          isDisabled={isRunning}
-          onChange={(e: FormEvent<HTMLInputElement>) => {
-            setError('');
-            setPassword(e.currentTarget.value);
-          }}
-          onKeyUp={buildEnterKeyEvent(submit)}
-          placeholder="Enter your password"
-          type="password"
-          value={password}
-          width="100%"
-        />
-        {error && <ErrorLabel>{error}</ErrorLabel>}
-      </Stack>
-      <LeatherButton
-        data-testid={SettingsSelectors.UnlockWalletBtn}
-        disabled={isRunning || !!error}
-        aria-busy={isRunning}
-        onClick={submit}
-      >
-        Continue
-      </LeatherButton>
-    </Stack>
+    <>
+      <TwoColumnLayout
+        leftColumn={
+          <>
+            <styled.h1
+              textStyle={['heading.03', 'heading.03', 'heading.03', 'display.02']}
+              mt="space.00"
+              mb="space.06"
+            >
+              {title}
+            </styled.h1>
+            <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
+              {(isRunning && waitingMessage) || caption}
+            </styled.p>
+          </>
+        }
+        rightColumn={
+          <>
+            <styled.h2
+              textStyle="heading.03"
+              mt="space.02"
+              mb="space.04"
+              hideBelow="sm"
+              textAlign="center"
+            >
+              Your password
+            </styled.h2>
+            <Stack gap="space.04" alignItems="center">
+              <Input
+                autoFocus
+                _focus={{ border: `2px solid ${token('colors.accent.text-primary')}` }}
+                borderRadius="10px"
+                data-testid={SettingsSelectors.EnterPasswordInput}
+                height="64px"
+                isDisabled={isRunning}
+                onChange={(e: FormEvent<HTMLInputElement>) => {
+                  setError('');
+                  setPassword(e.currentTarget.value);
+                }}
+                onKeyUp={buildEnterKeyEvent(submit)}
+                placeholder="Enter your password"
+                type="password"
+                value={password}
+                width="100%"
+              />
+              {error && <ErrorLabel>{error}</ErrorLabel>}
+            </Stack>
+            <LeatherButton
+              data-testid={SettingsSelectors.UnlockWalletBtn}
+              disabled={isRunning || !!error}
+              aria-busy={isRunning}
+              onClick={submit}
+              mt="space.08"
+            >
+              Continue
+            </LeatherButton>
+          </>
+        }
+      />
+    </>
   );
 }
diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx
@@ -10,7 +10,6 @@ import { closeWindow } from '@shared/utils';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { isFullPageMode, isPopupMode } from '@app/common/utils';
 import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
-import { CenteredPageContainer } from '@app/components/centered-page-container';
 import { Header } from '@app/components/header';
 import { RequestPassword } from '@app/components/request-password';
 import { useNewBrandApprover } from '@app/store/settings/settings.selectors';
@@ -35,7 +34,7 @@ export function Unlock() {
   const handleSuccess = () => navigate(RouteUrls.Home);
 
   return (
-    <CenteredPageContainer>
+    <>
       {/* Hide the logo when user hasn't consented yet */}
       {!hasApprovedNewBrand && (
         <Box position="fixed" w="200px" h="60px" background="brown.2" top={0} left={0} />
@@ -47,6 +46,6 @@ export function Unlock() {
         onSuccess={handleSuccess}
       />
       <Outlet />
-    </CenteredPageContainer>
+    </>
   );
 }