Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: feedback screen main ui (#5729)

Browse Source 
Completes the main UI for feedback.
Next steps is to correct data flow and finetuning.
This commit is contained in:
Jaanus Sellin 2023-12-28 09:30:36 +02:00 committed by GitHub
parent 71a65b1d6b
commit 2588a90f79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 163 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
frontend/src/component/feedbackNew/FeedbackComponent.tsx
View File

@ -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={
<StyledContainer> <ParentContainer>
<StyledContent> <StyledContainer>
<StyledTitle>Help us to improve Unleash</StyledTitle> <StyledContent>
<StyledForm> <StyledTitle>
<FormTitle> Help us to improve Unleash
How easy wasy it to configure the strategy? </StyledTitle>
</FormTitle> <StyledForm>
</StyledForm> <FormTitle>
</StyledContent> How easy wasy it to configure the strategy?
<button type='button' onClick={closeFeedback}> </FormTitle>
Close Feedback <StyledScoreContainer>
</button> <StyledScoreInput>
</StyledContainer> {[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>
} }
/> />
); );