fix: conditionally rendered Tablist only if there are multiple accoun…

…ts. (#6274) issue - 6267 --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Jul 16, 2024 · a8dfff3 · a8dfff3
1 parent 3566e0b
commit a8dfff3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@@ -12,7 +12,6 @@ const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
 `;
 
 type SettingsAccountsCalendarChannelDetailsProps = {

diff --git a/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/...nt/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { CalendarChannel } from '@/accounts/types/CalendarChannel';
@@ -13,6 +14,10 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
 
+const StyledCalenderContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsCalendarChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
     SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID,
@@ -55,10 +60,14 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
 
   return (
     <>
-      <TabList
-        tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
-        tabs={tabs}
-      />
+      {tabs.length > 1 && (
+        <StyledCalenderContainer>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+          />
+        </StyledCalenderContainer>
+      )}
       {calendarChannels.map((calendarChannel) => (
         <React.Fragment key={calendarChannel.id}>
           {calendarChannel.id === activeTabId && (

diff --git a/...-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/...-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@@ -29,7 +29,6 @@ const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
 `;
 
 export const SettingsAccountsMessageChannelDetails = ({

diff --git a/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/...ont/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@@ -12,6 +13,10 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
 
+const StyledMessageContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsMessageChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
     SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
@@ -54,10 +59,14 @@ export const SettingsAccountsMessageChannelsContainer = () => {
 
   return (
     <>
-      <TabList
-        tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
-        tabs={tabs}
-      />
+      {tabs.length > 1 && (
+        <StyledMessageContainer>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+          />
+        </StyledMessageContainer>
+      )}
       {messageChannels.map((messageChannel) => (
         <React.Fragment key={messageChannel.id}>
           {messageChannel.id === activeTabId && (