chore: keep onboarding black on all themes and sizes in a horrible way

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,20 @@ 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">
-                  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.div>
             }
             rightColumn={
               <>

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

@@ -1,82 +1,134 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Box, Flex, styled } from 'leather-styles/jsx';
+// import { css } from 'leather-styles/css';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { useThemeSwitcher } from '@app/common/theme-provider';
+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';
 
 interface WelcomeLayoutProps {
-  tagline: React.ReactNode;
-  subheader: React.ReactNode;
   isGeneratingWallet: boolean;
   onSelectConnectLedger(): void;
   onStartOnboarding(): void;
   onRestoreWallet(): void;
 }
 export function WelcomeLayout({
-  tagline,
-  subheader,
   isGeneratingWallet,
   onStartOnboarding,
   onSelectConnectLedger,
   onRestoreWallet,
 }: WelcomeLayoutProps): React.JSX.Element {
   const isAtleastBreakpointMd = useViewportMinWidth('md');
+  const { theme } = useThemeSwitcher();
+
+  {
+    /* 
+        <TODO - revisit: this is working but not in a good way 
+        - setting all these custom colors etc. 
+        - also losing hover styles etc. so not a good approach really
+        - could be simpler using different components and hideOnSm etc */
+  }
+  const tagline = 'Bitcoin for the rest of us';
+  const taglineExtended = 'The bitcoin wallet for the rest of us';
+  const subheader =
+    'Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy';
 
   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: 'darkModeBrown.1', 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: 'lightModeBrown.1', 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>
+          {/* 
+            Use different wording between viewport sizes
+            - this means duplicated tags but panda recommnds this
+            - we can avoid using useViewportMinWidth hooks
+           */}
+          <styled.h1 hideBelow="md" textStyle="display.01" maxWidth="880px">
+            {tagline}
+          </styled.h1>
+          <styled.h1 hideFrom="md" textStyle="heading.03" maxWidth="880px">
+            {taglineExtended}
+          </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']}
+            // invert={isAtleastBreakpointMd}
+            // invert
             onClick={onStartOnboarding}
             data-testid={OnboardingSelectors.SignUpBtn}
             aria-busy={isGeneratingWallet}
+            justifyContent="center"
+            alignItems="center"
+            gap="space.02"
+            px="space.04"
+            py="space.02"
+            bg={{
+              base: theme === 'light' ? 'darkModeBrown.12' : 'lightModeBrown.1',
+              md: theme === 'light' ? 'lightModeBrown.1' : 'lightModeBrown.12',
+            }}
+            color={{
+              base: theme === 'light' ? 'lightModeBrown.12' : 'darkModeBrown.1',
+              md: theme === 'light' ? 'darkModeBrown.1' : 'lightModeBrown.1',
+            }}
           >
             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}
+              // invert={isAtleastBreakpointMd}
+              // invert
+              paddingTop="space.02"
+              paddingBottom={{ base: 'space.02', md: 'unset' }}
+              bg={{ base: 'darkModeBrown.1', md: 'inherit' }}
+              color={{
+                base: 'lightModeBrown.1',
+                md: theme === 'light' ? 'darkModeBrown.12' : 'lightModeBrown.12',
+              }}
+              border={{ base: '1px solid currentColor', md: 'unset' }}
               flex={1}
-              mt={[0, 0, 'space.05']}
+              minWidth="122px"
               data-testid={OnboardingSelectors.SignInLink}
               onClick={onRestoreWallet}
             >
               Use existing key
             </LeatherButton>
             <LeatherButton
               variant={isAtleastBreakpointMd ? 'link' : 'outline'}
-              invert={isAtleastBreakpointMd}
+              // invert={isAtleastBreakpointMd}
+              // invert
+              paddingTop="space.02"
+              paddingBottom={{ base: 'space.02', md: 'unset' }}
+              bg={{ base: 'darkModeBrown.1', md: 'unset' }}
+              color={{
+                base: 'lightModeBrown.1',
+                md: theme === 'light' ? 'darkModeBrown.12' : 'lightModeBrown.12',
+              }}
+              // color="darkModeBrown.12"
+              border={{ base: '1px solid currentColor', md: 'unset' }}
               flex={1}
-              mt={[0, 0, 'space.05']}
+              minWidth="88px"
               onClick={onSelectConnectLedger}
             >
               Use Ledger
@@ -86,14 +138,17 @@ export function WelcomeLayout({
       </Flex>
       <Flex
         p="space.05"
-        bg="brown.2"
-        color="brown.12"
+        bg={{ base: 'darkModeBrown.1', md: 'accent.background-primary' }}
+        color={{ base: 'lightModeBrown.1', md: 'brown.12' }}
         flexDir="column"
         justifyContent="space-between"
-        flex={['', '', 1]}
+        flex={{ base: '', md: 1 }}
       >
-        <LeatherIcon width="150px" height="34px" />
-        <LeatherLettermarkIcon display={['none', '', 'block']} width="100%" />
+        <Flex justifyContent="space-between">
+          <LeatherIcon width="150px" height="34px" />
+          <ExternalLink href="https://leather.io/">leather.io</ExternalLink>
+        </Flex>
+        <LeatherLettermarkIcon hideBelow="md" width="100%" />
       </Flex>
     </Flex>
   );

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

@@ -70,8 +70,6 @@ export function WelcomePage() {
   return (
     <>
       <WelcomeLayout
-        tagline="Bitcoin for the rest of us"
-        subheader="Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy"
         isGeneratingWallet={isGeneratingWallet}
         onSelectConnectLedger={() =>
           doesBrowserSupportWebUsbApi() ? supportsWebUsbAction() : doesNotSupportWebUsbAction()

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()
     );