From 326b29b69970c80862cf28d05f22b33a0f214d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Fri, 8 Dec 2023 11:17:07 +0100
Subject: [PATCH] feat: add Settings/Accounts Connected Accounts section with
 empty state (#2870)

Closes #2817
---
 ...ttingsAccountsConnectedAccountsSection.tsx | 14 +++++++
 .../SettingsAccountsEmptyStateCard.tsx        | 41 +++++++++++++++++++
 .../settings/accounts/SettingsAccounts.tsx    |  2 +
 3 files changed, 57 insertions(+)
 create mode 100644 front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
 create mode 100644 front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx

diff --git a/front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
new file mode 100644
index 000000000..d450be9eb
--- /dev/null
+++ b/front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
@@ -0,0 +1,14 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+
+export const SettingsAccountsConnectedAccountsSection = () => (
+  <Section>
+    <H2Title
+      title="Connected accounts"
+      description="Manage your internet accounts."
+    />
+    <SettingsAccountsEmptyStateCard />
+  </Section>
+);
diff --git a/front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx b/front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx
new file mode 100644
index 000000000..38f8937a4
--- /dev/null
+++ b/front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx
@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+import { Button } from '@/ui/input/button/components/Button';
+import { Card } from '@/ui/layout/card/components/Card';
+
+const StyledCard = styled(Card)`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  overflow: hidden;
+  padding: 0;
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledBody = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsAccountsEmptyStateCard = () => (
+  <StyledCard>
+    <StyledHeader>No connected account</StyledHeader>
+    <StyledBody>
+      <Button
+        Icon={IconGoogle}
+        title="Connect with Google"
+        variant="secondary"
+      />
+    </StyledBody>
+  </StyledCard>
+);
diff --git a/front/src/pages/settings/accounts/SettingsAccounts.tsx b/front/src/pages/settings/accounts/SettingsAccounts.tsx
index 101089050..71df84895 100644
--- a/front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/front/src/pages/settings/accounts/SettingsAccounts.tsx
@@ -1,3 +1,4 @@
+import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
@@ -8,6 +9,7 @@ export const SettingsAccounts = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
     <SettingsPageContainer>
       <Breadcrumb links={[{ children: 'Accounts' }]} />
+      <SettingsAccountsConnectedAccountsSection />
       <SettingsAccountsSettingsSection />
     </SettingsPageContainer>
   </SubMenuTopBarContainer>