From 482fe3ffdcecbc03145de08facf369fdd6a83e7d Mon Sep 17 00:00:00 2001 From: Nitin Koche Date: Wed, 24 Jul 2024 00:57:31 +0530 Subject: [PATCH 1/3] Align Workspace Switcher with Breadcrumb by Adjusting Height --- .../navigation-drawer/components/NavigationDrawerHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 9ba91a1c5935..ddea26d1ad61 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx @@ -16,7 +16,7 @@ const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>` !isMultiWorkspace ? theme.spacing(2) : null}; padding: ${({ theme, isMultiWorkspace }) => !isMultiWorkspace ? theme.spacing(1) : null}; - height: ${({ theme }) => theme.spacing(7)}; + height: ${({ theme }) => theme.spacing(8)}; user-select: none; `; From fc960d7394447336a982bfb331fb205dcdf0bd88 Mon Sep 17 00:00:00 2001 From: Nitin Koche Date: Thu, 25 Jul 2024 00:58:42 +0530 Subject: [PATCH 2/3] skeleton fix --- .../components/LeftPanelSkeletonLoader.tsx | 40 +++++++++++-------- ...ainNavigationDrawerItemsSkeletonLoader.tsx | 8 ++-- .../components/RightPanelSkeletonLoader.tsx | 9 +++-- .../components/UserOrMetadataLoader.tsx | 2 +- .../constants/DesktopNavDrawerWidths.ts | 2 +- 5 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index a6caf8861aee..9a94373cef34 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -8,22 +8,25 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader'; const StyledAnimatedContainer = styled(motion.div)` + align-items: center; display: flex; justify-content: end; `; const StyledItemsContainer = styled.div` + align-items: center; display: flex; flex-direction: column; - gap: 32px; + gap: 12px; + height: calc(100dvh - 32px); margin-bottom: auto; + max-width: 204px; + min-width: 204px; overflow-y: auto; - height: calc(100dvh - 32px); - min-width: 216px; - max-width: 216px; `; const StyledSkeletonContainer = styled.div` + align-items: center; display: flex; flex-direction: column; gap: 32px; @@ -32,9 +35,13 @@ const StyledSkeletonContainer = styled.div` const StyledSkeletonTitleContainer = styled.div` display: flex; flex-direction: column; - gap: 6px; - margin-left: 12px; - margin-top: 8px; + justify-content: center; + align-items: flex-start; + gap: 10px; + height: 32px; + + max-width: 196px; + min-width: 196px; `; export const LeftPanelSkeletonLoader = () => { @@ -54,17 +61,18 @@ export const LeftPanelSkeletonLoader = () => { }} > + + + + + - - - - - + diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx index b13b1bb884d6..2d660dfda236 100644 --- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx @@ -1,13 +1,15 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui'; const StyledSkeletonContainer = styled.div` + align-items: flex-start; + display: flex; flex-direction: column; gap: 6px; - margin-left: 12px; - margin-top: 8px; + min-width: 196px; + max-width: 196px; `; export const MainNavigationDrawerItemsSkeletonLoader = ({ diff --git a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx index e42dc5fec01e..1c47a6cdcb6c 100644 --- a/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx @@ -1,5 +1,5 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import styled from '@emotion/styled'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { BACKGROUND_LIGHT, BORDER_COMMON, @@ -45,8 +45,11 @@ const StyledRightPanelContainer = styled.div` const StyledRightPanelFlexContainer = styled.div` display: flex; - margin-top: 12px; - margin-bottom: 14px; + flex-direction: row; + justify-content: flex-end; + align-items: center; + height: 32px; + margin-bottom: 12px; `; const StyledSkeletonHeaderLoader = () => { diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx index da129175ef2c..20eedb836d99 100644 --- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx +++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx @@ -14,7 +14,7 @@ const StyledContainer = styled.div` height: 100dvh; min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px; width: 100%; - padding: 12px 8px 12px; + padding: 12px 8px 12px 8px; overflow: hidden; @media (max-width: ${MOBILE_VIEWPORT}px) { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts index dae34ed195a1..fe5462310dce 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts @@ -1,3 +1,3 @@ export const DESKTOP_NAV_DRAWER_WIDTHS = { - menu: 236, + menu: 220, }; From 5e450efab477e410dc0c09ae9180be6da2e52cf1 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 25 Jul 2024 13:36:00 +0200 Subject: [PATCH 3/3] Fix lint --- .../record-table/components/__stories__/perf/mock.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts index cc882ea44799..6ed90922065c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/mock.ts @@ -861,6 +861,7 @@ export const mockPerformance = { fieldDefinition: { fieldMetadataId: '4e79f0b7-d100-4e89-a07b-315a710b8059', primaryLinkLabel: 'Company', + label: 'Company', metadata: { fieldName: 'company', placeHolder: 'Company',