chore: refactor onboarding

package.json

@@ -242,7 +242,7 @@
     "@leather-wallet/prettier-config": "0.0.1",
     "@leather-wallet/tokens": "0.0.2",
     "@ls-lint/ls-lint": "2.1.0",
-    "@pandacss/dev": "0.22.1",
+    "@pandacss/dev": "0.26.1",
     "@playwright/test": "1.40.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "3.0.2",

src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx

@@ -7,33 +7,30 @@ import { RotateLeftIcon } from '@app/ui/components/icons/rotate-left-icon';
 export function BackUpSecretKeyContent(): React.JSX.Element {
   return (
     <>
-      <styled.h1
-        textStyle={['heading.03', 'heading.03', 'heading.03', 'display.02']}
-        mt="space.00"
-        mb="space.06"
-      >
-        Back up your <br /> Secret Key
+      <styled.h1 textStyle="heading.03" mt="space.00" mb="space.04">
+        Back up your Secret Key
       </styled.h1>
-      <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
-        Here's your Secret Key: 24 words that give you access to your new wallet.
-      </styled.p>
-      <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
+      <styled.p textStyle="label.02" mb="space.08">
         You'll need it to access your wallet on a new device, or this one if you lose your password
         — so back it up somewhere safe!
       </styled.p>
 
-      <Stack gap="space.03">
-        <HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']}>
+      <Stack gap="space.05">
+        <HStack alignItems="center">
           <RotateLeftIcon />
-          <styled.span textStyle="body.01">Your Secret Key gives access to your wallet</styled.span>
+          <styled.span textStyle="caption.01">
+            Your Secret Key gives access to your wallet
+          </styled.span>
         </HStack>
-        <HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']}>
-          <EyeSlashIcon size="16px" />
-          <styled.span textStyle="body.01">Never share your Secret Key with anyone</styled.span>
+        <HStack alignItems="center">
+          <EyeSlashIcon />
+          <styled.span textStyle="caption.01">Never share your Secret Key with anyone</styled.span>
         </HStack>
-        <HStack alignItems="center" margin={['auto', 'auto', 'auto', 'unset']} mb="space.05">
-          <LockIcon size="16px" />
-          <styled.span textStyle="body.01">Store it somewhere 100% private and secure</styled.span>
+        <HStack alignItems="center">
+          <LockIcon />
+          <styled.span textStyle="caption.01">
+            Store it somewhere 100% private and secure
+          </styled.span>
         </HStack>
       </Stack>
     </>

src/app/pages/onboarding/set-password/set-password.tsx

@@ -125,24 +125,24 @@ function SetPasswordPage() {
       {({ dirty, isSubmitting, isValid }) => (
         <Form>
           {/*  request password is the only required to work in small view need to work in small view */}
+
+          {/* <          PETE working on this width of set a password now */}
           <TwoColumnLayout
             leftColumn={
-              <>
-                <styled.h1
-                  textStyle={['heading.03', 'heading.03', 'heading.03', 'display.02']}
-                  mt="space.00"
-                  mb="space.06"
-                >
-                  Set a password
+              <styled.div width="350px">
+                <styled.h1 textStyle="heading.03" mt="space.00" mb="space.04">
+                  Set a <br />
+                  password
                 </styled.h1>
-                <styled.p textStyle={['label.01', 'heading.05']} mb="space.06">
-                  Your password protects your Secret Key on this device only.
+                <styled.p textStyle="label.02">
+                  Your password protects your Secret Key on this device only. To access your wallet
+                  on another device, you'll need just your Secret Key.
                 </styled.p>
-                <styled.p textStyle="body.02" color="brown.10">
+                {/* <styled.p textStyle="body.02" color="brown.10">
                   You'll need just your Secret Key to access your wallet on another device, or this
                   one if you lose your password.
-                </styled.p>
-              </>
+                </styled.p> */}
+              </styled.div>
             }
             rightColumn={
               <>

src/app/pages/onboarding/welcome/welcome.layout.tsx

@@ -1,7 +1,8 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Box, Flex, styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { ExternalLink } from '@app/components/external-link';
 import { LeatherButton } from '@app/ui/components/button';
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 import { LeatherLettermarkIcon } from '@app/ui/components/icons/leather-lettermark-icon';
@@ -25,48 +26,54 @@ export function WelcomeLayout({
   const isAtleastBreakpointMd = useViewportMinWidth('md');
 
   return (
-    <Flex flexDir={['column-reverse', '', 'row']} minW="100vw" minH="100vh">
-      <Flex flexDir="column" bg={['brown.2', '', 'brown.12']} flex={[1, 2]} p="space.05">
+    <Flex flexDir={{ base: 'column-reverse', md: 'row' }} minW="100vw" minH="100vh">
+      <Flex
+        flexDir="column"
+        bg={{ base: 'accent.background-primary', md: 'brown.12' }}
+        flex={{ base: 1, md: 2 }}
+        p="space.05"
+      >
         <Flex
           flexDir="column"
           flex={[1, 1, 0]}
-          justifyContent={['center', '', 'flex-start']}
-          color={['brown.12', '', 'brown.2']}
+          justifyContent={{ base: 'end', md: 'flex-start' }}
+          color={{ base: 'accent.text-primary', md: 'brown.1' }}
         >
-          <Box>
-            <styled.h1 textStyle={['heading.03', '', 'display.02', 'display.01']}>
-              {tagline}
-            </styled.h1>
-            <styled.h2
-              textStyle={['label.01', '', 'heading.04']}
-              mt={['space.02', '', 'space.07']}
-              maxW="556px"
-            >
-              {subheader}
-            </styled.h2>
-          </Box>
+          <styled.h1 textStyle={{ base: 'heading.03', md: 'display.01' }} maxWidth="880px">
+            {tagline}
+          </styled.h1>
+          <styled.h2
+            textStyle={['label.01', '', 'heading.04']}
+            mt={['space.02', '', 'space.07']}
+            maxW="556px"
+          >
+            {subheader}
+          </styled.h2>
         </Flex>
-        <Flex flexDir="column" alignItems={['normal', '', 'flex-start']}>
+        <Flex flexDir={{ base: 'column', md: 'row' }} gap="space.05" mt="space.07">
           <LeatherButton
             invert={isAtleastBreakpointMd}
-            mt={[0, 0, 'space.07']}
+            height="40px"
             onClick={onStartOnboarding}
             data-testid={OnboardingSelectors.SignUpBtn}
             aria-busy={isGeneratingWallet}
+            justifyContent="center"
+            alignItems="center"
+            gap="space.02"
+            px="space.04"
+            py="space.02"
           >
             Create new wallet
           </LeatherButton>
-          <Flex
-            flexDir={['row', '', 'column']}
-            gap="space.03"
-            mt="space.04"
-            alignItems="flex-start"
-          >
+
+          <Flex gap="space.05" alignItems="flex-start">
             <LeatherButton
               variant={isAtleastBreakpointMd ? 'link' : 'outline'}
               invert={isAtleastBreakpointMd}
+              height={{ base: '40px', md: '32px' }}
+              py="space.02"
               flex={1}
-              mt={[0, 0, 'space.05']}
+              minWidth="122px"
               data-testid={OnboardingSelectors.SignInLink}
               onClick={onRestoreWallet}
             >
@@ -75,8 +82,10 @@ export function WelcomeLayout({
             <LeatherButton
               variant={isAtleastBreakpointMd ? 'link' : 'outline'}
               invert={isAtleastBreakpointMd}
+              height={{ base: '40px', md: '32px' }}
               flex={1}
-              mt={[0, 0, 'space.05']}
+              minWidth="88px"
+              py="space.02"
               onClick={onSelectConnectLedger}
             >
               Use Ledger
@@ -86,13 +95,17 @@ export function WelcomeLayout({
       </Flex>
       <Flex
         p="space.05"
-        bg="brown.2"
+        bg="accent.background-primary"
         color="brown.12"
         flexDir="column"
         justifyContent="space-between"
         flex={['', '', 1]}
+        //         flex={{ base: '', md: 1 }}
       >
-        <LeatherIcon width="150px" height="34px" />
+        <Flex justifyContent="space-between">
+          <LeatherIcon width="150px" height="34px" />
+          <ExternalLink href="https://leather.io/">leather.io</ExternalLink>
+        </Flex>
         <LeatherLettermarkIcon display={['none', '', 'block']} width="100%" />
       </Flex>
     </Flex>

src/app/ui/components/containers/dialog/dialog.tsx

@@ -53,7 +53,7 @@ export const Dialog = memo(
                 // remove borderRadius on small to give impression of full page
                 borderRadius: { base: '0', md: 'lg' },
                 boxShadow:
-                  'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+                  'hsl(206 22% 7% / 35%) 0 10px 38px -10px, hsl(206 22% 7% / 20%) 0 10px 20px -15px',
                 position: 'fixed',
                 top: '50%',
                 left: '50%',

src/app/ui/components/containers/two-column.layout.tsx

@@ -1,5 +1,7 @@
 import { Flex, Stack, styled } from 'leather-styles/jsx';
-import { POPUP_WIDTH } from 'shared/constants';
+
+// import { POPUP_WIDTH } from 'shared/constants';
+import { HOME_MAX_WIDTH } from '../containers/home.layout';
 
 interface TwoColumnLayoutProps {
   leftColumn: React.JSX.Element;
@@ -12,6 +14,8 @@ export function TwoColumnLayout({
 }: TwoColumnLayoutProps): React.JSX.Element {
   return (
     <Flex
+      id="two-column"
+      maxWidth={HOME_MAX_WIDTH}
       // flexDirection={['column', 'column', 'column', 'row']}
       flexDirection={{ base: 'column', md: 'row' }}
       paddingTop="space.06"
@@ -27,11 +31,16 @@ export function TwoColumnLayout({
         alignItems={['center', 'center', 'center', 'flex-start']}
         textAlign={['center', 'center', 'center', 'left']}
         flexDirection="column"
-        padding="space.00"
-        gap="space.07"
-        mx={['auto', 'space.03', 'space.03', 'space.03']}
+        // padding="space.00"
+        // gap="space.07"
+        // mx={['auto', 'space.03', 'space.03', 'space.03']}
       >
-        <styled.div maxWidth={POPUP_WIDTH} textAlign="left">
+        {/* check this 250 width. Box should be 250 but allow right padding if space 
+        
+          Maybe need to pass in this dimenstions with leftColumn?????
+        */}
+
+        <styled.div minWidth="250px" textAlign="left">
           {leftColumn}
         </styled.div>
       </Flex>
@@ -55,6 +64,7 @@ export function TwoColumnLayout({
           backgroundColor="accent.background-primary"
           borderRadius="xs"
           width="100%"
+          minWidth="600px" // for setPassword need to get this right
           flex="1"
         >
           {rightColumn}

tests/specs/onboarding/onboarding.spec.ts

@@ -19,6 +19,10 @@ test.describe('Onboarding an existing user', () => {
     await onboardingPage.signInExistingUser();
     await homePage.page.waitForTimeout(1000);
 
+    // use this to test popout mode
+
+    // and this https://github.com/leather-wallet/extension/blob/9a2e8b4bee19b812d1d62491aeca44ceafcfeb13/tests/specs/rpc-stacks-transaction/transaction-signing.spec.ts#L36-L46
+
     const walletState = await onboardingPage.page.evaluate(async () =>
       window.debug.logPersistedStore()
     );