From 2588a90f790003e6105396ff32efc89c8e97df3a Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Thu, 28 Dec 2023 09:30:36 +0200
Subject: [PATCH] feat: feedback screen main ui (#5729)

Completes the main UI for feedback.
Next steps is to correct data flow and finetuning.
---
 .../feedbackNew/FeedbackComponent.tsx         | 188 +++++++++++++++---
 1 file changed, 163 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index 80b321d474..a5f3af0d36 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -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={
-                <StyledContainer>
-                    <StyledContent>
-                        <StyledTitle>Help us to improve Unleash</StyledTitle>
-                        <StyledForm>
-                            <FormTitle>
-                                How easy wasy it to configure the strategy?
-                            </FormTitle>
-                        </StyledForm>
-                    </StyledContent>
-                    <button type='button' onClick={closeFeedback}>
-                        Close Feedback
-                    </button>
-                </StyledContainer>
+                <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>
             }
         />
     );