chore: two col secret key layout

src/app/components/secret-key/secret-key-grid.tsx

@@ -1,24 +1,20 @@
-import { Grid, Stack } from 'leather-styles/jsx';
+import { Grid } from 'leather-styles/jsx';
 
 interface SecretKeyGridProps {
   children: React.ReactNode;
 }
 export function SecretKeyGrid({ children }: SecretKeyGridProps) {
   return (
-    <Stack gap="space.03" mb="space.05" width="100%">
-      <Grid
-        gridTemplateColumns={[
-          'repeat(2, minmax(160px, 1fr))',
-          'repeat(2, minmax(170px, 1fr))',
-          'repeat(2, minmax(170px, 1fr))',
-          'repeat(3, minmax(170px, 1fr))',
-        ]}
-        rowGap="space.03"
-        columnGap="space.03"
-        margin={['auto', 'auto', 'auto', 'unset']}
-      >
-        {children}
-      </Grid>
-    </Stack>
+    <Grid
+      gridTemplateColumns={{
+        base: 'repeat(1, minmax(160px, 1fr))',
+        md: 'repeat(2, minmax(170px, 1fr))',
+        lg: 'repeat(3, minmax(170px, 1fr))',
+      }}
+      rowGap="space.03"
+      columnGap="space.03"
+    >
+      {children}
+    </Grid>
   );
 }

src/app/features/secret-key-displayer/components/secret-key-word.tsx

@@ -15,7 +15,6 @@ export function SecretKeyWord({ word, num }: SecretKeyWordProps) {
       backgroundColor="accent.component-background-default"
       borderRadius="xs"
     >
-      {/*  FIXME #4130: need to fix this color color: var(--color-grey-light-8, #BBB); */}
       <styled.span display="flex" alignItems="center" mr="space.01" color="accent.text-subdued">
         {num}.
       </styled.span>

src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Flex, styled } from 'leather-styles/jsx';
+import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
 import { Button } from '@app/ui/components/button/button';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
@@ -24,7 +24,7 @@ export function SecretKeyDisplayerLayout(props: SecretKeyDisplayerLayoutProps) {
   const [showSecretKey, setShowSecretKey] = useState(false);
 
   return (
-    <>
+    <Stack gap="space.05">
       <SecretKeyGrid>
         {secretKeyWords?.map((word, index) => (
           <SecretKeyWord
@@ -34,36 +34,40 @@ export function SecretKeyDisplayerLayout(props: SecretKeyDisplayerLayoutProps) {
           />
         ))}
       </SecretKeyGrid>
-      <Flex gap="space.02" alignItems="center" width="100%">
+      <Flex gap="space.02" direction={{ base: 'column', md: 'row' }}>
         <Button
+          fullWidth
           variant="outline"
           flex="1"
           display="flex"
-          px="space.04"
-          py="space.03"
+          p="space.03"
           justifyContent="center"
           alignItems="center"
-          gap="space.02"
           data-testid={SettingsSelectors.ShowSecretKeyBtn}
           onClick={() => setShowSecretKey(!showSecretKey)}
         >
-          {showSecretKey ? <EyeSlashIcon size="20px" /> : <EyeIcon size="20px" />}
-          <styled.p textStyle="body.02">{showSecretKey ? 'Hide key' : 'Show key'}</styled.p>
+          <HStack>
+            {showSecretKey ? <EyeSlashIcon size="20px" /> : <EyeIcon size="20px" />}
+            <styled.span textStyle="label.02">
+              {showSecretKey ? 'Hide key' : 'Show key'}
+            </styled.span>
+          </HStack>
         </Button>
         <Button
+          fullWidth
           variant="outline"
           flex="1"
           display="flex"
-          px="space.04"
-          py="space.03"
+          p="space.03"
           justifyContent="center"
           alignItems="center"
-          gap="space.02"
           data-testid={SettingsSelectors.CopyKeyToClipboardBtn}
           onClick={!hasCopied ? onCopyToClipboard : undefined}
         >
-          <CopyIcon />
-          <styled.p textStyle="body.02">{!hasCopied ? ' Copy' : 'Copied!'}</styled.p>
+          <HStack>
+            <CopyIcon />
+            <styled.p textStyle="body.02">{!hasCopied ? ' Copy' : 'Copied!'}</styled.p>
+          </HStack>
         </Button>
       </Flex>
       <Button
@@ -73,6 +77,6 @@ export function SecretKeyDisplayerLayout(props: SecretKeyDisplayerLayoutProps) {
       >
         I've backed it up
       </Button>
-    </>
+    </Stack>
   );
 }

src/app/features/settings/settings.tsx

@@ -32,6 +32,8 @@ import { ThemeList } from './theme/theme-list';
 
 //  TODO 4370 task #2  - Fix AdvancedMenuItems and sub-menu hover interaction
 // on the radix site it says latest version is 2.0.5 but we have 2.0.6?
+// designs here https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?node-id=10352%3A137700&mode=dev
+// use this to add in replaced routable dialogs - void analytics.page('view', '/save-secret-key');
 export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) {
   const [showSignOut, setShowSignOut] = useState(false);
   const hasGeneratedWallet = !!useCurrentStacksAccount();

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

@@ -7,7 +7,7 @@ import { RotateLeftIcon } from '@app/ui/components/icons/rotate-left-icon';
 export function BackUpSecretKeyContent(): React.JSX.Element {
   return (
     <>
-      <styled.h1 textStyle="heading.03" mt="space.00" mb="space.04">
+      <styled.h1 textStyle="heading.03" mb="space.04">
         Back up your Secret Key
       </styled.h1>
       <styled.p textStyle="label.02" mb="space.08">

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

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { Form, Formik } from 'formik';
-import { styled } from 'leather-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 import { debounce } from 'ts-debounce';
 import * as yup from 'yup';
 
@@ -123,16 +123,16 @@ function SetPasswordPage() {
           {/* FIXME 4370 task #3 revisit and test this screen with set-password */}
           <TwoColumnLayout
             left={
-              <>
-                <styled.h1 textStyle="heading.03" mt="space.00" mb="space.04">
+              <Stack gap="space.04">
+                <styled.h1 textStyle="heading.03">
                   Set a <br />
                   password
                 </styled.h1>
                 <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>
-              </>
+              </Stack>
             }
             right={
               <>

src/app/pages/view-secret-key/view-secret-key.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { Stack, styled } from 'leather-styles/jsx';
+
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { RequestPassword } from '@app/components/request-password';
 import { SecretKeyDisplayer } from '@app/features/secret-key-displayer/secret-key-displayer';
 import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors';
 import { TwoColumnLayout } from '@app/ui/components/layout/page/two-column.layout';
 
-import { ViewSecretKeyContent } from './components/view-secret-key.content';
-
-// PETe - probably better to refactor this to not mess up heacer?
 export function ViewSecretKey() {
   const analytics = useAnalytics();
   const defaultWalletSecretKey = useDefaultWalletSecretKey();
@@ -22,7 +21,21 @@ export function ViewSecretKey() {
   if (showSecretKey) {
     return (
       <TwoColumnLayout
-        left={<ViewSecretKeyContent />}
+        left={
+          <Stack gap="space.04">
+            <styled.h1 textStyle="heading.03">
+              Your <br /> Secret Key
+            </styled.h1>
+            <styled.p textStyle="label.02">
+              These 24 words are your Secret Key. They create your account, and you sign in on
+              different devices with them. Make sure to save these somewhere safe.
+            </styled.p>
+
+            <styled.p textStyle="label.02">
+              If you lose these words, you lose your account.
+            </styled.p>
+          </Stack>
+        }
         right={<SecretKeyDisplayer secretKey={defaultWalletSecretKey ?? ''} />}
       />
     );

src/app/ui/components/containers/headers/header.tsx

@@ -4,6 +4,7 @@ import { Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { CloseIcon } from '@app/ui/components/icons/close-icon';
+import { HEADER_HEIGHT, POPUP_HEADER_HEIGHT } from '@app/ui/constants';
 
 import { HeaderActionButton } from './header-action-button';
 
@@ -42,6 +43,8 @@ export function Header({
     <styled.header
       px={variant === 'card' ? 'space.04' : { base: 'space.04', md: 'space.07' }}
       py={variant === 'card' ? 'space.04' : { base: 'space.04', md: 'space.05' }}
+      // maxHeight={{ base: `${POPUP_HEADER_HEIGHT}px`, md: `${HEADER_HEIGHT}px` }}
+      height={{ base: '68px', md: '80px' }} // get this working, maybe ysing calc?
     >
       <Flex
         width="100%"

src/app/ui/components/containers/popup/popup-card.tsx

@@ -1,13 +1,14 @@
 import { Stack } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
+import { FOOTER_HEIGHT, HEADER_HEIGHT } from '@app/ui/constants';
 
 export function PopupCard({ children }: HasChildren) {
   return (
     <Stack
       alignItems="center"
-      // #4140 = maxHeight needs to consider header + footer
-      // 167px = 72px header + 95px footer height
+      // #4140 = maxHeight needs to consider header + footer - get calc working!
+      // maxHeight={`calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px)`}
       maxHeight="calc(100vh - 167px)"
       overflowY="auto"
       px="space.05"

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

@@ -9,6 +9,7 @@ interface TwoColumnLayoutProps {
 
 // FIXME 4370 task #4 - finish the TwoColumn improvements and add demo to storybook along with other pages = homepage, standard page etc.
 export function TwoColumnLayout({ left, right }: TwoColumnLayoutProps): React.JSX.Element {
+  // const maxWidth = `${FULLPAGE_MAX_WIDTH}px`;
   return (
     <Flex
       flexDirection={{ base: 'column', md: 'row' }}
@@ -17,34 +18,27 @@ export function TwoColumnLayout({ left, right }: TwoColumnLayoutProps): React.JS
       mx={{ base: 'auto', md: 'space.03', lg: 'space.06' }}
       gap="space.05"
       width={{ base: '100vw', md: 'unset' }}
-      maxWidth={`${FULLPAGE_MAX_WIDTH}px`}
-      // maxWidth='882px'
+      maxWidth={`${FULLPAGE_MAX_WIDTH}px`} // not working
+      // maxWidth={maxWidth}
     >
-      <Flex
-        // alignItems={['center', 'center', 'center', 'flex-start']}
-        // textAlign={['center', 'center', 'center', 'left']}
-        flexDirection="column"
-        gap="space.04"
-      >
+      <Flex flexDirection="column" gap="space.04">
         {left}
       </Flex>
 
       <Flex
         gap="space.05"
         flexDirection="column"
-        // PETE - view secret key etc. has a width of 600px so could break that restricting it here
         px={{ base: 'space.00', md: 'space.10', lg: 'space.02' }}
         width={{ base: '100%', md: '600px' }} // this 600 should be 500px for password screen but consistent is better?
+        mb={{ base: 'space.05', md: '0' }}
       >
         <Stack
-          px={{ base: 'space.00', md: 'space.05' }}
-          pt={{ base: 'space.02', md: 'space.05' }}
-          pb={{ base: 'space.02', md: 'space.05' }}
+          p={{ base: 'space.02', md: 'space.05' }}
           gap="space.04"
           backgroundColor="accent.background-primary"
           borderRadius="xs"
           width="100%"
-          minWidth="600px" // for setPassword need to get this right
+          minWidth={{ base: '100%', md: '400px', lg: '600px' }} // for setPassword need to get this right
           flex="1"
         >
           {right}