styles type Dropdown

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}

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;
 }

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

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;
 }

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 && (