From 6725ac6966dcd596e5e880f37273215daa328834 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Wed, 17 May 2023 09:43:37 +1000
Subject: [PATCH] refactor PsychTestQuestion

---
 .../src/components/PsychTestForm/index.jsx    |   2 +
 .../components/PsychTestQuestion/index.jsx    | 107 +++++++++++++++---
 pairent_frontend_react/vite.config.js         |   4 +-
 3 files changed, 93 insertions(+), 20 deletions(-)

diff --git a/pairent_frontend_react/src/components/PsychTestForm/index.jsx b/pairent_frontend_react/src/components/PsychTestForm/index.jsx
index fc31af8..3e6fb58 100644
--- a/pairent_frontend_react/src/components/PsychTestForm/index.jsx
+++ b/pairent_frontend_react/src/components/PsychTestForm/index.jsx
@@ -4,6 +4,8 @@ import PsychTestAddResult from "../../API/PsychTestAddResult";
 import { useNavigate } from "react-router-dom";
 import "./styles/PsychTestForm.css";
 
+import { styled } from "styled-components";
+
 const PsychTestForm = () => {
     const [isValid, setIsValid] = useState(true);
     const navigate = useNavigate();
diff --git a/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx b/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx
index 2637e8b..3ffad52 100644
--- a/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx
+++ b/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx
@@ -1,17 +1,90 @@
 import React, { useState } from "react";
-import "./styles/PsychTestQuestion.css";
+
+import { styled } from "styled-components";
+
+const Question = styled.div`
+    padding-top: 4px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    width: 799px;
+    min-height: 151px;
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 34.5px;
+    & h2 {
+        color: #cccccc;
+        position: absolute;
+        top: 0px;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        border: 2px solid #cccccc;
+        border-radius: 100px;
+    }
+`;
+
+const QuestionTitle = styled.p`
+    margin-bottom: 80px;
+    text-align: center;
+    width: 638px;
+    font-size: 16px;
+    margin-right: 0;
+`;
+
+const Answers = styled.div`
+    display: flex;
+    margin-bottom: 29.5px;
+    & p, & span {
+        font-size: 14px;
+    }
+    & input, & p {
+        margin-right: 32px;
+        transform: translateY(6px)
+    }
+    & label {
+        transform: translateY(6px)
+    }
+`;
+
+const Answer = styled.label`
+    & span {
+        position: absolute;
+        top: -17px;
+        left: 3.5px
+    }
+`;
+
+const Id = styled.div`
+    color: #cccccc;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid #b2b4b2;
+    border-radius: 100px;
+`;
+
 
 const PsychTestQuestion = (props) => {
     const answerChangeHandler = (event) => {
         props.onChangeAnswer(event.target.value, event.target.name);
     };
     return (
-        <div className="question">
-            <div className="question__account">{+props.account + 1}</div>
-            <p className="question__title">{props.name}</p>
-            <div className="question__answers">
+        <Question>
+            <Id>{+props.account + 1}</Id>
+            <QuestionTitle>{props.name}</QuestionTitle>
+            <Answers>
                 <p>Не важно</p>
-                <label className="question__answer">
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -19,8 +92,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>1</span>
-                </label>
-                <label className="question__answer">
+                </Answer>
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -28,8 +101,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>2</span>
-                </label>
-                <label className="question__answer">
+                </Answer>
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -37,8 +110,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>3</span>
-                </label>
-                <label className="question__answer">
+                </Answer>
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -46,8 +119,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>4</span>
-                </label>
-                <label className="question__answer">
+                </Answer>
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -55,10 +128,10 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>5</span>
-                </label>
+                </Answer>
                 <p>Очень важно</p>
-            </div>
-        </div>
+            </Answers>
+        </Question>
     );
 };
 
diff --git a/pairent_frontend_react/vite.config.js b/pairent_frontend_react/vite.config.js
index 82c7627..c88c8e3 100644
--- a/pairent_frontend_react/vite.config.js
+++ b/pairent_frontend_react/vite.config.js
@@ -4,7 +4,5 @@ import react from '@vitejs/plugin-react'
 export default {
     plugins: [
         react()
-    ],
-    publicDir: 'static/dist',
-    
+    ],    
 }
\ No newline at end of file