mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-21 13:47:39 +02:00
229 lines
8.2 KiB
TypeScript
229 lines
8.2 KiB
TypeScript
import { Box, Button, styled, TextField } from '@mui/material';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { useFeedback } from './useFeedback';
|
|
import React from 'react';
|
|
|
|
export const ParentContainer = styled('div')(({ theme }) => ({
|
|
position: 'relative',
|
|
width: '100vw',
|
|
height: '100vh',
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
backgroundColor: 'rgba(32, 32, 33, 0.40)',
|
|
zIndex: theme.zIndex.fab,
|
|
},
|
|
}));
|
|
export const StyledContainer = styled('div')(({ theme }) => ({
|
|
position: 'fixed',
|
|
top: 0,
|
|
right: 0,
|
|
height: '100vh',
|
|
opacity: 1,
|
|
borderRadius: theme.spacing(2.5, 0, 0, 2.5),
|
|
background: `linear-gradient(307deg, #3D3980 0%, #615BC2 26.77%, #6A63E0 48.44%, #6A63E0 72.48%, #8154BF 99.99%)`,
|
|
backgroundColor: theme.palette.primary.main,
|
|
zIndex: theme.zIndex.sticky,
|
|
}));
|
|
|
|
export const StyledContent = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
padding: theme.spacing(6),
|
|
flexDirection: 'column',
|
|
height: '100vh',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: theme.spacing(8.5),
|
|
alignSelf: 'stretch',
|
|
}));
|
|
|
|
export const StyledTitle = styled(Box)(({ theme }) => ({
|
|
color: '#fff',
|
|
fontSize: theme.spacing(3),
|
|
fontWeight: 400,
|
|
lineHeight: theme.spacing(2.5),
|
|
}));
|
|
|
|
export const StyledForm = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
width: '400px',
|
|
padding: theme.spacing(3),
|
|
flexDirection: 'column',
|
|
gap: theme.spacing(3),
|
|
alignItems: 'flex-start',
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
borderRadius: theme.spacing(1.5),
|
|
borderColor: 'rgba(0, 0, 0, 0.12)',
|
|
backgroundColor: '#fff',
|
|
boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.12)',
|
|
}));
|
|
|
|
export const FormTitle = styled(Box)(({ theme }) => ({
|
|
color: theme.palette.text.primary,
|
|
fontSize: theme.spacing(2),
|
|
lineHeight: theme.spacing(2.75),
|
|
fontWeight: theme.typography.fontWeightBold,
|
|
}));
|
|
|
|
export const FormSubTitle = styled(Box)(({ theme }) => ({
|
|
color: theme.palette.text.primary,
|
|
fontSize: theme.spacing(1.75),
|
|
lineHeight: theme.spacing(2.5),
|
|
}));
|
|
|
|
export const StyledButton = styled(Button)(({ theme }) => ({
|
|
width: '100%',
|
|
}));
|
|
|
|
const StyledScoreContainer = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: theme.spacing(1.5),
|
|
alignItems: 'flex-start',
|
|
}));
|
|
|
|
const StyledScoreInput = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
gap: theme.spacing(2),
|
|
}));
|
|
|
|
const StyledScoreHelp = styled('span')(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
fontSize: theme.spacing(1.75),
|
|
}));
|
|
|
|
const ScoreHelpContainer = styled('span')(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
}));
|
|
|
|
const StyledScoreValue = styled('label')(({ theme }) => ({
|
|
'& input': {
|
|
clip: 'rect(0 0 0 0)',
|
|
position: 'absolute',
|
|
},
|
|
'& span': {
|
|
display: 'grid',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
background: theme.palette.background.elevation2,
|
|
width: theme.spacing(4),
|
|
height: theme.spacing(4),
|
|
borderRadius: theme.spacing(12.5),
|
|
userSelect: 'none',
|
|
cursor: 'pointer',
|
|
},
|
|
'& input:checked + span': {
|
|
fontWeight: theme.typography.fontWeightBold,
|
|
background: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
'& input:hover + span': {
|
|
outline: '2px solid',
|
|
outlineOffset: 2,
|
|
outlineColor: theme.palette.primary.main,
|
|
},
|
|
}));
|
|
|
|
export const FeedbackComponent = () => {
|
|
const { feedbackData, showFeedback, closeFeedback } = useFeedback();
|
|
|
|
if (!feedbackData) return null;
|
|
|
|
return (
|
|
<ConditionallyRender
|
|
condition={showFeedback}
|
|
show={
|
|
<ParentContainer>
|
|
<StyledContainer>
|
|
<StyledContent>
|
|
<StyledTitle>
|
|
Help us to improve Unleash
|
|
</StyledTitle>
|
|
<StyledForm>
|
|
<FormTitle>
|
|
How easy wasy it to configure the strategy?
|
|
</FormTitle>
|
|
<StyledScoreContainer>
|
|
<StyledScoreInput>
|
|
{[1, 2, 3, 4, 5, 6, 7].map((score) => (
|
|
<StyledScoreValue key={score}>
|
|
<input
|
|
type='radio'
|
|
name='score'
|
|
value={score}
|
|
/>
|
|
<span>{score}</span>
|
|
</StyledScoreValue>
|
|
))}
|
|
</StyledScoreInput>
|
|
<ScoreHelpContainer>
|
|
<StyledScoreHelp>
|
|
Very difficult
|
|
</StyledScoreHelp>
|
|
<StyledScoreHelp>
|
|
Very easy
|
|
</StyledScoreHelp>
|
|
</ScoreHelpContainer>
|
|
</StyledScoreContainer>
|
|
<Box>
|
|
<FormSubTitle>
|
|
What do you like most about the strategy
|
|
configuration?
|
|
</FormSubTitle>
|
|
<TextField
|
|
label='Your answer here'
|
|
style={{ width: '100%' }}
|
|
multiline
|
|
rows={3}
|
|
variant='outlined'
|
|
size='small'
|
|
InputLabelProps={{
|
|
style: {
|
|
fontSize: '14px',
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<FormSubTitle>
|
|
What should be improved in the strategy
|
|
configuration?
|
|
</FormSubTitle>
|
|
<TextField
|
|
label='Your answer here'
|
|
style={{ width: '100%' }}
|
|
multiline
|
|
rows={3}
|
|
InputLabelProps={{
|
|
style: {
|
|
fontSize: '14px',
|
|
},
|
|
}}
|
|
variant='outlined'
|
|
size='small'
|
|
/>
|
|
</Box>
|
|
<StyledButton
|
|
variant='contained'
|
|
color='primary'
|
|
type='submit'
|
|
onClick={closeFeedback}
|
|
>
|
|
Send Feedback
|
|
</StyledButton>
|
|
</StyledForm>
|
|
</StyledContent>
|
|
</StyledContainer>
|
|
</ParentContainer>
|
|
}
|
|
/>
|
|
);
|
|
};
|