From d01eda328da7e8f1ddf8d4de94933d572c3763f7 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 21 Dec 2023 16:37:16 +0300
Subject: [PATCH] added styles for error with dont clicked checkbox in payments
 modal

---
 .../css/ComponentsStyles/payments-modal.css   | 26 +++++++++++++++++++
 luckydiamond/src/components/PaymentsModal.vue |  6 ++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
index 396fe41..9294f84 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -195,6 +195,32 @@ input[type="checkbox"]:checked::before {
     margin-left: 26px;
 }
 
+.error-checkbox {
+    position: absolute;
+}
+
+.error-checkbox h2 {
+    font-size: 13px;
+    font-weight: 400;
+    color: #c52f2f;
+}
+
+.checkbox-styles input:disabled:hover {
+    animation: shake 0.6s cubic-bezier(.36, .07, .19, .97);
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-4px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(4px);
+    }
+}
+
 .number-card {
     margin-top: 15px;
 }
diff --git a/luckydiamond/src/components/PaymentsModal.vue b/luckydiamond/src/components/PaymentsModal.vue
index 4821d63..4947004 100644
--- a/luckydiamond/src/components/PaymentsModal.vue
+++ b/luckydiamond/src/components/PaymentsModal.vue
@@ -67,8 +67,11 @@
         <h3>Введите номер карты</h3>
         <input class="with-input" v-model="card" type="text" />
       </div>
+      <div v-if="offAgree" class="error-checkbox">
+        <h2 v-show="errorAgree">Введите сначало карту</h2>
+      </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input :disabled="offAgree" @click="agreeUser = !agreeUser" type="checkbox"/>
+        <input :disabled="offAgree" @mouseover="errorAgree = true" @mouseleave="errorAgree = false" @click="agreeUser = !agreeUser" type="checkbox"/>
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
       <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component>
@@ -105,6 +108,7 @@ export default {
       amountWithdraw: 1,
       amountSave: 1,
       card: '',
+      errorAgree: false,
       captchaToken: null,
       clickedBtn: "",
       url: "",