refactor PsychTestQuestion

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();

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">
+        <Question>
-            <div className="question__account">{+props.account + 1}</div>
+            <Id>{+props.account + 1}</Id>
-            <p className="question__title">{props.name}</p>
+            <QuestionTitle>{props.name}</QuestionTitle>
-            <div className="question__answers">
+            <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>
+                </Answer>
-                <label className="question__answer">
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -28,8 +101,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>2</span>
-                </label>
+                </Answer>
-                <label className="question__answer">
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -37,8 +110,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>3</span>
-                </label>
+                </Answer>
-                <label className="question__answer">
+                <Answer>
                     <input
                         name={props.account}
                         type="radio"
@@ -46,8 +119,8 @@ const PsychTestQuestion = (props) => {
                         onChange={answerChangeHandler}
                     />
                     <span>4</span>
-                </label>
+                </Answer>
-                <label className="question__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>
+            </Answers>
-        </div>
+        </Question>
     );
 };
 

pairent_frontend_react/vite.config.js

@@ -5,6 +5,4 @@ export default {
     plugins: [
         react()
     ],    
-    publicDir: 'static/dist',
-    
 }