Refactor RoleFormCreateProposal layout and simplify SafeRolesEditProp…

…osalSummaryPage structure
decentdao · Dec 5, 2024 · 7d2e56f · 7d2e56f
1 parent 8b3157d
commit 7d2e56f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 76 deletions.
diff --git a/src/components/Roles/forms/RoleFormCreateProposal.tsx b/src/components/Roles/forms/RoleFormCreateProposal.tsx
@@ -132,13 +132,12 @@ export function RoleFormCreateProposal({ close }: { close: () => void }) {
   };
 
   return (
-    <Box maxW="736px">
+    <Box w="full">
       <Flex
         flexDir="column"
         gap="1rem"
         p="1rem"
         bg="neutral-2"
-        maxW="736px"
         boxShadow={CARD_SHADOW}
         borderRadius="0.5rem"
       >

diff --git a/src/pages/dao/roles/edit/summary/SafeRolesEditProposalSummaryPage.tsx b/src/pages/dao/roles/edit/summary/SafeRolesEditProposalSummaryPage.tsx
@@ -1,19 +1,17 @@
-import { Box, Flex, Icon, Portal, Show, Text } from '@chakra-ui/react';
-import { ArrowLeft } from '@phosphor-icons/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useFormikContext } from 'formik';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { RoleFormCreateProposal } from '../../../../../components/Roles/forms/RoleFormCreateProposal';
 import PageHeader from '../../../../../components/ui/page/Header/PageHeader';
-import { SIDEBAR_WIDTH, useFooterHeight, useHeaderHeight } from '../../../../../constants/common';
+import { CONTENT_MAXW } from '../../../../../constants/common';
 import { DAO_ROUTES } from '../../../../../constants/routes';
 import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../../../../store/daoInfo/useDaoInfoStore';
 import { RoleFormValues } from '../../../../../types/roles';
 
 export function SafeRolesEditProposalSummaryPage() {
-  const headerHeight = useHeaderHeight();
   const navigate = useNavigate();
   const { safe } = useDaoInfoStore();
   const { t } = useTranslation(['roles', 'breadcrumbs']);
@@ -22,8 +20,6 @@ export function SafeRolesEditProposalSummaryPage() {
 
   const safeAddress = safe?.address;
 
-  const footerHeight = useFooterHeight();
-
   // @dev redirects back to roles edit page if no roles are edited (user refresh)
   useEffect(() => {
     const editedRoles = values.hats.filter(hat => !!hat.editedRole);
@@ -35,74 +31,24 @@ export function SafeRolesEditProposalSummaryPage() {
   if (!safeAddress) return null;
 
   return (
-    <Box>
-      <Show below="md">
-        <Portal>
-          <Box
-            position="fixed"
-            top={0}
-            h="100vh"
-            w="full"
-            bg="neutral-1"
-            px="1rem"
-            pt={headerHeight}
-            overflow="scroll"
-          >
-            <Flex
-              justifyContent="space-between"
-              alignItems="center"
-              my="1.75rem"
-            >
-              <Flex
-                gap="0.5rem"
-                alignItems="center"
-                aria-label={t('proposalNew', { ns: 'breadcrumbs' })}
-                onClick={() => {
-                  navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safeAddress));
-                }}
-              >
-                <Icon
-                  as={ArrowLeft}
-                  boxSize="1.5rem"
-                />
-                <Text textStyle="heading-small">{t('proposalNew', { ns: 'breadcrumbs' })}</Text>
-              </Flex>
-            </Flex>
-            <RoleFormCreateProposal
-              close={() => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safeAddress))}
-            />
-          </Box>
-        </Portal>
-      </Show>
-      <Show above="md">
-        <Portal>
-          <Box
-            position="absolute"
-            top={`calc(1rem + ${headerHeight})`}
-            left={{ base: SIDEBAR_WIDTH, '3xl': `calc(${SIDEBAR_WIDTH} + 9rem)` }}
-            bg="neutral-1"
-            px={`${window.innerWidth / 100}rem`}
-            width={{
-              base: `calc(100% - ${SIDEBAR_WIDTH})`,
-              '3xl': `calc(100% - 9rem - ${SIDEBAR_WIDTH})`,
-            }}
-            h={`calc(100vh - ${headerHeight} - ${footerHeight})`}
-          >
-            <PageHeader
-              title={t('proposalNew', { ns: 'breadcrumbs' })}
-              breadcrumbs={[
-                {
-                  terminus: t('createProposal', { ns: 'proposal' }),
-                  path: '',
-                },
-              ]}
-            />
-            <RoleFormCreateProposal
-              close={() => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safeAddress))}
-            />
-          </Box>
-        </Portal>
-      </Show>
+    <Box maxW={CONTENT_MAXW}>
+      <PageHeader
+        title={t('proposalNew', { ns: 'breadcrumbs' })}
+        breadcrumbs={[
+          {
+            terminus: t('createProposal', { ns: 'proposal' }),
+            path: '',
+          },
+        ]}
+      />
+      <Flex
+        flexDir="column"
+        alignItems="center"
+      >
+        <RoleFormCreateProposal
+          close={() => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safeAddress))}
+        />
+      </Flex>
     </Box>
   );
 }