feat: add Synchronization calendar settings (#4111)

* feat: add Calendar Settings section to Settings/Accounts/Calendars page

Closes #4060

* refactor: rename components

* feat: add Synchronization calendar settings

Closes #4066
This commit is contained in:
Thaïs
2024-02-21 13:23:06 -03:00
committed by GitHub
parent 5a8a9cd029
commit ee66188656
6 changed files with 32 additions and 23 deletions

View File

@ -14,4 +14,4 @@ const StyledCardMedia = styled.div`
width: ${({ theme }) => theme.spacing(6)};
`;
export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };
export { StyledCardMedia as SettingsAccountsCardMedia };

View File

@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { IconUser } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Toggle } from '@/ui/input/components/Toggle';
@ -42,9 +42,9 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
/>
<Card>
<StyledCardContent>
<SettingsAccountsInboxSettingsCardMedia>
<SettingsAccountsCardMedia>
<IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
</SettingsAccountsInboxSettingsCardMedia>
</SettingsAccountsCardMedia>
<StyledTitle>Auto-creation</StyledTitle>
<Toggle
value={messageChannel.isContactAutoCreationEnabled}

View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Radio } from '@/ui/input/components/Radio';
import { Card } from '@/ui/layout/card/components/Card';
@ -29,7 +29,7 @@ const StyledCardContent = styled(CardContent)`
}
`;
const StyledCardMedia = styled(SettingsAccountsInboxSettingsCardMedia)`
const StyledCardMedia = styled(SettingsAccountsCardMedia)`
align-items: stretch;
`;

View File

@ -1,8 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { IconRefresh } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Toggle } from '@/ui/input/components/Toggle';
@ -23,33 +22,34 @@ const StyledTitle = styled.span`
margin-right: auto;
`;
type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
messageChannel: MessageChannel;
type SettingsAccountsSynchronizationSectionProps = {
cardTitle: string;
description: string;
isSynced: boolean;
onToggle: (value: boolean) => void;
};
export const SettingsAccountsInboxSettingsSynchronizationSection = ({
messageChannel,
export const SettingsAccountsSynchronizationSection = ({
cardTitle,
description,
isSynced,
onToggle,
}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
}: SettingsAccountsSynchronizationSectionProps) => {
const theme = useTheme();
return (
<Section>
<H2Title
title="Synchronization"
description="Past and future emails will automatically be synced to this workspace"
/>
<H2Title title="Synchronization" description={description} />
<Card>
<StyledCardContent>
<SettingsAccountsInboxSettingsCardMedia>
<SettingsAccountsCardMedia>
<IconRefresh
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsInboxSettingsCardMedia>
<StyledTitle>Sync emails</StyledTitle>
<Toggle value={messageChannel.isSynced} onChange={onToggle} />
</SettingsAccountsCardMedia>
<StyledTitle>{cardTitle}</StyledTitle>
<Toggle value={isSynced} onChange={onToggle} />
</StyledCardContent>
</Card>
</Section>