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

feat: add Settings/Accounts Connected Accounts section accounts list (#2953)

Browse Source 
Closes #2887
This commit is contained in:
Thaïs
2023-12-12 16:03:39 +01:00
committed by GitHub
parent 2a4ab2ffd3
commit 0048216abf
24 changed files with 437 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
View File

@ -6,6 +6,7 @@ import { IconChevronRight } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { SoonPill } from '@/ui/display/pill/components/SoonPill';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
type SettingsNavigationCardProps = {
children: ReactNode;
@ -23,11 +24,13 @@ const StyledCard = styled(Card)<{
color: ${({ theme }) => theme.font.color.tertiary};
cursor: ${({ disabled, onClick }) =>
disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
`;
const StyledCardContent = styled(CardContent)`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(4)};
padding-top: ${({ theme }) => theme.spacing(4)};
padding: ${({ theme }) => theme.spacing(4, 3)};
`;
const StyledHeader = styled.div`
@ -65,15 +68,17 @@ export const SettingsNavigationCard = ({
return (
<StyledCard disabled={disabled} onClick={onClick}>
<StyledHeader>
<Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
<StyledTitle>
{title}
{hasSoonPill && <SoonPill />}
</StyledTitle>
<StyledIconChevronRight size={theme.icon.size.sm} />
</StyledHeader>
<StyledDescription>{children}</StyledDescription>
<StyledCardContent>
<StyledHeader>
<Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
<StyledTitle>
{title}
{hasSoonPill && <SoonPill />}
</StyledTitle>
<StyledIconChevronRight size={theme.icon.size.sm} />
</StyledHeader>
<StyledDescription>{children}</StyledDescription>
</StyledCardContent>
</StyledCard>
);
};