optimised approach to fix padding issue and removed unnecessary compo…

…nents
twentyhq · Oct 16, 2024 · 36dbf92 · 36dbf92
1 parent beb285d
commit 36dbf92
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 50 deletions.
diff --git a/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/...nt/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/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/...ont/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
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
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
@@ -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,23 +28,26 @@ 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 = ({
   tabs,
   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) => (