From 1a9e38730f9918347bb58da1617f643fa0e663e3 Mon Sep 17 00:00:00 2001
From: Vyacheslav <76677694+flyare1337@users.noreply.github.com>
Date: Mon, 26 Aug 2024 15:36:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D1=80=D1=83=D1=82=D1=8B=D0=B5=20=D1=88?=
 =?UTF-8?q?=D1=82=D1=83=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/ScaleQuestion.vue    | 84 +++++++++++++++--------
 src/components/forms/SelectorQuestion.vue | 67 +++++++++++++-----
 src/components/forms/TextQuestion.vue     |  9 ++-
 src/styles/colors.css                     |  2 +
 src/views/form/View.vue                   |  5 +-
 5 files changed, 116 insertions(+), 51 deletions(-)

diff --git a/src/components/forms/ScaleQuestion.vue b/src/components/forms/ScaleQuestion.vue
index 4f69b3b..957d1b4 100644
--- a/src/components/forms/ScaleQuestion.vue
+++ b/src/components/forms/ScaleQuestion.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="rating-component">
-    <div class="labels">
+  <div class="rating">
+    <div class="rating-labels">
       <span>{{ minLabel }}</span>
       <span>{{ maxLabel }}</span>
     </div>
@@ -16,7 +16,13 @@
         <span>{{ n }}</span>
       </label>
     </div>
-    <button v-if="selectedValue !== null" @click="cancelSelection">Отменить выбор</button>
+    <button
+      class="rating-delete default-button"
+      v-if="selectedValue !== null"
+      @click="cancelSelection"
+    >
+      Отменить выбор
+    </button>
   </div>
 </template>
 
@@ -67,33 +73,57 @@ function cancelSelection() {
 }
 </script>
 
-<style scoped>
-.rating-component {
+<style scoped lang="scss">
+.rating {
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  &-labels {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  &-options {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 0 50px;
+    width: 100%;
+
+    @media (max-width: 730px) {
+      flex-direction: column;
+      gap: 15px 0;
+    }
+  }
+
+  &-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px 0;
+
+    @media (max-width: 730px) {
+      flex-direction: initial;
+      gap: 0 15px;
+    }
+  }
+
+  &-delete {
+    width: 100%;
+    border-radius: 1rem;
+    padding: 10px 30px;
+    margin-top: 25px;
+    border: 1px solid var(--color-third-border);
+
+    &:hover {
+      border: 1px solid var(--color-main);
+    }
+  }
 }
 
-.labels {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.rating-options {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.rating-option {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-button {
-  margin-top: 10px;
-}
+//button {
+//  margin-top: 10px;
+//}
 </style>
diff --git a/src/components/forms/SelectorQuestion.vue b/src/components/forms/SelectorQuestion.vue
index bd26f1e..8582b9a 100644
--- a/src/components/forms/SelectorQuestion.vue
+++ b/src/components/forms/SelectorQuestion.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="selector-component">
-    <div class="options">
+  <div class="selector">
+    <div class="selector-options">
       <div
         v-for="(option, index) in options"
         :key="index"
-        class="option"
+        class="selector-option default-button"
         @click="toggleSelection(index)"
         :class="{ selected: isSelected(index) }"
       >
         <span>{{ option.label }}</span>
       </div>
     </div>
-    <div v-if="error" class="error">{{ error }}</div>
+    <p v-if="error" class="selector-error">
+      <PhXCircle class="selector-error--sign" :size="23" />{{ error }}
+    </p>
   </div>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
+import { PhXCircle } from '@phosphor-icons/vue'
 
 const props = defineProps({
   minValues: {
@@ -83,25 +86,51 @@ function validateSelection() {
 watch(selectedIndexes, validateSelection)
 </script>
 
-<style scoped>
-.selector-component {
+<style scoped lang="scss">
+.selector {
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px;
-}
 
-.options {
-  display: flex;
-  flex-wrap: wrap;
-}
+  &-options {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
 
-.option {
-  margin: 5px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+  &-option {
+    border-radius: 0.5rem;
+    background: var(--color-input-background);
+    border: 1px solid var(--color-main-border);
+    padding: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      border: 1px solid var(--color-secondary-border);
+      background: var(--color-main-background);
+    }
+
+    &.selected {
+      border: 1px solid var(--color-main);
+      background: var(--color-main-toned);
+      //color: var(--color-alternative-text);
+    }
+  }
+
+  &-error {
+    margin-top: 20px;
+    color: var(--color-red);
+    display: flex;
+    align-items: center;
+    gap: 0 13px;
+    font-size: 0.9em;
+
+    &--sign {
+      min-width: 23px;
+      min-height: 23px;
+    }
+  }
 }
 
 .option.selected {
diff --git a/src/components/forms/TextQuestion.vue b/src/components/forms/TextQuestion.vue
index 37e47a6..6b36067 100644
--- a/src/components/forms/TextQuestion.vue
+++ b/src/components/forms/TextQuestion.vue
@@ -10,7 +10,9 @@
       @blur="validateInput"
       placeholder="Ваш ответ"
     />
-    <p v-if="error" class="text-question-error"><PhXCircle :size="23" />{{ error }}</p>
+    <p v-if="error" class="text-question-error">
+      <PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
+    </p>
   </div>
 </template>
 
@@ -149,6 +151,11 @@ function validateInput() {
     align-items: center;
     gap: 0 13px;
     font-size: 0.9em;
+
+    &--sign {
+      min-width: 23px;
+      min-height: 23px;
+    }
   }
 
   &-input {
diff --git a/src/styles/colors.css b/src/styles/colors.css
index f2e122d..6ec1ae7 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -14,4 +14,6 @@
 
   --color-red: #ff3b3b;
   --color-green: rgb(0, 204, 0);
+
+  --color-main-toned: rgba(92, 139, 253, 0.3);
 }
diff --git a/src/views/form/View.vue b/src/views/form/View.vue
index a447ad0..7d52faa 100644
--- a/src/views/form/View.vue
+++ b/src/views/form/View.vue
@@ -81,11 +81,8 @@ onMounted(async () => {
         <div v-else class="view-form">
           <div class="view-form-title view-form-container default-card">
             <div class="view-form-info">
-
               <PhCardsThree :size="23" class="view-form-info--sign" />
-              <div class="view-form-info--text">
-                Страница 1 из 1
-              </div>
+              <div class="view-form-info--text">Страница 1 из 1</div>
             </div>
             <h2 class="form-title">{{ data.name }}</h2>
             <p class="form-description">{{ currentPage.text }}</p>