From c4762c39217edccfaac6d91936dd93f111930aed Mon Sep 17 00:00:00 2001
From: Rishi Kant <110294979+kant-github@users.noreply.github.com>
Date: Fri, 27 Sep 2024 17:39:33 +0530
Subject: [PATCH] Add Header to Email & Calendar Tabs #7288 (#7293)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Fix: 7288 - Add Header to Email & Calendar Tabs (No Account Connected)

## Description
Added a header to the **Email** and **Calendar** tabs when no account is
connected, matching the style and spacing of the account page to prevent
layout issues when switching between pages.

### Header Content:
- **Connected Accounts**
- **Manage your internet accounts**

## Screenshot:
<img width="1440" alt="Screenshot 2024-09-27 at 5 20 55 PM"
src="https://github.com/user-attachments/assets/0c641dd6-e17f-47c4-9e30-45a3f8a9eac9">


Fixes #7288

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../components/SettingsAccountsCalendarChannelsContainer.tsx  | 4 ++--
 .../components/SettingsAccountsMessageChannelsContainer.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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 ab231c603..9556441e6 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -8,7 +8,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/components/SettingsAccountsCalendarChannelDetails';
 import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@@ -56,7 +56,7 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
   ];
 
   if (!calendarChannels.length) {
-    return <SettingsAccountsListEmptyStateCard />;
+    return <SettingsNewAccountSection />;
   }
 
   return (
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 d2d15d02f..2c5e1102d 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -6,8 +6,8 @@ import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 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 { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@@ -55,7 +55,7 @@ export const SettingsAccountsMessageChannelsContainer = () => {
   ];
 
   if (!messageChannels.length) {
-    return <SettingsAccountsListEmptyStateCard />;
+    return <SettingsNewAccountSection />;
   }
 
   return (