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:
Jaanus Sellin
GitHub
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 { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { useFeedback } from './useFeedback';
|
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 }) => ({
|
export const StyledContainer = styled('div')(({ theme }) => ({
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: 0,
|
top: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
width: '496px',
|
|
||||||
height: '100vh',
|
height: '100vh',
|
||||||
opacity: 1,
|
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,
|
backgroundColor: theme.palette.primary.main,
|
||||||
zIndex: theme.zIndex.sticky,
|
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 }) => ({
|
export const StyledContent = styled('div')(({ theme }) => ({
|
||||||
@ -62,6 +69,68 @@ export const FormTitle = styled(Box)(({ theme }) => ({
|
|||||||
fontWeight: theme.typography.fontWeightBold,
|
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 = () => {
|
export const FeedbackComponent = () => {
|
||||||
const { feedbackData, showFeedback, closeFeedback } = useFeedback();
|
const { feedbackData, showFeedback, closeFeedback } = useFeedback();
|
||||||
|
|
||||||
@ -71,19 +140,88 @@ export const FeedbackComponent = () => {
|
|||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={showFeedback}
|
condition={showFeedback}
|
||||||
show={
|
show={
|
||||||
|
<ParentContainer>
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledContent>
|
<StyledContent>
|
||||||
<StyledTitle>Help us to improve Unleash</StyledTitle>
|
<StyledTitle>
|
||||||
|
Help us to improve Unleash
|
||||||
|
</StyledTitle>
|
||||||
<StyledForm>
|
<StyledForm>
|
||||||
<FormTitle>
|
<FormTitle>
|
||||||
How easy wasy it to configure the strategy?
|
How easy wasy it to configure the strategy?
|
||||||
</FormTitle>
|
</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>
|
</StyledForm>
|
||||||
</StyledContent>
|
</StyledContent>
|
||||||
<button type='button' onClick={closeFeedback}>
|
|
||||||
Close Feedback
|
|
||||||
</button>
|
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
|
</ParentContainer>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user