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>
  );
 }