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

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

View File

@ -4,30 +4,20 @@ 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';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardHeader } from '@/ui/layout/card/components/CardHeader';
import { REACT_APP_SERVER_AUTH_URL } from '~/config';
import { useGenerateTransientTokenMutation } from '~/generated/graphql';
const StyledCard = styled(Card)`
border-radius: ${({ theme }) => theme.border.radius.md};
overflow: hidden;
padding: 0;
`;
const StyledHeader = styled.div`
const StyledHeader = styled(CardHeader)`
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`
const StyledBody = styled(CardContent)`
display: flex;
justify-content: center;
padding: ${({ theme }) => theme.spacing(4)};
`;
export const SettingsAccountsEmptyStateCard = () => {
@ -43,8 +33,9 @@ export const SettingsAccountsEmptyStateCard = () => {
window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`;
}, [generateTransientToken]);
return (
<StyledCard>
<Card>
<StyledHeader>No connected account</StyledHeader>
<StyledBody>
<Button
@ -54,6 +45,6 @@ export const SettingsAccountsEmptyStateCard = () => {
onClick={handleGmailLogin}
/>
</StyledBody>
</StyledCard>
</Card>
);
};