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

update import steps design (#12463)

Browse Source 
closes https://github.com/twentyhq/core-team-issues/issues/916

![Screenshot 2025-06-05 at 10 52
58](https://github.com/user-attachments/assets/ba5b6d65-0c1f-4d63-a197-e61816ec2d55)
![Screenshot 2025-06-05 at 10 53
09](https://github.com/user-attachments/assets/4aed579e-5e0e-4570-9518-b6e8ac604ea6)
![Screenshot 2025-06-05 at 10 53
24](https://github.com/user-attachments/assets/6f716306-ba08-468c-875a-4279991c1abd)
This commit is contained in:
Etienne
2025-06-10 16:49:37 +02:00
committed by GitHub
parent a68895189c
commit a15318537f
17 changed files with 200 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
View File

@ -40,11 +40,13 @@ const StyledModalDiv = styled(motion.div)<{
if (isMobile) return theme.modal.size.fullscreen;
switch (size) {
case 'small':
return theme.modal.size.sm;
return theme.modal.size.sm.width;
case 'medium':
return theme.modal.size.md;
return theme.modal.size.md.width;
case 'large':
return theme.modal.size.lg;
return theme.modal.size.lg.width;
case 'extraLarge':
return theme.modal.size.xl.width;
default:
return 'auto';
}
@ -64,8 +66,16 @@ const StyledModalDiv = styled(motion.div)<{
return 'auto';
}
}};
height: ${({ isMobile, theme }) =>
isMobile ? theme.modal.size.fullscreen : 'auto'};
height: ${({ isMobile, theme, size }) => {
if (isMobile) return theme.modal.size.fullscreen.height;
switch (size) {
case 'extraLarge':
return theme.modal.size.xl.height;
default:
return 'auto';
}
}};
max-height: ${({ isMobile }) => (isMobile ? 'none' : '90dvh')};
`;
@ -165,7 +175,7 @@ const ModalFooter = ({ children, className }: ModalFooterProps) => (
<StyledFooter className={className}>{children}</StyledFooter>
);
export type ModalSize = 'small' | 'medium' | 'large';
export type ModalSize = 'small' | 'medium' | 'large' | 'extraLarge';
export type ModalPadding = 'none' | 'small' | 'medium' | 'large';
export type ModalVariants = 'primary' | 'secondary' | 'tertiary';