fixed issue Refine Settings Layout (#3429)

* fixed issue Refine Settings Layout

* fixed width and issue

* Fix according to review

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { objectSettingsWidth } from '../data-model/constants/objectSettings';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 
 const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   display: flex;
@@ -8,7 +8,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   gap: ${({ theme }) => theme.spacing(8)};
   overflow: auto;
   padding: ${({ theme }) => theme.spacing(8)};
-  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)};
+  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth + 'px')};
 `;
 
 export { StyledSettingsPageContainer as SettingsPageContainer };

packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts

@@ -1 +1 @@
-export const objectSettingsWidth = '512px';
+export const objectSettingsWidth = 512;

packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
 import { AuthModal } from '@/auth/components/Modal';
@@ -11,8 +12,12 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
+import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
@@ -39,7 +44,7 @@ const StyledLayout = styled.div`
   }
 `;
 
-const StyledPageContainer = styled.div`
+const StyledPageContainer = styled(motion.div)`
   display: flex;
   flex: 1 1 auto;
   flex-direction: row;
@@ -63,7 +68,9 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
   const theme = useTheme();
+  const widowsWidth = useScreenSize().width;
   return (
     <>
       <Global
@@ -76,7 +83,20 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
       <StyledLayout>
         <CommandMenu />
         <KeyboardShortcutMenu />
-        <StyledPageContainer>
+
+        <StyledPageContainer
+          animate={{
+            marginLeft:
+              isSettingsPage && !isMobile
+                ? (widowsWidth -
+                    (objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) /
+                  2
+                : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+          }}
+        >
           <StyledAppNavigationDrawer />
           <StyledMainContainer>
             {onboardingStatus &&

packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -19,8 +19,8 @@ const StyledMainContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   min-height: 0;
   padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
+  padding-left: 0;
   width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(8)};
   height: 100%;
-  min-width: ${desktopNavDrawerWidths.menu};
+  min-width: ${desktopNavDrawerWidths.menu}px;
   padding: ${({ theme }) => theme.spacing(3, 2, 4)};
 
   ${({ isSubMenu, theme }) =>
@@ -80,9 +80,7 @@ export const NavigationDrawer = ({
 
   const desktopWidth = !isNavigationDrawerOpen
     ? 12
-    : isSubMenu
+    : desktopNavDrawerWidths.menu;
-      ? desktopNavDrawerWidths.submenu
-      : desktopNavDrawerWidths.menu;
 
   const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts

@@ -1,4 +1,3 @@
 export const desktopNavDrawerWidths = {
-  menu: '236px',
+  menu: 236,
-  submenu: '536px',
 };

packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenSize;
+};

packages/twenty-front/src/pages/settings/SettingsProfile.tsx

@@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)`
 
 export const SettingsProfile = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <SettingsPageContainer width={350}>
+    <SettingsPageContainer>
       <StyledH1Title title="Profile" />
       <Section>
         <H2Title title="Picture" />

packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx

@@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)`
 
 export const SettingsWorkspace = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <SettingsPageContainer width={350}>
+    <SettingsPageContainer>
       <StyledH1Title title="General" />
       <Section>
         <H2Title title="Picture" />

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -53,7 +53,7 @@ export const SettingsWorkspaceMembers = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer width={350}>
+      <SettingsPageContainer>
         <StyledH1Title title="Members" />
         {currentWorkspace?.inviteHash && (
           <Section>

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
 import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
 import { formatExpirations } from '@/settings/developers/utils/format-expiration';
@@ -19,8 +19,6 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 const StyledContainer = styled.div`
   height: fit-content;
-  padding: ${({ theme }) => theme.spacing(8)};
-  width: ${objectSettingsWidth};
 `;
 
 const StyledTableRow = styled(TableRow)`
@@ -62,41 +60,43 @@ export const SettingsDevelopersApiKeys = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer>
-        <StyledHeader>
+        <StyledContainer>
-          <StyledH1Title title="APIs" />
+          <StyledHeader>
-          <Button
+            <StyledH1Title title="APIs" />
-            Icon={IconPlus}
+            <Button
-            title="Create Key"
+              Icon={IconPlus}
-            accent="blue"
+              title="Create Key"
-            size="small"
+              accent="blue"
-            onClick={() => {
+              size="small"
-              navigate('/settings/developers/api-keys/new');
-            }}
-          />
-        </StyledHeader>
-        <H2Title
-          title="Active Keys"
-          description="Active APIs keys created by you or your team"
-        />
-        <Table>
-          <StyledTableRow>
-            <TableHeader>Name</TableHeader>
-            <TableHeader>Type</TableHeader>
-            <TableHeader>Expiration</TableHeader>
-            <TableHeader></TableHeader>
-          </StyledTableRow>
-          {apiKeys.map((fieldItem) => (
-            <SettingsApiKeysFieldItemTableRow
-              key={fieldItem.id}
-              fieldItem={fieldItem}
               onClick={() => {
-                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+                navigate('/settings/developers/api-keys/new');
               }}
             />
-          ))}
+          </StyledHeader>
-        </Table>
+          <H2Title
-      </StyledContainer>
+            title="Active Keys"
+            description="Active APIs keys created by you or your team"
+          />
+          <Table>
+            <StyledTableRow>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Type</TableHeader>
+              <TableHeader>Expiration</TableHeader>
+              <TableHeader></TableHeader>
+            </StyledTableRow>
+            {apiKeys.map((fieldItem) => (
+              <SettingsApiKeysFieldItemTableRow
+                key={fieldItem.id}
+                fieldItem={fieldItem}
+                onClick={() => {
+                  navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+                }}
+              />
+            ))}
+          </Table>
+        </StyledContainer>
+      </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
 };