Merge pull request #33 from bancodobrasil/fix/global-padding

Fix/global padding
bancodobrasil · Sep 29, 2023 · d8d8529 · d8d8529
2 parents ed8adf8 + ebaea0a
commit d8d8529
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 45 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -32,8 +32,6 @@ const Layout = ({ children }: Props) => {
             width: '100%',
             flex: 1,
             boxSizing: 'border-box',
-            paddingLeft: '32px',
-            paddingRight: '32px',
           }}
         >
           {children}

diff --git a/src/components/Menu/Forms/Attributes/FormAttributes.tsx b/src/components/Menu/Forms/Attributes/FormAttributes.tsx
@@ -390,7 +390,7 @@ export function FormAttributes({ meta, setMeta, loadingSubmit, onSubmit, onBack,
     ));
 
   return (
-    <Form onSubmit={handleFormSubmit}>
+    <Form sx={{ paddingLeft: '2rem' }} onSubmit={handleFormSubmit}>
       <Box
         sx={{
           display: 'flex',

diff --git a/src/components/Menu/Forms/BasicInfo/FormBasicInfo.tsx b/src/components/Menu/Forms/BasicInfo/FormBasicInfo.tsx
@@ -138,15 +138,26 @@ export const FormBasicInfo = ({
 
   // Draw the menu
   return (
-    <Form onSubmit={handleFormSubmit}>
+    <Form onSubmit={handleFormSubmit} sx={{ paddingLeft: '2rem', paddingRight: '2rem' }}>
       {action === FormAction.UPDATE && (
-        <Box sx={{ flex: '0 1 auto', flexDirection: 'column', mb: '1rem', height: '4rem' }}>
+        <Box
+          sx={{
+            flex: '0 1 auto',
+            flexDirection: 'column',
+            mb: '1rem',
+            height: '4rem',
+          }}
+        >
           <TextField
             id="uuid"
-            label={t('menu.of', { field: 'uuid' })}
+            label={<span style={{ color: 'black' }}>{t('menu.of', { field: 'uuid' })}</span>}
             disabled
             value={uuid}
-            sx={{ width: '33.2rem' }}
+            sx={{
+              width: '33.2rem',
+              backgroundColor: 'white',
+              borderColor: 'black',
+            }}
           />
         </Box>
       )}
@@ -174,7 +185,7 @@ export const FormBasicInfo = ({
           }}
           error={!!nameError}
           helperText={nameErrorOrLabel()}
-          sx={{ width: '33.2rem', height: '3rem' }}
+          sx={{ width: '33.2rem', height: '3rem', backgroundColor: 'white' }}
         />
         <Box sx={{ mt: '2.5rem', width: '28.25rem', height: '2.63rem' }}>
           {renderHasConditionCheckbox()}

diff --git a/src/pages/Menu/Create/Create.tsx b/src/pages/Menu/Create/Create.tsx
@@ -63,35 +63,39 @@ export const CreateMenu = () => {
 
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Helmet>
-        <title>{t('menu.create.title')}</title>
-      </Helmet>
-      <Box sx={{ display: 'flex', flexDirection: 'column', flex: '0 1 auto' }}>
-        <AppBreadcrumbs
-          items={[
-            { label: t('menu.title', { count: 2 }), navigateTo: '/' },
-            { label: t('menu.create.title') },
-          ]}
+      <Box sx={{ paddingLeft: '2rem' }}>
+        <Helmet>
+          <title>{t('menu.create.title')}</title>
+        </Helmet>
+        <Box sx={{ display: 'flex', flexDirection: 'column', flex: '0 1 auto' }}>
+          <AppBreadcrumbs
+            items={[
+              { label: t('menu.title', { count: 2 }), navigateTo: '/' },
+              { label: t('menu.create.title') },
+            ]}
+            onBack={onBackClickHandler}
+          />
+          <PageTitle onClick={onBackClickHandler} PageTitle={t('menu.create.title')} />
+        </Box>
+      </Box>
+      <Box>
+        <FormBasicInfo
+          name={name}
+          setName={setName}
+          nameError={nameError}
+          setNameError={setNameError}
+          mustDeferChanges={mustDeferChanges}
+          setMustDeferChanges={setMustDeferChanges}
+          hasConditions={hasConditions}
+          setHasConditions={setHasConditions}
+          parameters={parameters}
+          setParameters={setParameters}
+          loadingSubmit={loadingSubmit}
+          onSubmit={onSubmit}
           onBack={onBackClickHandler}
+          action={FormAction.CREATE}
         />
-        <PageTitle onClick={onBackClickHandler} PageTitle={t('menu.create.title')} />
       </Box>
-      <FormBasicInfo
-        name={name}
-        setName={setName}
-        nameError={nameError}
-        setNameError={setNameError}
-        mustDeferChanges={mustDeferChanges}
-        setMustDeferChanges={setMustDeferChanges}
-        hasConditions={hasConditions}
-        setHasConditions={setHasConditions}
-        parameters={parameters}
-        setParameters={setParameters}
-        loadingSubmit={loadingSubmit}
-        onSubmit={onSubmit}
-        onBack={onBackClickHandler}
-        action={FormAction.CREATE}
-      />
     </Box>
   );
 };
diff --git a/src/pages/Menu/Edit/Edit.tsx b/src/pages/Menu/Edit/Edit.tsx
@@ -197,7 +197,15 @@ export const EditMenu = () => {
       <Helmet>
         <title>{t('menu.edit.title')}</title>
       </Helmet>
-      <Box sx={{ display: 'flex', flexDirection: 'column', flex: '0 1 auto' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: '0 1 auto',
+          paddingLeft: '2rem',
+          paddingRight: '2rem',
+        }}
+      >
         <AppBreadcrumbs
           items={[
             { label: t('menu.title', { count: 2 }), navigateTo: '/' },
@@ -262,7 +270,7 @@ export const EditMenu = () => {
       </Box>
       <Box sx={{ width: '100%' }} className="flex flex-1 flex-col">
         <TabContext value={tab}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider', paddingLeft: '2rem' }}>
             <TabList onChange={onTabChange} aria-label="Menu tabs">
               <Tab
                 data-testid="tab-basic-info"
@@ -282,7 +290,7 @@ export const EditMenu = () => {
               />
             </TabList>
           </Box>
-          <TabPanel value={TAB_BASIC_INFO} sx={{ p: '0px' }}>
+          <TabPanel value={TAB_BASIC_INFO} sx={{ p: '0px', backgroundColor: '#F4F5F7' }}>
             <FormBasicInfo
               uuid={uuid}
               name={name}
@@ -319,6 +327,7 @@ export const EditMenu = () => {
           </TabPanel>
         </TabContext>
       </Box>
+      <Box sx={{ backgroundColor: '#F4F5F7', height: '100%' }} />
     </Box>
   );
 };
diff --git a/src/pages/Menu/EditTemplate/EditTemplate.tsx b/src/pages/Menu/EditTemplate/EditTemplate.tsx
@@ -275,7 +275,7 @@ export const EditTemplateMenu = () => {
     );
 
   return (
-    <Box>
+    <Box sx={{ paddingLeft: '2rem', paddingRight: '2rem' }}>
       <Box
         sx={{
           width: '100%',

diff --git a/src/pages/Menu/List/List.tsx b/src/pages/Menu/List/List.tsx
@@ -182,7 +182,7 @@ export const ListMenu = () => {
     );
 
   return (
-    <>
+    <Box sx={{ paddingLeft: '2rem', paddingRight: '2rem' }}>
       <Helmet>
         <title>{t('menu.list.title')}</title>
       </Helmet>
@@ -245,6 +245,6 @@ export const ListMenu = () => {
           />
         </Paper>
       </Box>
-    </>
+    </Box>
   );
 };
diff --git a/src/pages/Menu/Pendencies/List.tsx b/src/pages/Menu/Pendencies/List.tsx
@@ -177,7 +177,7 @@ const ListPendencies = () => {
   if (getMenuQuery.loading || listPendenciesQuery.loading) return <Loading />;
 
   return (
-    <Box>
+    <Box sx={{ paddingLeft: '2rem' }}>
       <Helmet>
         <title>{t('menu.pendencies.title')}</title>
       </Helmet>

diff --git a/src/pages/Menu/Revisions/Create.tsx b/src/pages/Menu/Revisions/Create.tsx
@@ -216,7 +216,7 @@ const CreateRevision = () => {
   if (loading) return <Loading />;
 
   return (
-    <Box>
+    <Box sx={{ px: '2rem' }}>
       <Helmet>
         <title>{t('menuRevision.create.title')}</title>
       </Helmet>

diff --git a/src/pages/Menu/Revisions/Publish.tsx b/src/pages/Menu/Revisions/Publish.tsx
@@ -257,7 +257,7 @@ const PublishRevision = () => {
   if (loading) return <Loading />;
 
   return (
-    <Box>
+    <Box sx={{ px: '2rem' }}>
       <Helmet>
         <title>{t('menuRevision.publish.title')}</title>
       </Helmet>

diff --git a/src/pages/Menu/Revisions/Restore.tsx b/src/pages/Menu/Revisions/Restore.tsx
@@ -243,7 +243,7 @@ const RestoreRevision = () => {
   if (loading) return <Loading />;
 
   return (
-    <Box>
+    <Box sx={{ px: '2rem' }}>
       <Helmet>
         <title>{t('menuRevision.restore.title')}</title>
       </Helmet>

diff --git a/src/pages/Menu/Show/Show.tsx b/src/pages/Menu/Show/Show.tsx
@@ -166,7 +166,7 @@ export const ShowMenu = () => {
     );
 
   return (
-    <Box>
+    <Box sx={{ paddingLeft: '2rem' }}>
       <Helmet>
         <title>{data?.menu.name}</title>
       </Helmet>
-Original file line number
+Diff line change
@@ Expand Up / @@ -275,7 +275,7 @@ export const EditTemplateMenu = () => { @@
         );
       return (
-        <Box>
+        <Box sx={{ paddingLeft: '2rem', paddingRight: '2rem' }}>
           <Box
             sx={{
               width: '100%',
@@ Expand Down @@