Left Padding removed in Settings Page Tabs

twentyhq · Oct 16, 2024 · beb285d · beb285d
1 parent f3fe3ab
commit beb285d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 9 deletions.
diff --git a/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -10,6 +10,8 @@ import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/comp
 import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
 import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId';
+import { DEFAULT_PADDING } from '@/ui/layout/tab/components/Constant';
+import { CustomPaddings } from '@/ui/layout/tab/components/CustomPaddings';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
@@ -63,10 +65,14 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledCalenderContainer>
-          <TabList
-            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
-            tabs={tabs}
-          />
+          <CustomPaddings padding={DEFAULT_PADDING}>
+            <TabList
+              tabListId={
+                SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID
+              }
+              tabs={tabs}
+            />
+          </CustomPaddings>
         </StyledCalenderContainer>
       )}
       {calendarChannels.map((calendarChannel) => (

diff --git a/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -9,6 +9,8 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
 import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId';
+import { DEFAULT_PADDING } from '@/ui/layout/tab/components/Constant';
+import { CustomPaddings } from '@/ui/layout/tab/components/CustomPaddings';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
@@ -62,10 +64,14 @@ export const SettingsAccountsMessageChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledMessageContainer>
-          <TabList
-            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
-            tabs={tabs}
-          />
+          <CustomPaddings padding={DEFAULT_PADDING}>
+            <TabList
+              tabListId={
+                SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID
+              }
+              tabs={tabs}
+            />
+          </CustomPaddings>
         </StyledMessageContainer>
       )}
       {messageChannels.map((messageChannel) => (

diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Constant.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Constant.tsx
@@ -0,0 +1 @@
+export const DEFAULT_PADDING = 0;
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface CustomPaddingsProps {
+  padding?: string | number;
+  children: React.ReactNode;
+}
+
+export const CustomPaddings: React.FC<CustomPaddingsProps> = ({
+  padding,
+  children,
+}) => {
+  const paddingValue = typeof padding === 'number' ? `${padding}px` : padding;
+
+  return (
+    <div
+      className={`custom-padding`}
+      style={
+        {
+          '--custom-padding': paddingValue,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@@ -30,8 +30,8 @@ const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+  padding-left: var(--custom-padding, ${({ theme }) => theme.spacing(2)});
   height: 40px;
-  padding-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
 `;