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

21
packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx Normal file
View File

@ -0,0 +1,21 @@
import { useTheme } from '@emotion/react';
import IllustrationIconArrayRaw from '@ui/display/icon/assets/illustration-array.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconArrayRaw
fill={fill}
color={color}
height={size}
width={size}
/>
</IllustrationIconWrapper>
);
};

24
packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useTheme } from '@emotion/react';
import IllustrationIconManyToManyRaw from '@ui/display/icon/assets/illustration-many-to-many.svg?react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconManyToManyProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconManyToMany = (
props: IllustrationIconManyToManyProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconManyToManyRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

25
packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useTheme } from '@emotion/react';
import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
import IllustrationIconOneToOneRaw from '@ui/display/icon/assets/illustration-one-to-one.svg?react';
import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
type IllustrationIconOneToOneProps = Pick<IconComponentProps, 'size'>;
export const IllustrationIconOneToOne = (
props: IllustrationIconOneToOneProps,
) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const { color, fill } = theme.IllustrationIcon;
return (
<IllustrationIconWrapper>
<IllustrationIconOneToOneRaw
height={size}
width={size}
fill={fill}
color={color}
/>
</IllustrationIconWrapper>
);
};

4
packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx
View File

@ -2,12 +2,10 @@ import styled from '@emotion/styled';
const StyledRectangleIllustrationIcon = styled('div')`
background-color: ${({ theme }) => theme.background.primary};
border: solid ${({ theme }) => theme.border.color.medium};
border: 0.75px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
justify-content: center;
size: auto;
box-sizing: content-box;
`;
export const IllustrationIconWrapper = StyledRectangleIllustrationIcon;