крутые штуки

src/components/forms/ScaleQuestion.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="rating-component">
+  <div class="rating">
-    <div class="labels">
+    <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>
+<style scoped lang="scss">
-.rating-component {
+.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 {
+//button {
-  display: flex;
+//  margin-top: 10px;
-  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;
-}
 </style>

src/components/forms/SelectorQuestion.vue

@@ -1,22 +1,25 @@
 <template>
-  <div class="selector-component">
+  <div class="selector">
-    <div class="options">
+    <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>
+<style scoped lang="scss">
-.selector-component {
+.selector {
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px;
-}
 
-.options {
+  &-options {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    gap: 15px;
-}
+    flex-wrap: wrap;
+  }
 
-.option {
+  &-option {
-  margin: 5px;
+    border-radius: 0.5rem;
-  padding: 10px;
+    background: var(--color-input-background);
-  border: 1px solid #ccc;
+    border: 1px solid var(--color-main-border);
-  cursor: pointer;
+    padding: 10px;
-  display: flex;
+    cursor: pointer;
-  align-items: center;
+    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 {

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 {

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

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">
+              <div class="view-form-info--text">Страница 1 из 1</div>
-                Страница 1 из 1
-              </div>
             </div>
             <h2 class="form-title">{{ data.name }}</h2>
             <p class="form-description">{{ currentPage.text }}</p>