From c314c0a24788d8141a8d87ee6fe6977d6dd81c3b Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 4 Jul 2024 14:57:57 +0300
Subject: [PATCH] close modal btn

---
 assets/main.scss          | 13 ++++++++++---
 components/calcValues.vue |  2 +-
 components/modal.vue      |  5 ++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index c283eb8..aa99e36 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -90,7 +90,7 @@ a[href^="#"] {
     }
 
     &-title {
-        @apply col-span-full text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
+        @apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
     }
 
     &-image {
@@ -115,12 +115,19 @@ a[href^="#"] {
 }
 
 .modal {
-    @apply bg-white p-10 border rounded shadow prose ;
+    @apply relative bg-white p-5 lg:p-10 border rounded shadow prose ;
 
     &-backdrop {
         @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30;
     }
 
+    &-close {
+        @apply absolute right-4 top-4 text-4xl opacity-50;
+    }
+    h2 {
+        @apply px-4;
+    }
+
     form {
         @apply flex flex-col gap-4 items-center;
     }
@@ -139,7 +146,7 @@ textarea {
 }
 
 button {
-    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-4;
+    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-5 lg:leading-4;
 
     &.neutral,
     &[type="reset"] {
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 0431b07..3aab477 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -234,7 +234,7 @@ const goal = (target: string, params: object) => {
                     </p>
                 </template>
             </div>
-            <div class="prose col-span-4">
+            <div class="prose col-span-12 lg:col-span-4">
                 <p v-if="form_state.extra_section" class="text-ioprim">
                     Внимание! Дополнительная секция приводит к увеличению стоимости.
                     Рекомендуем вам изменить длину забора или длину секции!
diff --git a/components/modal.vue b/components/modal.vue
index 2c521e0..464ad24 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -170,6 +170,9 @@ const goal = (target: string, params: object) => {
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
         <div class="modal">
+            <span class="modal-close" @click="toggleModal">
+                <Icon name="mdi:close" />
+            </span>
             <template v-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
                 <form @submit.prevent="submit" ref="form">
@@ -202,7 +205,7 @@ const goal = (target: string, params: object) => {
                     </template>
                 </div>
                 <div class="flex gap-4 justify-center">
-                    <button class="not-prose" @click="openForm">Отправить расчет на e-mail</button>
+                    <button class="not-prose" @click="openForm">Отправить расчет на <nobr>e-mail</nobr></button>
                 </div>
             </template>
         </div>