mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
feat: feedback screen main ui (#5729)
Completes the main UI for feedback. Next steps is to correct data flow and finetuning.
This commit is contained in:
parent
71a65b1d6b
commit
2588a90f79
@ -1,26 +1,33 @@
|
||||
import { Box, styled } from '@mui/material';
|
||||
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,
|
||||
width: '496px',
|
||||
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,
|
||||
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
right: '496px',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: 'rgba(32, 32, 33, 0.40)',
|
||||
},
|
||||
}));
|
||||
|
||||
export const StyledContent = styled('div')(({ theme }) => ({
|
||||
@ -62,6 +69,68 @@ export const FormTitle = styled(Box)(({ theme }) => ({
|
||||
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();
|
||||
|
||||
@ -71,19 +140,88 @@ export const FeedbackComponent = () => {
|
||||
<ConditionallyRender
|
||||
condition={showFeedback}
|
||||
show={
|
||||
<ParentContainer>
|
||||
<StyledContainer>
|
||||
<StyledContent>
|
||||
<StyledTitle>Help us to improve Unleash</StyledTitle>
|
||||
<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>
|
||||
<button type='button' onClick={closeFeedback}>
|
||||
Close Feedback
|
||||
</button>
|
||||
</StyledContainer>
|
||||
</ParentContainer>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user