Fix advanced settings tool icon alignment (#8935)

Followup of @bosiraphael's design <img width="333" alt="Screenshot 2024-12-06 at 17 25 45" src="https://github.com/user-attachments/assets/b744a7a6-99cb-4d4c-b9da-df0661536208"> <img width="614" alt="Screenshot 2024-12-06 at 17 26 19" src="https://github.com/user-attachments/assets/e9f31fed-66b2-4ed7-a5cd-97a9bc526752"> --------- Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
2024-12-06 18:07:37 +01:00
parent 9bbb963a08
commit b2be2fb398
7 changed files with 108 additions and 70 deletions
--- 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 = ({
          <StyledAdvancedWrapper>
            {!hideIcon && (
              <StyledIconContainer>
-                <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+                <StyledIconPoint
+                  size={12}
+                  color={MAIN_COLORS.yellow}
+                  fill={MAIN_COLORS.yellow}
+                />
              </StyledIconContainer>
            )}
            <StyledContent>{children}</StyledContent>
--- 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 && (
          <StyledContainer>
            <StyledIconContainer>
-              <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+              <StyledIconPoint
+                size={12}
+                color={MAIN_COLORS.yellow}
+                fill={MAIN_COLORS.yellow}
+              />
            </StyledIconContainer>
            <SettingsNavigationDrawerItem
              label="Security"
@ -210,26 +215,41 @@ export const SettingsNavigationDrawerItems = () => {
            exit="exit"
            variants={motionAnimationVariants}
          >
-            <StyledContainer>
-              <StyledIconContainer>
-                <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
-              </StyledIconContainer>
-              <NavigationDrawerSection>
-                <NavigationDrawerSectionTitle label="Developers" />
+            <NavigationDrawerSection>
+              <NavigationDrawerSectionTitle label="Developers" />
+              <StyledContainer>
+                <StyledIconContainer>
+                  <StyledIconPoint
+                    size={12}
+                    color={MAIN_COLORS.yellow}
+                    fill={MAIN_COLORS.yellow}
+                  />
+                </StyledIconContainer>
+
                <SettingsNavigationDrawerItem
                  label="API & Webhooks"
                  path={SettingsPath.Developers}
                  Icon={IconCode}
                />
-                {isFunctionSettingsEnabled && (
+              </StyledContainer>
+              {isFunctionSettingsEnabled && (
+                <StyledContainer>
+                  <StyledIconContainer>
+                    <StyledIconPoint
+                      size={12}
+                      color={MAIN_COLORS.yellow}
+                      fill={MAIN_COLORS.yellow}
+                    />
+                  </StyledIconContainer>
+
                  <SettingsNavigationDrawerItem
                    label="Functions"
                    path={SettingsPath.ServerlessFunctions}
                    Icon={IconFunction}
                  />
-                )}
-              </NavigationDrawerSection>
-            </StyledContainer>
+                </StyledContainer>
+              )}
+            </NavigationDrawerSection>
          </motion.div>
        )}
      </AnimatePresence>
--- 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 = ({
                <AdvancedSettingsWrapper dimension="width" hideIcon={true}>
                  <StyledApiKeyContainer>
                    <StyledIconContainer>
-                      <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+                      <StyledIconPoint
+                        size={12}
+                        color={MAIN_COLORS.yellow}
+                        fill={MAIN_COLORS.yellow}
+                      />
                    </StyledIconContainer>
                    <StyledApiKey>API values</StyledApiKey>
                  </StyledApiKeyContainer>
--- 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 = ({
        )}
      />
      <StyledAdvancedSettingsOuterContainer>
-        <AdvancedSettingsWrapper>
-          <StyledAdvancedSettingsContainer>
-            <StyledAdvancedSettingsSectionInputWrapper>
-              {[
-                {
-                  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,
-                }) => (
-                  <StyledInputContainer key={`object-${fieldName}-text-input`}>
+        <StyledAdvancedSettingsContainer>
+          <StyledAdvancedSettingsSectionInputWrapper>
+            {[
+              {
+                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,
+              }) => (
+                <AdvancedSettingsWrapper key={`object-${fieldName}-text-input`}>
+                  <StyledInputContainer>
                    <Controller
                      name={fieldName}
                      control={control}
@ -294,8 +294,10 @@ export const SettingsDataModelObjectAboutForm = ({
                      )}
                    />
                  </StyledInputContainer>
-                ),
-              )}
+                </AdvancedSettingsWrapper>
+              ),
+            )}
+            <AdvancedSettingsWrapper>
              <Controller
                name={IS_LABEL_SYNCED_WITH_NAME_LABEL}
                control={control}
@ -324,9 +326,9 @@ export const SettingsDataModelObjectAboutForm = ({
                  </Card>
                )}
              />
-            </StyledAdvancedSettingsSectionInputWrapper>
-          </StyledAdvancedSettingsContainer>
-        </AdvancedSettingsWrapper>
+            </AdvancedSettingsWrapper>
+          </StyledAdvancedSettingsSectionInputWrapper>
+        </StyledAdvancedSettingsContainer>
      </StyledAdvancedSettingsOuterContainer>
    </>
  );
--- 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: <IconTool size={12} color={MAIN_COLORS.yellow} />,
+      pill: (
+        <IconPoint
+          size={12}
+          color={MAIN_COLORS.yellow}
+          fill={MAIN_COLORS.yellow}
+        />
+      ),
    },
  ];

--- 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';
--- 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 (
    <StyledContainer>
      <StyledIconContainer>
-        <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+        <StyledIconPoint
+          size={12}
+          color={MAIN_COLORS.yellow}
+          fill={MAIN_COLORS.yellow}
+        />
      </StyledIconContainer>
      <StyledToggleContainer>
        <StyledLabel htmlFor={inputId}>Advanced:</StyledLabel>