From b2be2fb39844de85b6bbed5b062f0ce8b15f9ff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 6 Dec 2024 18:07:37 +0100 Subject: [PATCH] Fix advanced settings tool icon alignment (#8935) Followup of @bosiraphael's design Screenshot 2024-12-06 at 17 25 45 Screenshot 2024-12-06 at 17 26 19 --------- Co-authored-by: bosiraphael --- .../components/AdvancedSettingsWrapper.tsx | 15 ++-- .../SettingsNavigationDrawerItems.tsx | 50 +++++++++---- .../SettingsDataModelFieldSelectForm.tsx | 10 ++- .../SettingsDataModelObjectAboutForm.tsx | 72 ++++++++++--------- .../data-model/SettingsObjectDetailPage.tsx | 10 ++- .../display/icon/components/TablerIcons.ts | 6 +- .../components/AdvancedSettingsToggle.tsx | 15 ++-- 7 files changed, 108 insertions(+), 70 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx index 927b684aa..ad3f07184 100644 --- a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx +++ b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx @@ -3,7 +3,7 @@ import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/st import styled from '@emotion/styled'; import { AnimatePresence, motion } from 'framer-motion'; import { useRecoilValue } from 'recoil'; -import { IconTool, MAIN_COLORS } from 'twenty-ui'; +import { IconPoint, MAIN_COLORS } from 'twenty-ui'; const StyledAdvancedWrapper = styled.div` position: relative; @@ -11,10 +11,9 @@ const StyledAdvancedWrapper = styled.div` `; const StyledIconContainer = styled.div` - border-right: 1px solid ${MAIN_COLORS.yellow}; display: flex; height: 100%; - left: ${({ theme }) => theme.spacing(-6)}; + left: ${({ theme }) => theme.spacing(-4)}; position: absolute; top: 0; `; @@ -22,8 +21,8 @@ const StyledIconContainer = styled.div` const StyledContent = styled.div` width: 100%; `; -const StyledIconTool = styled(IconTool)` - margin-right: ${({ theme }) => theme.spacing(0.5)}; +const StyledIconPoint = styled(IconPoint)` + margin-right: 0; `; type AdvancedSettingsWrapperProps = { @@ -56,7 +55,11 @@ export const AdvancedSettingsWrapper = ({ {!hideIcon && ( - + )} {children} diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx index 51f835ca2..7a5bd5bce 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx @@ -12,10 +12,10 @@ import { IconHierarchy2, IconKey, IconMail, + IconPoint, IconRocket, IconServer, IconSettings, - IconTool, IconUserCircle, IconUsers, MAIN_COLORS, @@ -51,18 +51,19 @@ type SettingsNavigationItem = { }; const StyledIconContainer = styled.div` - border-right: 1px solid ${MAIN_COLORS.yellow}; position: absolute; left: ${({ theme }) => theme.spacing(-5)}; height: 100%; + display: flex; + align-items: center; `; const StyledContainer = styled.div` position: relative; `; -const StyledIconTool = styled(IconTool)` - margin-right: ${({ theme }) => theme.spacing(0.5)}; +const StyledIconPoint = styled(IconPoint)` + margin-right: 0; `; export const SettingsNavigationDrawerItems = () => { @@ -190,7 +191,11 @@ export const SettingsNavigationDrawerItems = () => { {isAdvancedModeEnabled && ( - + { exit="exit" variants={motionAnimationVariants} > - - - - - - + + + + + + + - {isFunctionSettingsEnabled && ( + + {isFunctionSettingsEnabled && ( + + + + + - )} - - + + )} + )} diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx index 90980d65b..5ea012ac0 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx @@ -5,7 +5,7 @@ import { CardContent, CardFooter, IconPlus, - IconTool, + IconPoint, LightButton, MAIN_COLORS, } from 'twenty-ui'; @@ -104,7 +104,7 @@ const StyledIconContainer = styled.div` margin-top: ${({ theme }) => theme.spacing(1)}; `; -const StyledIconTool = styled(IconTool)` +const StyledIconPoint = styled(IconPoint)` margin-right: ${({ theme }) => theme.spacing(0.5)}; `; @@ -253,7 +253,11 @@ export const SettingsDataModelFieldSelectForm = ({ - + API values diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx index 9d39b2aee..ce881e136 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx @@ -223,36 +223,36 @@ export const SettingsDataModelObjectAboutForm = ({ )} /> - - - - {[ - { - label: 'API Name (Singular)', - fieldName: 'nameSingular' as const, - placeholder: 'listing', - defaultValue: objectMetadataItem?.nameSingular, - disableEdition: disableEdition || isLabelSyncedWithName, - tooltip: apiNameTooltipText, - }, - { - label: 'API Name (Plural)', - fieldName: 'namePlural' as const, - placeholder: 'listings', - defaultValue: objectMetadataItem?.namePlural, - disableEdition: disableEdition || isLabelSyncedWithName, - tooltip: apiNameTooltipText, - }, - ].map( - ({ - defaultValue, - fieldName, - label, - placeholder, - disableEdition, - tooltip, - }) => ( - + + + {[ + { + label: 'API Name (Singular)', + fieldName: 'nameSingular' as const, + placeholder: 'listing', + defaultValue: objectMetadataItem?.nameSingular, + disableEdition: disableEdition || isLabelSyncedWithName, + tooltip: apiNameTooltipText, + }, + { + label: 'API Name (Plural)', + fieldName: 'namePlural' as const, + placeholder: 'listings', + defaultValue: objectMetadataItem?.namePlural, + disableEdition: disableEdition || isLabelSyncedWithName, + tooltip: apiNameTooltipText, + }, + ].map( + ({ + defaultValue, + fieldName, + label, + placeholder, + disableEdition, + tooltip, + }) => ( + + - ), - )} + + ), + )} + )} /> - - - + + + ); diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx index e408211df..1b1eb0a7a 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx @@ -24,8 +24,8 @@ import { IconCodeCircle, IconListDetails, IconPlus, + IconPoint, IconSettings, - IconTool, MAIN_COLORS, UndecoratedLink, isDefined, @@ -119,7 +119,13 @@ export const SettingsObjectDetailPage = () => { title: 'Indexes', Icon: IconCodeCircle, hide: !isAdvancedModeEnabled || !isUniqueIndexesEnabled, - pill: , + pill: ( + + ), }, ]; diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 7f61145c5..ee35749b1 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -188,6 +188,7 @@ export { IconNumber9, IconNumbers, IconPaperclip, + IconPassword, IconPencil, IconPercentage, IconPhone, @@ -201,6 +202,7 @@ export { IconPlaystationSquare, IconPlug, IconPlus, + IconPoint, IconPower, IconPresentation, IconPrinter, @@ -241,7 +243,6 @@ export { IconTextSize, IconTextWrap, IconTimelineEvent, - IconTool, IconTrash, IconUnlink, IconUpload, @@ -253,8 +254,7 @@ export { IconVideo, IconWand, IconWorld, - IconX, - IconPassword, + IconX } from '@tabler/icons-react'; export type { TablerIconsProps } from '@tabler/icons-react'; diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx index 0506455d0..efedcc756 100644 --- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx +++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { IconTool } from '@ui/display'; +import { IconPoint } from '@ui/display'; import { Toggle } from '@ui/input'; import { MAIN_COLORS } from '@ui/theme'; import { useId } from 'react'; @@ -20,10 +20,9 @@ const StyledLabel = styled.label` `; const StyledIconContainer = styled.div` - border-right: 1px solid ${MAIN_COLORS.yellow}; height: 16px; position: absolute; - left: ${({ theme }) => theme.spacing(-5)}; + left: ${({ theme }) => theme.spacing(-3)}; `; const StyledToggleContainer = styled.div` @@ -33,8 +32,8 @@ const StyledToggleContainer = styled.div` width: 100%; `; -const StyledIconTool = styled(IconTool)` - margin-right: ${({ theme }) => theme.spacing(0.5)}; +const StyledIconPoint = styled(IconPoint)` + margin-right: 0; `; type AdvancedSettingsToggleProps = { @@ -54,7 +53,11 @@ export const AdvancedSettingsToggle = ({ return ( - + Advanced: