fix: choose account padding

leather-io · May 3, 2022 · 13d091e · 13d091e
1 parent feebd62
commit 13d091e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx
@@ -8,6 +8,7 @@ import { useWallet } from '@app/common/hooks/use-wallet';
 import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
 import { Header } from '@app/components/header';
 import { Accounts } from '@app/pages/choose-account/components/accounts';
+import { POPUP_CENTER_WIDTH } from '@shared/constants';
 
 export const ChooseAccount = memo(() => {
   const { name: appName } = useAppDetails();
@@ -25,8 +26,8 @@ export const ChooseAccount = memo(() => {
   }, [handleUnmount]);
 
   return (
-    <Flex flexDirection="column" px={['loose', 'unset']} width="100%">
-      <Stack spacing="loose" textAlign="center">
+    <Flex alignItems="center" flexDirection="column" px="loose" width="100%">
+      <Stack minWidth={`${POPUP_CENTER_WIDTH}px`} spacing="loose" textAlign="center">
         <AppIcon mt="extra-loose" mb="loose" size="72px" />
         <Stack spacing="base">
           <Title fontSize={4}>Choose an account</Title>

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -20,6 +20,7 @@ import {
 import { slugify } from '@app/common/utils';
 import { useAccounts, useHasCreatedAccount } from '@app/store/accounts/account.hooks';
 import { useAddressBalances } from '@app/query/balance/balance.hooks';
+import { POPUP_CENTER_WIDTH } from '@shared/constants';
 
 const loadingProps = { color: '#A1A7B3' };
 const getLoadingProps = (loading: boolean) => (loading ? loadingProps : {});
@@ -150,7 +151,7 @@ export const Accounts = memo(() => {
   return (
     <>
       <AddAccountAction />
-      <Box mt="base">
+      <Box minWidth={`${POPUP_CENTER_WIDTH}px`} mt="base" px="loose">
         <Virtuoso
           useWindowScroll
           data={accounts}

diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect } from 'react';
 import { Formik } from 'formik';
 import * as yup from 'yup';
-import { Stack } from '@stacks/ui';
+import { Flex, Stack } from '@stacks/ui';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useFeeSchema } from '@app/common/validation/use-fee-schema';
@@ -88,31 +88,33 @@ function TransactionRequestBase(): JSX.Element | null {
   if (!transactionRequest) return null;
 
   return (
-    <Stack px='loose' spacing="loose">
-      <PageTop />
-      <PostConditionModeWarning />
-      <TransactionError />
-      <PostConditions />
-      {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
-      {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
-      {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
-      <Formik
-        initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
-        onSubmit={onSubmit}
-        validateOnChange={false}
-        validateOnBlur={false}
-        validateOnMount={false}
-        validationSchema={validationSchema}
-      >
-        {() => (
-          <>
-            <FeeForm />
-            <SubmitAction />
-            <HighFeeDrawer />
-          </>
-        )}
-      </Formik>
-    </Stack>
+    <Flex alignItems="center" flexDirection="column" width="100%">
+      <Stack px="loose" spacing="loose">
+        <PageTop />
+        <PostConditionModeWarning />
+        <TransactionError />
+        <PostConditions />
+        {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
+        {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
+        {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
+        <Formik
+          initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
+          onSubmit={onSubmit}
+          validateOnChange={false}
+          validateOnBlur={false}
+          validateOnMount={false}
+          validationSchema={validationSchema}
+        >
+          {() => (
+            <>
+              <FeeForm />
+              <SubmitAction />
+              <HighFeeDrawer />
+            </>
+          )}
+        </Formik>
+      </Stack>
+    </Flex>
   );
 }