From 029e6b98bb58c3b218e09f7bf6cde288b922cccf Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Fri, 1 Sep 2023 09:06:22 +0400
Subject: [PATCH] fix: remove radix layout components

---
 .eslintrc.js                                                | 5 +++++
 src/app/components/modal-header.tsx                         | 3 +--
 .../components/create-account-action.tsx                    | 4 ++--
 .../pages/select-network/components/add-network-button.tsx  | 4 ++--
 src/app/pages/unlock.tsx                                    | 6 ++----
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 95b69b2fbf9..49c75eae427 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -97,6 +97,11 @@ module.exports = {
                 importNames: ['useSelector'],
                 message: 'Selectors must be expored from the store via a hook',
               },
+              {
+                name: '@radix-ui/themes',
+                importNames: ['Flex'],
+                message: 'Layout components should be imported from leaf-styles/jsx',
+              },
             ],
           },
         ],
diff --git a/src/app/components/modal-header.tsx b/src/app/components/modal-header.tsx
index b159df996b4..76d7fb22ceb 100644
--- a/src/app/components/modal-header.tsx
+++ b/src/app/components/modal-header.tsx
@@ -2,8 +2,7 @@ import { FiArrowLeft, FiX } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, IconButton } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { Flex } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leaf-styles/jsx';
 import { token } from 'leaf-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx
index 346682a26d3..9e16500dce3 100644
--- a/src/app/features/switch-account-drawer/components/create-account-action.tsx
+++ b/src/app/features/switch-account-drawer/components/create-account-action.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@radix-ui/themes';
+import { Flex } from 'leaf-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
@@ -7,7 +7,7 @@ interface CreateAccountActionProps {
 }
 export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProps) {
   return (
-    <Flex pt="5" pb="5" px="5" grow="1">
+    <Flex py="space.05" px="space.05" flexGrow="1">
       <LeatherButton fullWidth onClick={() => onCreateAccount()}>
         Create new account
       </LeatherButton>
diff --git a/src/app/pages/select-network/components/add-network-button.tsx b/src/app/pages/select-network/components/add-network-button.tsx
index 202238d1057..b340f80699b 100644
--- a/src/app/pages/select-network/components/add-network-button.tsx
+++ b/src/app/pages/select-network/components/add-network-button.tsx
@@ -1,6 +1,6 @@
-import { Flex } from '@radix-ui/themes';
 import { ButtonProps } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
+import { Flex } from 'leaf-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
@@ -9,7 +9,7 @@ interface AddNetworkButtonProps extends ButtonProps {
 }
 export function AddNetworkButton({ onAddNetwork }: AddNetworkButtonProps) {
   return (
-    <Flex pt="5" pb="5" px="5" grow="1">
+    <Flex py="space.05" px="space.05" flexGrow="1">
       <LeatherButton data-testid={SettingsSelectors.BtnAddNetwork} fullWidth onClick={onAddNetwork}>
         Add a network
       </LeatherButton>
diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx
index 67fe5e2a553..2ea558d5d99 100644
--- a/src/app/pages/unlock.tsx
+++ b/src/app/pages/unlock.tsx
@@ -6,6 +6,7 @@ import { Box } from 'leaf-styles/jsx';
 import { token } from 'leaf-styles/tokens';
 
 import { WALLET_ENVIRONMENT } from '@shared/environment';
+import { RouteUrls } from '@shared/route-urls';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { isFullPageMode, isPopupMode } from '@app/common/utils';
@@ -32,10 +33,7 @@ export function Unlock() {
     }
   }, [hasApprovedNewBrand, navigate]);
 
-  // Users land on unlock page as they've been directed here from `<AccountGate/>`.
-  // On successful unlock, we can navigate back to the previous page, now
-  // with account details.
-  const handleSuccess = () => navigate(-1);
+  const handleSuccess = () => navigate(RouteUrls.Home);
 
   return (
     <CenteredPageContainer>