Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: media query issue in feedback modal (#3470)

Browse Source
This commit is contained in:
Tymoteusz Czech 2023-04-07 11:10:14 +02:00 committed by GitHub
parent c0af30b89f
commit b20ac68605
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
View File

@ -6,6 +6,7 @@ import {
Tooltip, Tooltip,
useTheme, useTheme,
styled, styled,
useMediaQuery,
} from '@mui/material'; } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import { ReactComponent as UnleashLogo } from 'assets/icons/logoBg.svg'; import { ReactComponent as UnleashLogo } from 'assets/icons/logoBg.svg';
@ -43,14 +44,29 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
const [answeredNotNow, setAnsweredNotNow] = useState(false); const [answeredNotNow, setAnsweredNotNow] = useState(false);
const theme = useTheme(); const theme = useTheme();
const feedbackId = PNPS_FEEDBACK_ID; const feedbackId = PNPS_FEEDBACK_ID;
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const animations = useMemo( const animations = useMemo(
() => ({ () => ({
start: { ...fadeInTopStart(theme), zIndex: theme.zIndex.tooltip }, start: {
...fadeInTopStart(theme),
zIndex: theme.zIndex.tooltip,
right: theme.spacing(4),
top: theme.spacing(2),
left: 'auto',
maxWidth: '400px',
...(isSmallScreen && {
right: theme.spacing(3),
left: theme.spacing(3),
top: theme.spacing(5),
display: 'flex',
maxWidth: '600px',
}),
},
enter: fadeInTopEnter, enter: fadeInTopEnter,
leave: fadeInTopLeave, leave: fadeInTopLeave,
}), }),
[theme] [theme, isSmallScreen]
); );
const onConfirm = async () => { const onConfirm = async () => {
@ -98,7 +114,7 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
zIndex: 9999, zIndex: 9999,
boxShadow: theme.boxShadows.elevated, boxShadow: theme.boxShadows.elevated,
padding: theme.spacing(4), padding: theme.spacing(4),
maxWidth: '400px', flexGrow: 1,
}} }}
> >
<Box <Box

7
frontend/src/themes/themeStyles.ts
View File

@ -87,14 +87,7 @@ export const fadeInBottomLeave: CSSProperties = {
export const fadeInTopStart = (theme: Theme): CSSProperties => ({ export const fadeInTopStart = (theme: Theme): CSSProperties => ({
opacity: '0', opacity: '0',
position: 'fixed', position: 'fixed',
right: '40px',
top: '40px',
transform: 'translateY(-400px)', transform: 'translateY(-400px)',
[theme.breakpoints.down('sm')]: {
right: 20,
left: 10,
top: 40,
},
}); });
export const fadeInTopEnter: CSSProperties = { export const fadeInTopEnter: CSSProperties = {
transform: 'translateY(100px)', transform: 'translateY(100px)',