From fd4ed803899b319e2ab022ef5151c24aa192b80d Mon Sep 17 00:00:00 2001 From: muraliSingh7 Date: Sun, 1 Dec 2024 03:55:46 +0530 Subject: [PATCH 1/8] fix(chip): update padding for transparent variant Changed the padding-left for the chip component when the variant is Transparent. The padding-left is now set to 2px to ensure proper alignment, while other variants continue to use the default horizontal padding. --- packages/twenty-ui/src/display/chip/components/Chip.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 42afc99b5168..2cc197513bf0 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -116,6 +116,12 @@ const StyledContainer = withTheme(styled.div< & > svg { flex-shrink: 0; } + + padding-left: ${({ variant }) => + variant === ChipVariant.Transparent + ? '2px !important' + : 'var(--chip-horizontal-padding)'}; + `); export const Chip = ({ From 21b253ff8aaf0048978c432fdf21229fea48af6c Mon Sep 17 00:00:00 2001 From: muraliSingh7 Date: Tue, 3 Dec 2024 04:14:43 +0530 Subject: [PATCH 2/8] Ensure consistent 8px padding-left across all table cells: - Increased padding-left for table cells from 6px to 8px for uniform spacing. - Set padding to 0px for Chip component in transparent mode to prevent it from affecting cell padding and ensure consistent 8px left padding across all cells. --- .../components/RecordTableCellDisplayContainer.tsx | 2 +- packages/twenty-ui/src/display/chip/components/Chip.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index 9197022f87ee..9f4ac602547b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -8,7 +8,7 @@ const StyledOuterContainer = styled.div<{ display: flex; height: 100%; overflow: hidden; - padding-left: 6px; + padding-left: 8px; width: 100%; `; diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 2cc197513bf0..b21bee8ffba8 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -119,7 +119,7 @@ const StyledContainer = withTheme(styled.div< padding-left: ${({ variant }) => variant === ChipVariant.Transparent - ? '2px !important' + ? '0px' : 'var(--chip-horizontal-padding)'}; `); From e53c70fc457e6332904af81cfbcedffc6b830f58 Mon Sep 17 00:00:00 2001 From: muraliSingh7 Date: Tue, 3 Dec 2024 15:20:20 +0530 Subject: [PATCH 3/8] Refactored 0px to theme.spacing(0) for consistent spacing usage --- packages/twenty-ui/src/display/chip/components/Chip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index b21bee8ffba8..4eeac46458df 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -117,9 +117,9 @@ const StyledContainer = withTheme(styled.div< flex-shrink: 0; } - padding-left: ${({ variant }) => + padding-left: ${({ theme, variant }) => variant === ChipVariant.Transparent - ? '0px' + ? theme.spacing(0) : 'var(--chip-horizontal-padding)'}; `); From 5b24ca45ce3c665c6bd128e84dd1cf31c457152b Mon Sep 17 00:00:00 2001 From: guillim Date: Wed, 11 Dec 2024 14:33:22 +0100 Subject: [PATCH 4/8] lint --- packages/twenty-ui/src/display/chip/components/Chip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 4eeac46458df..4a38d3cdebeb 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -121,7 +121,6 @@ const StyledContainer = withTheme(styled.div< variant === ChipVariant.Transparent ? theme.spacing(0) : 'var(--chip-horizontal-padding)'}; - `); export const Chip = ({ From 3ca75c13f4bbcaa33c70a3a609d713926894c22d Mon Sep 17 00:00:00 2001 From: muraliSingh7 Date: Mon, 16 Dec 2024 23:26:16 +0530 Subject: [PATCH 5/8] Fix: Display workspace image placeholder when no logo is uploaded --- .../components/NavigationDrawerHeader.tsx | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) 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 4d7bf0fa4727..80d464aaced0 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 @@ -7,11 +7,11 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; -import { isNonEmptyString } from '@sniptt/guards'; +import { Avatar } from 'twenty-ui'; import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; -import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; const StyledContainer = styled.div` align-items: center; @@ -19,20 +19,12 @@ const StyledContainer = styled.div` height: ${({ theme }) => theme.spacing(8)}; user-select: none; `; + const StyledSingleWorkspaceContainer = styled(StyledContainer)` gap: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1)}; `; -const StyledLogo = styled.div<{ logo: string }>` - background: url(${({ logo }) => logo}); - background-position: center; - background-size: cover; - border-radius: ${({ theme }) => theme.border.radius.xs}; - height: 16px; - width: 16px; -`; - const StyledName = styled.div` color: ${({ theme }) => theme.font.color.primary}; font-family: 'Inter'; @@ -75,9 +67,7 @@ export const NavigationDrawerHeader = ({ ) : ( - + {name} From ef42a41f561527cef66d136c8013440c541e9288 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 17 Dec 2024 20:32:33 +0100 Subject: [PATCH 6/8] Apply changes for multiworkspace too --- .../MultiWorkspaceDropdownButton.tsx | 23 ++++++------------- .../components/NavigationDrawerHeader.tsx | 2 +- .../src/display/avatar/components/Avatar.tsx | 6 ++--- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx index fd8f69afd906..2e686a44e391 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx @@ -14,13 +14,12 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { getImageAbsoluteURI } from 'twenty-shared'; import { + Avatar, IconChevronDown, MenuItemSelectAvatar, UndecoratedLink, } from 'twenty-ui'; -import { REACT_APP_SERVER_BASE_URL } from '~/config'; const StyledLogo = styled.div<{ logo: string }>` background: url(${({ logo }) => logo}); @@ -102,13 +101,9 @@ export const MultiWorkspaceDropdownButton = ({ data-testid="workspace-dropdown" isNavigationDrawerExpanded={isNavigationDrawerExpanded} > - {currentWorkspace?.displayName ?? ''} @@ -135,13 +130,9 @@ export const MultiWorkspaceDropdownButton = ({ } selected={currentWorkspace?.id === workspace.id} 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 80d464aaced0..decd0475aa28 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 @@ -67,7 +67,7 @@ export const NavigationDrawerHeader = ({ ) : ( - + {name} diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx index 35941629b6b2..0f17ca9edf10 100644 --- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx +++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { isNonEmptyString, isUndefined } from '@sniptt/guards'; +import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards'; import { useContext } from 'react'; import { useRecoilState } from 'recoil'; @@ -90,12 +90,10 @@ export const Avatar = ({ }) : null; - const noAvatarUrl = !isNonEmptyString(avatarImageURI); - const placeholderChar = placeholder?.[0]?.toLocaleUpperCase(); const showPlaceholder = - noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI); + isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI); const handleImageError = () => { if (isNonEmptyString(avatarImageURI)) { From 72da051db902c5c09ac5f0da0acdcc43aa2967b1 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 17 Dec 2024 20:33:20 +0100 Subject: [PATCH 7/8] Also changing Favicon --- .../ui/utilities/page-favicon/components/PageFavicon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx b/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx index e72ff93a7df8..dd7b5d8ece18 100644 --- a/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx @@ -1,4 +1,5 @@ import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState'; +import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; import { Helmet } from 'react-helmet-async'; import { useRecoilValue } from 'recoil'; import { getImageAbsoluteURI } from 'twenty-shared'; @@ -16,7 +17,7 @@ export const PageFavicon = () => { getImageAbsoluteURI({ imageUrl: workspacePublicData.logo, baseUrl: REACT_APP_SERVER_BASE_URL, - }) ?? '' + }) ?? DEFAULT_WORKSPACE_LOGO } /> )} From fc48ca8927a2dbefc117ddfba7eb006ef8798c5b Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 17 Dec 2024 20:41:48 +0100 Subject: [PATCH 8/8] Fix --- .../components/MultiWorkspaceDropdownButton.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx index 2e686a44e391..7d7f718f5679 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx @@ -21,15 +21,6 @@ import { UndecoratedLink, } from 'twenty-ui'; -const StyledLogo = styled.div<{ logo: string }>` - background: url(${({ logo }) => logo}); - background-position: center; - background-size: cover; - border-radius: ${({ theme }) => theme.border.radius.xs}; - height: 16px; - width: 16px; -`; - const StyledContainer = styled.div<{ isNavigationDrawerExpanded: boolean }>` align-items: center; cursor: pointer;