Update modal paddings

actualbudget · Apr 22, 2024 · ce416a7 · ce416a7
1 parent 10ce4f3
commit ce416a7
Show file tree

Hide file tree

Showing 23 changed files with 306 additions and 324 deletions.
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -23,9 +23,9 @@ import { ConfirmCategoryDelete } from './modals/ConfirmCategoryDelete';
 import { ConfirmTransactionEdit } from './modals/ConfirmTransactionEdit';
 import { ConfirmUnlinkAccount } from './modals/ConfirmUnlinkAccount';
 import { CoverModal } from './modals/CoverModal';
-import { CreateAccount } from './modals/CreateAccount';
+import { CreateAccountModal } from './modals/CreateAccountModal';
 import { CreateEncryptionKeyModal } from './modals/CreateEncryptionKeyModal';
-import { CreateLocalAccount } from './modals/CreateLocalAccount';
+import { CreateLocalAccountModal } from './modals/CreateLocalAccountModal';
 import { EditField } from './modals/EditField';
 import { EditRule } from './modals/EditRule';
 import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
@@ -105,7 +105,7 @@ export function Modals() {
 
         case 'add-account':
           return (
-            <CreateAccount
+            <CreateAccountModal
               key={name}
               modalProps={modalProps}
               syncServerStatus={syncServerStatus}
@@ -115,7 +115,7 @@ export function Modals() {
 
         case 'add-local-account':
           return (
-            <CreateLocalAccount
+            <CreateLocalAccountModal
               key={name}
               modalProps={modalProps}
               actions={actions}

diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
@@ -166,7 +166,7 @@ export const Modal = ({
                 position: 'absolute',
                 left: 0,
                 marginRight: !isNarrowWidth ? 5 : undefined,
-                marginLeft: !isNarrowWidth ? 15 : undefined,
+                marginLeft: !isNarrowWidth ? 15 : 5,
               }}
             >
               {leftHeaderContent}
@@ -200,7 +200,7 @@ export const Modal = ({
               style={{
                 position: 'absolute',
                 right: 0,
-                marginRight: !isNarrowWidth ? 15 : undefined,
+                marginRight: !isNarrowWidth ? 15 : 5,
                 marginLeft: !isNarrowWidth ? 5 : undefined,
               }}
             >

diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
@@ -42,11 +42,10 @@ export function AccountAutocompleteModal({
       focusAfterClose={false}
       {...modalProps}
       onClose={_onClose}
-      padding={0}
+      padding={10}
       style={{
         flex: 0,
         height: isNarrowWidth ? '85vh' : 275,
-        padding: '15px 10px',
         borderRadius: '6px',
         backgroundColor: theme.menuAutoCompleteBackground,
       }}

diff --git a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
@@ -85,11 +85,10 @@ export function AccountMenuModal({
       focusAfterClose={false}
       {...modalProps}
       onClose={_onClose}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
         height: '45vh',
-        padding: '0 10px',
         borderRadius: '6px',
       }}
       leftHeaderContent={
@@ -137,7 +136,6 @@ export function AccountMenuModal({
             justifyContent: 'space-between',
             alignContent: 'space-between',
             paddingTop: 10,
-            paddingBottom: 10,
           }}
         >
           <Button style={buttonStyle} onClick={_onEditNotes}>

diff --git a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
@@ -31,11 +31,9 @@ export function BudgetPageMenuModal({
       showHeader
       focusAfterClose={false}
       {...modalProps}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
-        padding: '0 10px',
-        paddingBottom: 10,
         borderRadius: '6px',
       }}
     >

diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
@@ -48,11 +48,10 @@ export function CategoryAutocompleteModal({
       focusAfterClose={false}
       {...modalProps}
       onClose={_onClose}
-      padding={0}
+      padding={10}
       style={{
         flex: 0,
         height: isNarrowWidth ? '85vh' : 275,
-        padding: '15px 10px',
         borderRadius: '6px',
         backgroundColor: theme.menuAutoCompleteBackground,
       }}

diff --git a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
@@ -93,11 +93,10 @@ export function CategoryGroupMenuModal({
       focusAfterClose={false}
       {...modalProps}
       onClose={_onClose}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
         height: '45vh',
-        padding: '0 10px',
         borderRadius: '6px',
       }}
       leftHeaderContent={
@@ -142,7 +141,6 @@ export function CategoryGroupMenuModal({
             justifyContent: 'space-between',
             alignContent: 'space-between',
             paddingTop: 10,
-            paddingBottom: 10,
           }}
         >
           <Button style={buttonStyle} onClick={_onAddCategory}>

diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -84,11 +84,10 @@ export function CategoryMenuModal({
       focusAfterClose={false}
       {...modalProps}
       onClose={_onClose}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
         height: '45vh',
-        padding: '0 10px',
         borderRadius: '6px',
       }}
       leftHeaderContent={
@@ -133,7 +132,6 @@ export function CategoryMenuModal({
             justifyContent: 'space-between',
             alignContent: 'space-between',
             paddingTop: 10,
-            paddingBottom: 10,
           }}
         >
           <Button style={buttonStyle} onClick={_onEditNotes}>

diff --git a/packages/desktop-client/src/components/modals/CoverModal.tsx b/packages/desktop-client/src/components/modals/CoverModal.tsx
@@ -74,45 +74,39 @@ export function CoverModal({
       showHeader
       focusAfterClose={false}
       {...modalProps}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
-        padding: '0 10px',
-        paddingBottom: 10,
         borderRadius: '6px',
       }}
     >
-      {() => (
-        <>
-          <View>
-            <FieldLabel title="Cover from category:" />
-            <TapField
-              value={categories.find(c => c.id === fromCategoryId)?.name}
-              onClick={onCategoryClick}
-            />
-          </View>
+      <View>
+        <FieldLabel title="Cover from category:" />
+        <TapField
+          value={categories.find(c => c.id === fromCategoryId)?.name}
+          onClick={onCategoryClick}
+        />
+      </View>
 
-          <View
-            style={{
-              justifyContent: 'center',
-              alignItems: 'center',
-              marginTop: 10,
-            }}
-          >
-            <Button
-              type="primary"
-              style={{
-                height: styles.mobileMinHeight,
-                marginLeft: styles.mobileEditingPadding,
-                marginRight: styles.mobileEditingPadding,
-              }}
-              onClick={() => _onSubmit(fromCategoryId)}
-            >
-              Transfer
-            </Button>
-          </View>
-        </>
-      )}
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingTop: 10,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            height: styles.mobileMinHeight,
+            marginLeft: styles.mobileEditingPadding,
+            marginRight: styles.mobileEditingPadding,
+          }}
+          onClick={() => _onSubmit(fromCategoryId)}
+        >
+          Transfer
+        </Button>
+      </View>
     </Modal>
   );
 }
diff --git a/...t/src/components/modals/CreateAccount.tsx → .../components/modals/CreateAccountModal.tsx b/...t/src/components/modals/CreateAccount.tsx → .../components/modals/CreateAccountModal.tsx
@@ -24,7 +24,7 @@ type CreateAccountProps = {
   upgradingAccountId?: string;
 };
 
-export function CreateAccount({
+export function CreateAccountModal({
   modalProps,
   syncServerStatus,
   upgradingAccountId,
@@ -129,7 +129,15 @@ export function CreateAccount({
   const simpleFinSyncFeatureFlag = useFeatureFlag('simpleFinSync');
 
   return (
-    <Modal title={title} {...modalProps}>
+    <Modal
+      title={title}
+      padding={10}
+      style={{
+        flex: 1,
+        borderRadius: '6px',
+      }}
+      {...modalProps}
+    >
       {() => (
         <View style={{ maxWidth: 500, gap: 30, color: theme.pageText }}>
           {upgradingAccountId == null && (

diff --git a/.../components/modals/CreateLocalAccount.tsx → ...onents/modals/CreateLocalAccountModal.tsx b/.../components/modals/CreateLocalAccount.tsx → ...onents/modals/CreateLocalAccountModal.tsx
@@ -12,7 +12,7 @@ import { InitialFocus } from '../common/InitialFocus';
 import { InlineField } from '../common/InlineField';
 import { Input } from '../common/Input';
 import { Link } from '../common/Link';
-import { Modal, ModalButtons } from '../common/Modal';
+import { Modal, ModalButtons, ModalTitle } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { Checkbox } from '../forms';
@@ -23,7 +23,7 @@ type CreateLocalAccountProps = {
   actions: BoundActions;
 };
 
-export function CreateLocalAccount({
+export function CreateLocalAccountModal({
   modalProps,
   actions,
 }: CreateLocalAccountProps) {
@@ -38,7 +38,10 @@ export function CreateLocalAccount({
   const validateBalance = balance => !isNaN(parseFloat(balance));
 
   return (
-    <Modal title="Create Local Account" {...modalProps}>
+    <Modal
+      title={<ModalTitle title="Create Local Account" shrinkOnOverflow />}
+      {...modalProps}
+    >
       {() => (
         <View>
           <form
@@ -62,7 +65,7 @@ export function CreateLocalAccount({
               }
             }}
           >
-            <InlineField label="Name" width="75%">
+            <InlineField label="Name" width="100%">
               <InitialFocus>
                 <Input
                   name="name"
@@ -85,7 +88,7 @@ export function CreateLocalAccount({
 
             <View
               style={{
-                width: '75%',
+                width: '100%',
                 flexDirection: 'row',
                 justifyContent: 'flex-end',
               }}
@@ -137,7 +140,7 @@ export function CreateLocalAccount({
               </View>
             </View>
 
-            <InlineField label="Balance" width="75%">
+            <InlineField label="Balance" width="100%">
               <Input
                 name="balance"
                 inputMode="decimal"

diff --git a/packages/desktop-client/src/components/modals/HoldBufferModal.tsx b/packages/desktop-client/src/components/modals/HoldBufferModal.tsx
@@ -42,48 +42,42 @@ export function HoldBufferModal({
       showHeader
       focusAfterClose={false}
       {...modalProps}
-      padding={0}
+      padding={10}
       style={{
         flex: 1,
-        padding: '0 10px',
-        paddingBottom: 10,
         borderRadius: '6px',
       }}
     >
-      {() => (
-        <>
-          <View>
-            <FieldLabel title="Hold this amount:" />
-            <InitialFocus>
-              <InputField
-                inputMode="decimal"
-                defaultValue={initialAmount}
-                onUpdate={value => setAmount(value)}
-                onEnter={() => _onSubmit(amount)}
-              />
-            </InitialFocus>
-          </View>
-          <View
-            style={{
-              justifyContent: 'center',
-              alignItems: 'center',
-              marginTop: 10,
-            }}
-          >
-            <Button
-              type="primary"
-              style={{
-                height: styles.mobileMinHeight,
-                marginLeft: styles.mobileEditingPadding,
-                marginRight: styles.mobileEditingPadding,
-              }}
-              onClick={() => _onSubmit(amount)}
-            >
-              Hold
-            </Button>
-          </View>
-        </>
-      )}
+      <View>
+        <FieldLabel title="Hold this amount:" />
+        <InitialFocus>
+          <InputField
+            inputMode="decimal"
+            defaultValue={initialAmount}
+            onUpdate={value => setAmount(value)}
+            onEnter={() => _onSubmit(amount)}
+          />
+        </InitialFocus>
+      </View>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingTop: 10,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            height: styles.mobileMinHeight,
+            marginLeft: styles.mobileEditingPadding,
+            marginRight: styles.mobileEditingPadding,
+          }}
+          onClick={() => _onSubmit(amount)}
+        >
+          Hold
+        </Button>
+      </View>
     </Modal>
   );
 }