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

feat: move Snackbar to top of screen on mobile (#5567)

Browse Source 
... and change SnackBar blur to medium.

@Bonapara Following
https://github.com/twentyhq/twenty/pull/5515#discussion_r1609618980

Related issue: https://github.com/twentyhq/twenty/issues/5383

<img width="386" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/de2f0be4-9d9c-4013-bed2-774e0599ce49">
This commit is contained in:
Thaïs
2024-05-24 17:58:12 +02:00
committed by GitHub
parent de9321dcd9
commit 9ad3fb96b7
3 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
View File

@ -7,6 +7,7 @@ import {
IconInfoCircle,
IconSquareRoundedCheck,
IconX,
MOBILE_VIEWPORT,
} from 'twenty-ui';
import { ProgressBar } from '@/ui/feedback/progress-bar/components/ProgressBar';
@ -39,7 +40,7 @@ export type SnackBarProps = Pick<
};
const StyledContainer = styled.div`
backdrop-filter: ${({ theme }) => theme.blur.light};
backdrop-filter: ${({ theme }) => theme.blur.medium};
background-color: ${({ theme }) => theme.background.transparent.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
@ -49,6 +50,11 @@ const StyledContainer = styled.div`
padding: ${({ theme }) => theme.spacing(2)};
position: relative;
width: 296px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
border-radius: 0;
width: 100%;
}
`;
const StyledProgressBar = styled(ProgressBar)`