fix: remove radix layout components

.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',
+              },
             ],
           },
         ],

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';

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>

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>

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>