Revert "feat: add set password page"

This reverts commit 8a2bfab.

src/app/components/header.tsx

@@ -1,24 +1,43 @@
 import { memo, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { color, Flex, FlexProps, IconButton, Stack } from '@stacks/ui';
-import { FiMoreHorizontal, FiArrowLeft } from 'react-icons/fi';
+import { Box, BoxProps, color, Flex, FlexProps, IconButton, Stack } from '@stacks/ui';
+import { FiMoreHorizontal as IconDots, FiArrowLeft as IconArrowLeft } from 'react-icons/fi';
 
 import { HiroWalletLogo } from '@app/components/hiro-wallet-logo';
 import { useDrawers } from '@app/common/hooks/use-drawers';
-import { isFullPage } from '@app/common/utils';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
 import { Caption, Title } from '@app/components/typography';
 import { OnboardingSelectors } from '@tests/integration/onboarding.selectors';
 import { RouteUrls } from '@shared/route-urls';
 
+const MenuButton = memo((props: BoxProps) => {
+  const { showSettings, setShowSettings } = useDrawers();
+  return (
+    <IconButton
+      size="36px"
+      iconSize="20px"
+      onMouseUp={showSettings ? undefined : () => setShowSettings(true)}
+      pointerEvents={showSettings ? 'none' : 'all'}
+      color={color('text-caption')}
+      _hover={{ color: color('text-title') }}
+      data-testid="menu-button"
+      icon={IconDots}
+      {...props}
+    />
+  );
+});
+
+const HeaderTitle: React.FC<BoxProps> = props => (
+  <Title fontSize="20px" lineHeight="28px" fontWeight={500} {...props} />
+);
+
 interface HeaderProps extends FlexProps {
   onClose?: () => void;
   hideActions?: boolean;
   title?: string;
 }
 export const Header: React.FC<HeaderProps> = memo(props => {
   const { onClose, title, hideActions, ...rest } = props;
-  const { showSettings, setShowSettings } = useDrawers();
   const navigate = useNavigate();
 
   const version = useMemo(() => {
@@ -43,29 +62,14 @@ export const Header: React.FC<HeaderProps> = memo(props => {
       position="relative"
       {...rest}
     >
-      <Stack alignItems="center" isInline>
-        {onClose ? <IconButton icon={FiArrowLeft} onClick={onClose} /> : null}
-        {title ? (
-          <Title fontSize="20px" fontWeight={500} lineHeight="28px" {...props}>
-            {title}
-          </Title>
-        ) : null}
-      </Stack>
-      <Stack
-        alignItems="center"
-        flexGrow={1}
-        isInline
-        justifyContent={onClose ? 'center' : 'unset'}
-        pt="7px"
-      >
-        {!onClose || isFullPage ? (
-          <>
-            <HiroWalletLogo
-              data-testid={OnboardingSelectors.HiroWalletLogoRouteToHome}
-              onClick={() => navigate(RouteUrls.Home)}
-            />
+      {!title ? (
+        <Stack alignItems="center" pt="7px" isInline>
+          <HiroWalletLogo
+            data-testid={OnboardingSelectors.HiroWalletLogoRouteToHome}
+            onClick={() => navigate(RouteUrls.Home)}
+          />
+          {version ? (
             <Caption
-              display={!version ? 'none' : 'unset'}
               pt="extra-tight"
               mt="2px"
               color="#8D929A"
@@ -75,24 +79,25 @@ export const Header: React.FC<HeaderProps> = memo(props => {
             >
               {version}
             </Caption>
-          </>
-        ) : null}
-      </Stack>
-      <Stack alignItems="center" flexShrink={0} isInline pt={hideActions ? '7px' : 0}>
+          ) : null}
+        </Stack>
+      ) : (
+        <Box pt={onClose ? 'loose' : 'unset'} pr="tight">
+          {onClose ? (
+            <IconButton
+              top="base-tight"
+              position="absolute"
+              left="base"
+              onClick={onClose}
+              icon={IconArrowLeft}
+            />
+          ) : null}
+          <HeaderTitle>{title}</HeaderTitle>
+        </Box>
+      )}
+      <Stack flexShrink={0} pt={hideActions ? '7px' : 0} alignItems="center" isInline>
         <NetworkModeBadge />
-        {!hideActions && (
-          <IconButton
-            _hover={{ color: color('text-title') }}
-            color={color('text-caption')}
-            data-testid="menu-button"
-            iconSize="20px"
-            icon={FiMoreHorizontal}
-            onMouseUp={showSettings ? undefined : () => setShowSettings(true)}
-            pointerEvents={showSettings ? 'none' : 'all'}
-            size="36px"
-            {...props}
-          />
-        )}
+        {!hideActions && <MenuButton />}
       </Stack>
     </Flex>
   );

src/app/components/styles/full-page-styles.tsx

@@ -14,5 +14,11 @@ export const fullPageStyles = css`
       justify-content: center;
       margin: 0 auto;
     }
+    .temp {
+      max-width: 440px;
+    }
+    .onboarding-text {
+      text-align: center;
+    }
   }
 `;

src/app/pages/home/home.tsx

@@ -5,7 +5,6 @@ import { Stack } from '@stacks/ui';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useWallet } from '@app/common/hooks/use-wallet';
 import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
-import { isFullPage } from '@app/common/utils';
 import { Header } from '@app/components/header';
 import { HiroMessages } from '@app/features/hiro-messages/hiro-messages';
 import { ActivityList } from '@app/features/activity-list/account-activity';
@@ -16,7 +15,6 @@ import { RouteUrls } from '@shared/route-urls';
 import { HomePageSelectors } from '@tests/page-objects/home-page.selectors';
 
 import { HomeTabs } from './components/home-tabs';
-import { fullPageContent } from './home.styles';
 
 export const Home = () => {
   const { decodedAuthRequest } = useOnboardingState();
@@ -40,12 +38,7 @@ export const Home = () => {
 
   return (
     <>
-      <Stack
-        className={isFullPage ? fullPageContent : undefined}
-        data-testid="home-page"
-        flexGrow={1}
-        spacing="loose"
-      >
+      <Stack data-testid="home-page" flexGrow={1} spacing="loose">
         <CurrentAccount />
         <HomeActions />
         <HomeTabs

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

@@ -1,7 +1,8 @@
 import { cx } from '@emotion/css';
-import { Box, color, Flex, Stack } from '@stacks/ui';
+import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi';
+import { Box, Button, color, Flex, Stack } from '@stacks/ui';
 
-import { Text, Title } from '@app/components/typography';
+import { Caption, Text, Title } from '@app/components/typography';
 import { Link } from '@app/components/link';
 import { isFullPage, isPopup } from '@app/common/utils';
 import KeyIllustrationFull from '@assets/images/onboarding/key-illustration-full.svg';
@@ -11,12 +12,11 @@ import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { Header } from '@app/components/header';
 
 import {
-  fullPageContent,
+  fullPageContentText,
   fullPageTitle,
-  popupContent,
+  popupContentText,
   popupTitle,
 } from './back-up-secret-key.styles';
-import { BackUpSecretKeyActions } from './components/back-up-secret-key-actions';
 
 interface BackUpSecretKeyLayoutProps {
   hasCopied: boolean;
@@ -31,7 +31,7 @@ export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.El
   return (
     <Stack isInline={isFullPage} width="100%">
       <Flex
-        className={cx({ [fullPageContent]: isFullPage }, { [popupContent]: isPopup })}
+        className={cx({ [fullPageContentText]: isFullPage }, { [popupContentText]: isPopup })}
         flexGrow={1}
         justifyContent="center"
       >
@@ -48,11 +48,39 @@ export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.El
             access your account on a new device, in a different wallet, or in case you lose your
             password — so back it up somewhere safe.
           </Text>
-          {isFullPage && <BackUpSecretKeyActions onBackedUpSecretKey={onBackedUpSecretKey} />}
+          <Stack alignItems="center" isInline>
+            <Box as={FiRotateCcw} color={color('text-caption')} size="12px" />
+            <Caption>Your Secret Key gives access to your account</Caption>
+          </Stack>
+          <Stack alignItems="center" isInline>
+            <Box as={FiEyeOff} color={color('text-caption')} size="12px" />
+            <Caption>Never share your Secret Key</Caption>
+          </Stack>
+          <Stack alignItems="center" isInline>
+            <Box as={FiLock} color={color('text-caption')} size="12px" />
+            <Caption>Put it somewhere private and secure</Caption>
+          </Stack>
+          <Stack alignItems={isFullPage ? 'center' : 'start'} isInline={isFullPage} spacing="loose">
+            <Button
+              borderRadius="10px"
+              height="48px"
+              mr="24px !important"
+              onClick={onBackedUpSecretKey}
+              width="198px"
+            >
+              I've backed it up
+            </Button>
+            <Stack isInline alignItems="center">
+              <Caption mr="4px !important">Or</Caption>
+              <Link fontSize="14px" onClick={() => {}}>
+                back it up later
+              </Link>
+            </Stack>
+          </Stack>
         </Stack>
       </Flex>
       <Flex
-        className={cx({ [fullPageContent]: isFullPage }, { [popupContent]: isPopup })}
+        className={cx({ [fullPageContentText]: isFullPage }, { [popupContentText]: isPopup })}
         flexGrow={1}
         justifyContent="center"
       >
@@ -75,11 +103,6 @@ export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.El
           </Stack>
         </Box>
       </Flex>
-      {isPopup && (
-        <Stack mt="loose" spacing="loose">
-          <BackUpSecretKeyActions onBackedUpSecretKey={onBackedUpSecretKey} />
-        </Stack>
-      )}
     </Stack>
   );
 }

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-export const fullPageContent = css`
+export const fullPageContentText = css`
   align-items: center;
 `;
 
@@ -9,7 +9,7 @@ export const fullPageTitle = css`
   line-height: 60px;
 `;
 
-export const popupContent = css`
+export const popupContentText = css`
   margin-top: 16px;
 `;