Add Header to Email & Calendar Tabs #7288 (#7293)

# 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>
This commit is contained in:
Rishi Kant
2024-09-27 17:39:33 +05:30
committed by GitHub
parent c6d763ede9
commit c4762c3921
2 changed files with 4 additions and 4 deletions

View File

@ -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 (

View File

@ -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 (