From 05d5d396b884258de099890842cfde8a4bc5d3f7 Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Sat, 5 Apr 2025 21:14:19 +0500
Subject: [PATCH] styles type Dropdown

---
 SurveyFrontend/public/arrow_drop_down.svg     |  3 ++
 SurveyFrontend/public/arrow_drop_up.svg       |  3 ++
 .../public/radio_button_unchecked.svg         |  3 ++
 .../components/AnswerOption/AnswerOption.tsx  | 18 ++++++++--
 .../QuestionItem/QuestionItem.module.css      |  7 +++-
 .../components/QuestionItem/QuestionItem.tsx  | 21 +++++++-----
 .../TypeDropdown/TypeDropdown.module.css      | 34 +++++++++----------
 .../components/TypeDropdown/TypeDropdown.tsx  | 20 ++++++++---
 8 files changed, 74 insertions(+), 35 deletions(-)
 create mode 100644 SurveyFrontend/public/arrow_drop_down.svg
 create mode 100644 SurveyFrontend/public/arrow_drop_up.svg
 create mode 100644 SurveyFrontend/public/radio_button_unchecked.svg

diff --git a/SurveyFrontend/public/arrow_drop_down.svg b/SurveyFrontend/public/arrow_drop_down.svg
new file mode 100644
index 0000000..1d700de
--- /dev/null
+++ b/SurveyFrontend/public/arrow_drop_down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15L7 10H17L12 15Z" fill="#1D1B20"/>
+</svg>
diff --git a/SurveyFrontend/public/arrow_drop_up.svg b/SurveyFrontend/public/arrow_drop_up.svg
new file mode 100644
index 0000000..d891272
--- /dev/null
+++ b/SurveyFrontend/public/arrow_drop_up.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14L12 9L17 14H7Z" fill="#1D1B20"/>
+</svg>
diff --git a/SurveyFrontend/public/radio_button_unchecked.svg b/SurveyFrontend/public/radio_button_unchecked.svg
new file mode 100644
index 0000000..a99050b
--- /dev/null
+++ b/SurveyFrontend/public/radio_button_unchecked.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99999 18.3333C8.84721 18.3333 7.76388 18.1146 6.74999 17.6771C5.7361 17.2396 4.85416 16.6458 4.10416 15.8958C3.35416 15.1458 2.76041 14.2639 2.32291 13.25C1.88541 12.2361 1.66666 11.1528 1.66666 9.99999C1.66666 8.84721 1.88541 7.76388 2.32291 6.74999C2.76041 5.7361 3.35416 4.85416 4.10416 4.10416C4.85416 3.35416 5.7361 2.76041 6.74999 2.32291C7.76388 1.88541 8.84721 1.66666 9.99999 1.66666C11.1528 1.66666 12.2361 1.88541 13.25 2.32291C14.2639 2.76041 15.1458 3.35416 15.8958 4.10416C16.6458 4.85416 17.2396 5.7361 17.6771 6.74999C18.1146 7.76388 18.3333 8.84721 18.3333 9.99999C18.3333 11.1528 18.1146 12.2361 17.6771 13.25C17.2396 14.2639 16.6458 15.1458 15.8958 15.8958C15.1458 16.6458 14.2639 17.2396 13.25 17.6771C12.2361 18.1146 11.1528 18.3333 9.99999 18.3333ZM9.99999 16.6667C11.8611 16.6667 13.4375 16.0208 14.7292 14.7292C16.0208 13.4375 16.6667 11.8611 16.6667 9.99999C16.6667 8.13888 16.0208 6.56249 14.7292 5.27082C13.4375 3.97916 11.8611 3.33332 9.99999 3.33332C8.13888 3.33332 6.56249 3.97916 5.27082 5.27082C3.97916 6.56249 3.33332 8.13888 3.33332 9.99999C3.33332 11.8611 3.97916 13.4375 5.27082 14.7292C6.56249 16.0208 8.13888 16.6667 9.99999 16.6667Z" fill="#1D1B20"/>
+</svg>
diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
index cd84857..8645966 100644
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
@@ -1,14 +1,18 @@
 import React, {useState, useRef, useEffect} from "react";
 import styles from'./AnswerOption.module.css';
 
+const single_selected_response = '../../../public/radio_button_checked.svg';
+const multiple_selected_response = '../../../public/check_box.svg';
+// const single_response =
+
 interface AnswerOptionProps{
-    src: string;
     index: number;
     value: string;
     onChange: (value: string) => void;
+    selectedType: 'single' | 'multiply';
 }
 
-const AnswerOption: React.FC<AnswerOptionProps> = ({src, index, value, onChange}) => {
+const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, selectedType}) => {
     const [currentValue, setCurrentValue] = useState(value);
     const [isEditing, setIsEditing] = useState(false); //редактируется ли сейчас
 
@@ -48,9 +52,17 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({src, index, value, onChange}
         }
     }, [isEditing]);
 
+    const getImage = (typeValue: string): string => {
+        if (typeValue === 'multiply') {
+            return multiple_selected_response;
+        } else {
+            return single_selected_response;
+        }
+    };
+
     return (
         <div className={styles.answer}>
-            <img className={styles.answerIcon} src={src} alt="" />
+            <img className={styles.answerIcon} src={getImage(selectedType)} alt="" />
             {isEditing ? (
                 <textarea className={styles.answerInput}
                           ref={textAreaRef}
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css b/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
index 9b42b30..19801bd 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
@@ -1,9 +1,9 @@
 /*QuestionItem.module.css*/
 
 .questionCard{
-    width: 100%;
     background-color: white;
     display: flex;
+    justify-content: space-between;
     margin-bottom: 34px;
     padding: 27px 29px 26px 36px;
     border-radius: 14px;
@@ -11,4 +11,9 @@
 
 .questionCard:last-child{
     margin-bottom: 0;
+}
+
+.questionContainer{
+    display: flex;
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
index 534643b..a3a332d 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
@@ -11,10 +11,15 @@ interface QuestionItemProps {
 }
 
 const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`}) => {
+    const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
+
     const [answerOption, setAnswerOption] = useState(['']);
-    const [questionType] = useState('single');
     const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
 
+    const handleTypeChange = (type: 'single' | 'multiply') => {
+        setSelectedType(type);
+    }
+
     const handleAddAnswer = () => {
         setAnswerOption([...answerOption, '']);
     };
@@ -33,17 +38,15 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
         <div className={styles.questionCard}>
             <div className={styles.questionContainer}>
                 <h2>
-                <textarea
-                    value={textQuestion}
-                    onChange={handleQuestionChange}
-                />
+                    <textarea
+                        value={textQuestion}
+                        onChange={handleQuestionChange}
+                    />
                 </h2>
                 {answerOption.map((answerText, index) => (
                     <AnswerOption
                         key={index}
-                        src={questionType === "single" ?
-                            '../../../public/radio_button_checked.svg' :
-                            '../../../public/check_box.svg' }
+                        selectedType={selectedType}
                         index={index + 1} // Индекс ответа
                         value={answerText}
                         onChange={(value) => handleAnswerChange(index, value)}
@@ -54,7 +57,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
                     onClick={handleAddAnswer}
                 />
             </div>
-            <TypeDropdown/>
+            <TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
         </div>
     );
 }
diff --git a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
index f97ac79..681d004 100644
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
@@ -1,9 +1,10 @@
 /*TypeDropdown.module.css*/
 
 .dropdownContainer {
-    width: 22%;
+    width: 23%;
     position: relative;
     display: inline-block;
+    margin-right: 29px;
 }
 
 .dropdownButton {
@@ -16,53 +17,52 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     width: 118%;
     text-align: left;
+    white-space: nowrap;
 }
 
 .selectedTypeIcon {
-    margin-right: 5px;
+    margin-right: 4px;
 }
 
 .dropdownArrow {
-    margin-left: 5px;
+    margin-left: auto;
 }
 
 .dropdownList {
     margin-top: 11px;
     position: absolute;
-    top: 100%;
-    left: 0;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
-    padding: 5px 0;
+    padding: 12px;
     list-style: none;
-    z-index: 1; /* Убедитесь, что список отображается поверх других элементов */
-    width: 100%; /* Занимает всю ширину контейнера */
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    width: 100%;
+    box-shadow: 0 0 4.7px 0 #00000040;
 }
 
 .dropdownItem {
-    padding: 10px 15px;
-    cursor: pointer;
     display: flex;
     align-items: center;
-}
+    margin-bottom: 14px;
+    padding: 0;
+    border: none;
+    background-color: #ffffff;
 
-.dropdownItem:hover {
-    background-color: #f0f0f0;
+    /*cursor: pointer;*/
 }
 
 .dropdownItemIcon {
     margin-right: 5px;
+    width: 24px;
 }
 
 .selectedTypeIcon,
 .dropdownItemIcon {
-    width: 20px; /* Задайте нужную ширину и высоту */
+    width: 20px;
     height: 20px;
     margin-right: 5px;
-    vertical-align: middle; /* Выровняйте значок по вертикали */
+    vertical-align: middle;
 }
diff --git a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
index 227555e..80e85ac 100644
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
@@ -5,18 +5,24 @@ import styles from './TypeDropdown.module.css'
 const single_selected = '../../../public/radio_button_checked.svg';
 const multiple_selected = '../../../public/check_box.svg';
 
+const arrow_drop_down = '../../../public/arrow_drop_down.svg';
+const arrow_drop_up = '../../../public/arrow_drop_up.svg';
 
-const TypeDropdown: React.FC = () => {
+interface TypeDropdownProps {
+    selectedType: 'single' | 'multiply';
+    onTypeChange: (type: 'single' | 'multiply') => void;
+}
+
+const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange}) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedType, setSelectedType] = useState('single');
     const dropdownRef = useRef<HTMLDivElement>(null);
 
     const handleToggle = () =>{
         setIsOpen(!isOpen);
     }
 
-    const handleSelect = (value: string) => {
-        setSelectedType(value);
+    const handleSelect = (value: 'single' | 'multiply') => {
+        onTypeChange(value);
         setIsOpen(false);
     }
 
@@ -50,7 +56,11 @@ const TypeDropdown: React.FC = () => {
                     className={styles.selectedTypeIcon}
                 />
                 {selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
-                <span className={styles.dropdownArrow}>▼</span>
+                <img
+                    src={isOpen ? arrow_drop_up : arrow_drop_down}
+                    alt={isOpen ? "Закрыть" : "Открыть"}
+                    className={styles.dropdownArrow}
+                />
             </button>
 
             {isOpen && (