diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 350b725e3..83a634cb2 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx @@ -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)` diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx index b0e8b51de..529adbef6 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx @@ -4,6 +4,7 @@ import { MOBILE_VIEWPORT } from 'twenty-ui'; import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { SnackBar } from './SnackBar'; @@ -16,26 +17,28 @@ const StyledSnackBarContainer = styled.div` z-index: ${({ theme }) => theme.lastLayerZIndex}; @media (max-width: ${MOBILE_VIEWPORT}px) { - bottom: ${({ theme }) => theme.spacing(16)}; - right: 50%; - transform: translateX(50%); + top: 0; + bottom: auto; + left: 0; + right: 0; } `; -const variants = { - out: { - opacity: 0, - y: 40, - }, - in: { - opacity: 1, - y: 0, - }, -}; - export const SnackBarProvider = ({ children }: React.PropsWithChildren) => { const { snackBarInternal } = useSnackBarManagerScopedStates(); const { handleSnackBarClose } = useSnackBar(); + const isMobile = useIsMobile(); + + const variants = { + out: { + opacity: 0, + y: isMobile ? -40 : 40, + }, + in: { + opacity: 1, + y: 0, + }, + }; return ( <> diff --git a/packages/twenty-ui/src/theme/constants/Blur.ts b/packages/twenty-ui/src/theme/constants/Blur.ts index 01f265147..b881a44ec 100644 --- a/packages/twenty-ui/src/theme/constants/Blur.ts +++ b/packages/twenty-ui/src/theme/constants/Blur.ts @@ -1,4 +1,5 @@ export const BLUR = { light: 'blur(6px)', + medium: 'blur(12px)', strong: 'blur(20px)', };