styles type Dropdown

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>

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>

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>

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;
@@ -12,3 +12,8 @@
 .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, '']);
     };
@@ -41,9 +46,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
                 {answerOption.map((answerText, index) => (
                     <AnswerOption
                         key={index}
-                        src={questionType === "single" ?
+                        selectedType={selectedType}
-                            '../../../public/radio_button_checked.svg' :
-                            '../../../public/check_box.svg' }
                         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; /* Убедитесь, что список отображается поверх других элементов */
+    z-index: 1;
-    width: 100%; /* Занимает всю ширину контейнера */
+    width: 100%;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    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 {
+    /*cursor: pointer;*/
-    background-color: #f0f0f0;
 }
 
 .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) => {
+    const handleSelect = (value: 'single' | 'multiply') => {
-        setSelectedType(value);
+        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 && (