admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add SettingsCard for Config Data Type and Accounts Settings (#7093)

Browse Source 
https://github.com/twentyhq/twenty/issues/6950
Add new Settings Card for Config Data Type and accounts Settings
Before:
<img width="707" alt="Screenshot 2024-09-11 at 17 43 16"
src="https://github.com/user-attachments/assets/63ff9373-fa86-4b22-8e8b-21483039c3be">
After:
<img width="755" alt="Screenshot 2024-09-17 at 14 15 18"
src="https://github.com/user-attachments/assets/213c24a1-dc1c-4ffb-8890-7c1f63ed376c">
<img width="755" alt="Screenshot 2024-09-17 at 14 15 38"
src="https://github.com/user-attachments/assets/0fc12d19-b92a-493d-80fa-0064cf491fbc">
This commit is contained in:
Ana Sofia Marin Alexandre
2024-09-18 18:32:41 +02:00
committed by GitHub
parent b1cb8998f8
commit cac3e116a3
17 changed files with 207 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
View File

@ -1,11 +1,12 @@
import styled from '@emotion/styled';
import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';
import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Section } from '@/ui/layout/section/components/Section';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import { useTheme } from '@emotion/react';
const StyledCardsContainer = styled.div`
display: flex;
@ -14,6 +15,7 @@ const StyledCardsContainer = styled.div`
`;
export const SettingsAccountsSettingsSection = () => {
const theme = useTheme();
return (
<Section>
<H2Title
@ -22,16 +24,30 @@ export const SettingsAccountsSettingsSection = () => {
/>
<StyledCardsContainer>
<UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
<SettingsNavigationCard Icon={IconMailCog} title="Emails">
Set email visibility, manage your blocklist and more.
</SettingsNavigationCard>
<SettingsCard
Icon={
<IconMailCog
size={theme.icon.size.lg}
stroke={theme.icon.stroke.sm}
/>
}
title="Emails"
description="Set email visibility, manage your blocklist and more."
/>
</UndecoratedLink>
<UndecoratedLink
to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
>
<SettingsNavigationCard Icon={IconCalendarEvent} title="Calendar">
Configure and customize your calendar preferences.
</SettingsNavigationCard>
<SettingsCard
Icon={
<IconCalendarEvent
size={theme.icon.size.lg}
stroke={theme.icon.stroke.sm}
/>
}
title="Calendar"
description="Configure and customize your calendar preferences."
/>
</UndecoratedLink>
</StyledCardsContainer>
</Section>