From beb285dff260d28b53d5bab5bdaf4dd3923480ab Mon Sep 17 00:00:00 2001
From: oxygen <iamshyamsundertard@gmail.com>
Date: Wed, 16 Oct 2024 20:52:21 +0530
Subject: [PATCH 1/2] Left Padding removed in Settings Page Tabs

---
 ...tingsAccountsCalendarChannelsContainer.tsx | 14 +++++++---
 ...ttingsAccountsMessageChannelsContainer.tsx | 14 +++++++---
 .../ui/layout/tab/components/Constant.tsx     |  1 +
 .../layout/tab/components/CustomPaddings.tsx  | 26 +++++++++++++++++++
 .../ui/layout/tab/components/TabList.tsx      |  2 +-
 5 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/ui/layout/tab/components/Constant.tsx
 create mode 100644 packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
index 9556441e6267..f50485b3d9a0 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/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/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
index 2c5e1102d3b3..9693e717b070 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/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
new file mode 100644
index 000000000000..682617c84386
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..183a861e7c1b
--- /dev/null
+++ 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
index 349c9cfe3edd..154185c75e2b 100644
--- 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;
 `;
 

From 36dbf92d3e79c032f5a8de4436ac82a61c897565 Mon Sep 17 00:00:00 2001
From: oxygen <iamshyamsundertard@gmail.com>
Date: Wed, 16 Oct 2024 22:05:58 +0530
Subject: [PATCH 2/2] optimised approach to fix padding issue and removed
 unnecessary components

---
 ...tingsAccountsCalendarChannelsContainer.tsx | 18 ++++++-------
 ...ttingsAccountsMessageChannelsContainer.tsx | 18 ++++++-------
 .../ui/layout/tab/components/Constant.tsx     |  1 -
 .../layout/tab/components/CustomPaddings.tsx  | 26 -------------------
 .../ui/layout/tab/components/TabList.tsx      | 14 +++++++---
 5 files changed, 27 insertions(+), 50 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/ui/layout/tab/components/Constant.tsx
 delete mode 100644 packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
index f50485b3d9a0..b2af5d4f4720 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -10,10 +10,9 @@ 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 { css } from '@emotion/react';
 import React from 'react';
 
 const StyledCalenderContainer = styled.div`
@@ -65,14 +64,13 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledCalenderContainer>
-          <CustomPaddings padding={DEFAULT_PADDING}>
-            <TabList
-              tabListId={
-                SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID
-              }
-              tabs={tabs}
-            />
-          </CustomPaddings>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+            css={css`
+              padding: 0;
+            `}
+          />
         </StyledCalenderContainer>
       )}
       {calendarChannels.map((calendarChannel) => (
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
index 9693e717b070..d148d9fb8c4e 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -9,10 +9,9 @@ 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 { css } from '@emotion/react';
 import React from 'react';
 
 const StyledMessageContainer = styled.div`
@@ -64,14 +63,13 @@ export const SettingsAccountsMessageChannelsContainer = () => {
     <>
       {tabs.length > 1 && (
         <StyledMessageContainer>
-          <CustomPaddings padding={DEFAULT_PADDING}>
-            <TabList
-              tabListId={
-                SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID
-              }
-              tabs={tabs}
-            />
-          </CustomPaddings>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+            css={css`
+              padding: 0;
+            `}
+          />
         </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
deleted file mode 100644
index 682617c84386..000000000000
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Constant.tsx
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 183a861e7c1b..000000000000
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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
index 154185c75e2b..a4d70faec1dd 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@@ -1,3 +1,4 @@
+import { SerializedStyles } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
@@ -9,6 +10,10 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 import { Tab } from './Tab';
 
+interface StyledContainerProps {
+  css?: SerializedStyles;
+}
+
 type SingleTabProps = {
   title: string;
   Icon?: IconComponent;
@@ -23,16 +28,18 @@ type TabListProps = {
   tabs: SingleTabProps[];
   loading?: boolean;
   className?: string;
+  css?: SerializedStyles;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<StyledContainerProps>`
   border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   box-sizing: border-box;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
-  padding-left: var(--custom-padding, ${({ theme }) => theme.spacing(2)});
+  padding-left: ${({ theme }) => theme.spacing(2)};
   height: 40px;
   user-select: none;
+  ${(props) => props.css}
 `;
 
 export const TabList = ({
@@ -40,6 +47,7 @@ export const TabList = ({
   tabListId,
   loading,
   className,
+  css,
 }: TabListProps) => {
   const initialActiveTabId = tabs.find((tab) => !tab.hide)?.id || '';
 
@@ -54,7 +62,7 @@ export const TabList = ({
   return (
     <TabListScope tabListScopeId={tabListId}>
       <ScrollWrapper hideY contextProviderName="tabList">
-        <StyledContainer className={className}>
+        <StyledContainer className={className} css={css}>
           {tabs
             .filter((tab) => !tab.hide)
             .map((tab) => (