Fix dialog and tab paddings

pkirilin · Jul 2, 2024 · baa05dd · baa05dd
1 parent 1eed443
commit baa05dd
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 31 deletions.
diff --git a/src/frontend/src/features/note/addEdit/ui/AddNoteDialog.tsx b/src/frontend/src/features/note/addEdit/ui/AddNoteDialog.tsx
@@ -45,14 +45,15 @@ export const AddNoteDialog: FC<Props> = ({
 
   return (
     <Dialog
-      disableContentPadding
+      disableContentPaddingTop
+      disableContentPaddingBottom
       pinToTop
       renderMode="fullScreenOnMobile"
       opened={opened}
       title="New note"
       content={
         <TabContext value={selectedInputMethod}>
-          <Box px={3} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <TabList
               variant="scrollable"
               scrollButtons="auto"
@@ -72,7 +73,7 @@ export const AddNoteDialog: FC<Props> = ({
               />
             </TabList>
           </Box>
-          <Box pb={0} component={TabPanel} value={'fromInput' satisfies InputMethod}>
+          <Box px={0} pb={0} component={TabPanel} value={'fromInput' satisfies InputMethod}>
             <NoteInputForm
               id="note-input-form"
               values={noteFormValues}
@@ -91,7 +92,16 @@ export const AddNoteDialog: FC<Props> = ({
               onSubmitDisabledChange={onSubmitDisabledChange}
             />
           </Box>
-          <TabPanel value={'fromPhoto' satisfies InputMethod}>
+          <Box
+            px={0}
+            pb={
+              recognizeNotesResult.isSuccess && recognizeNotesResult.notes.length > 0
+                ? 0
+                : undefined
+            }
+            component={TabPanel}
+            value={'fromPhoto' satisfies InputMethod}
+          >
             <NoteInputFromPhotoFlow
               opened={opened}
               submitLoading={submitLoading}
@@ -109,7 +119,7 @@ export const AddNoteDialog: FC<Props> = ({
               onUploadSuccess={onUploadSuccess}
               onProductFormValuesChange={onProductFormValuesChange}
             />
-          </TabPanel>
+          </Box>
         </TabContext>
       }
       onClose={onClose}

diff --git a/src/frontend/src/features/note/addEdit/ui/EditNoteDialog.tsx b/src/frontend/src/features/note/addEdit/ui/EditNoteDialog.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { type FC } from 'react';
 import { type noteModel } from '@/entities/note';
 import { ProductAutocomplete } from '@/entities/product';
@@ -25,30 +24,29 @@ export const EditNoteDialog: FC<Props> = ({
 }) => {
   return (
     <Dialog
-      disableContentPadding
+      disableContentPaddingBottom
+      pinToTop
       renderMode="fullScreenOnMobile"
       opened={opened}
       title="Edit note"
       content={
-        <Box pt={3} pb={1} px={3}>
-          <NoteInputForm
-            id="note-input-form"
-            values={noteFormValues}
-            productAutocompleteInput={productAutocompleteInput}
-            renderProductAutocomplete={productAutocompleteProps => (
-              <ProductAutocomplete
-                {...productAutocompleteProps}
-                autoFocus
-                formValues={productFormValues}
-                onChange={onProductChange}
-                options={productAutocompleteData.options}
-                loading={productAutocompleteData.isLoading}
-              />
-            )}
-            onSubmit={onSubmit}
-            onSubmitDisabledChange={onSubmitDisabledChange}
-          />
-        </Box>
+        <NoteInputForm
+          id="note-input-form"
+          values={noteFormValues}
+          productAutocompleteInput={productAutocompleteInput}
+          renderProductAutocomplete={productAutocompleteProps => (
+            <ProductAutocomplete
+              {...productAutocompleteProps}
+              autoFocus
+              formValues={productFormValues}
+              onChange={onProductChange}
+              options={productAutocompleteData.options}
+              loading={productAutocompleteData.isLoading}
+            />
+          )}
+          onSubmit={onSubmit}
+          onSubmitDisabledChange={onSubmitDisabledChange}
+        />
       }
       onClose={onClose}
       renderCancel={cancelProps => (

diff --git a/src/frontend/src/shared/ui/Dialog/FullScreenDialog.tsx b/src/frontend/src/shared/ui/Dialog/FullScreenDialog.tsx
@@ -27,7 +27,8 @@ const FullScreenDialog: FC<Props> = ({
   title,
   opened,
   content,
-  disableContentPadding,
+  disableContentPaddingTop,
+  disableContentPaddingBottom,
   onClose,
   renderSubmit,
 }) => (
@@ -47,7 +48,9 @@ const FullScreenDialog: FC<Props> = ({
         })}
       </Toolbar>
     </AppBar>
-    <Box p={disableContentPadding ? 0 : 2}>{content}</Box>
+    <Box pt={disableContentPaddingTop ? 0 : 2} pb={disableContentPaddingBottom ? 0 : 2} px={2}>
+      {content}
+    </Box>
   </MuiDialog>
 );
 

diff --git a/src/frontend/src/shared/ui/Dialog/ModalDialog.tsx b/src/frontend/src/shared/ui/Dialog/ModalDialog.tsx
@@ -17,7 +17,8 @@ const ModalDialog: FC<Props> = ({
   title,
   opened,
   content,
-  disableContentPadding,
+  disableContentPaddingTop,
+  disableContentPaddingBottom,
   pinToTop,
   renderSubmit,
   renderCancel,
@@ -46,7 +47,13 @@ const ModalDialog: FC<Props> = ({
       <CloseIcon />
     </IconButton>
     <MuiDialogTitle>{title}</MuiDialogTitle>
-    <MuiDialogContent sx={{ padding: disableContentPadding ? 0 : undefined }} dividers>
+    <MuiDialogContent
+      sx={{
+        paddingTop: disableContentPaddingTop ? 0 : undefined,
+        paddingBottom: disableContentPaddingBottom ? 0 : undefined,
+      }}
+      dividers
+    >
       {content}
     </MuiDialogContent>
     <MuiDialogActions

diff --git a/src/frontend/src/shared/ui/Dialog/types.ts b/src/frontend/src/shared/ui/Dialog/types.ts
@@ -7,7 +7,8 @@ export interface DialogBaseProps {
   title: string;
   opened: boolean;
   content: ReactElement;
-  disableContentPadding?: boolean;
+  disableContentPaddingTop?: boolean;
+  disableContentPaddingBottom?: boolean;
   pinToTop?: boolean;
   onClose: () => void;
   renderSubmit: RenderActionFn;