Left Padding removed in Settings Page Tabs

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

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "VITE_DISABLE_TYPESCRIPT_CHECKER=true VITE_DISABLE_ESLINT_CHECKER=true NODE_OPTIONS=--max-old-space-size=3000 npx vite build && sh ./scripts/inject-runtime-env.sh",
+    "build": "VITE_DISABLE_TYPESCRIPT_CHECKER=true VITE_DISABLE_ESLINT_CHECKER=true NODE_OPTIONS=--max-old-space-size=4096 npx vite build && sh ./scripts/inject-runtime-env.sh",
     "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true VITE_DISABLE_TYPESCRIPT_CHECKER=true VITE_DISABLE_ESLINT_CHECKER=true NODE_OPTIONS=--max-old-space-size=6000 npx vite build && sh ./scripts/inject-runtime-env.sh",
     "start:prod": "NODE_ENV=production npx vite --host",
     "tsup": "npx tsup"

diff --git a/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -10,6 +10,7 @@ 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 { 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 +64,14 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledCalenderContainer>
-          <TabList
-            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
-            tabs={tabs}
-          />
+          <CustomPaddings padding="0">
+            <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,7 @@ 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 { 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 +63,14 @@ export const SettingsAccountsMessageChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledMessageContainer>
-          <TabList
-            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
-            tabs={tabs}
-          />
+          <CustomPaddings padding="0">
+            <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/CustomPaddings.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CustomPaddingsProps {
+  padding?: string | number;
+  children: React.ReactNode;
+  className?: string;
+}
+
+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,9 @@ const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+  padding: var(--custom-padding, ${({ theme }) => theme.spacing(2)});
+  padding-bottom: 0px;
   height: 40px;
-  padding-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
 `;