changed template for paymentsmodal and styles

luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css

@@ -1,10 +1,22 @@
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input:focus {
+    outline: none;
+}
+
 .payment-modal {
     position: absolute;
     top: 20%;
     left: 35%;
-    background: #000;
+    border-radius: 25px;
-    width: 400px;
+    background: #22252F;
-    height: 200px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 390px;
+    height: 462px;
 }
 
 .payments-modal__content {
@@ -13,39 +25,53 @@
     justify-content: space-between;
 }
 
-.payments-modal__content button {
+.close-modal__icon img {
-    background: #fff;
+    margin: 17px 22px 0 0;
-    border: none;
-    color: #ff0000;
-    width: 40px;
-    height: 40px;
-    font-size: 40px;
     cursor: pointer;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
-.payments__input--color input {
+.text-styles__margin h1 {
-    color: #000;
+    margin: 16px 0 0 26px;
 }
 
-.payments__margin {
+.payments-modal__content h1 {
-    margin: 40px 0 0 20px;
+    color: #fff;
-}
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-
-.payments__margin input {
-    margin-left: 10px;
-}
-
-.payments__button .payments-modal__content--btn {
-    display: flex;
-    justify-content: center;
-    margin-top: 5%;
-}
-
-.payments__button .payments-modal__content--btn button {
-    background: #fff;
-    color: #000;
     font-weight: 700;
-    padding: 10px 10px;
+    font-family: Montserrat Alternates;
-    border: none;
+    font-size: 20px;
-    cursor: pointer;
+}
+
+.payments-modal__deposit {
+    margin-left: 26px;
+}
+
+.deposit-text h3 {
+    color: rgba(68, 198, 239, 0.33);
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    margin-top: -10px;
+}
+
+.deposit-icon-diamond img {
+    position: absolute;
+    top: 17%;
+    left: 10%;
+}
+
+.deposit-icon__input input {
+    width: 350px;
+    height: 44px;
+    border-radius: 15px;
+    border: 2px solid #2B3458;
+    background: #22252F;
+    color: rgba(148, 148, 148, 0.95);
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    padding-left: 40px;
 }

luckydiamond/src/assets/icons-other/icon-payments-modal-close.svg

@@ -0,0 +1,17 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#208;&#154;&#209;&#128;&#208;&#181;&#209;&#129;&#209;&#130;&#208;&#184;&#208;&#186;" filter="url(#filter0_d_1064_8)">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M6.853 0.617653C6.51189 0.276538 5.95883 0.276538 5.61772 0.617653C5.2766 0.958768 5.2766 1.51182 5.61772 1.85294L13.7647 9.99994L4.61765 19.147C4.27654 19.4881 4.27654 20.0412 4.61765 20.3823C4.95877 20.7234 5.51182 20.7234 5.85294 20.3823L15 11.2352L24.147 20.3822C24.4881 20.7233 25.0412 20.7233 25.3823 20.3822C25.7234 20.0411 25.7234 19.4881 25.3823 19.1469L16.2353 9.99994L24.3822 1.85301C24.7233 1.51189 24.7233 0.958835 24.3822 0.61772C24.0411 0.276605 23.4881 0.276605 23.1469 0.61772L15 8.76466L6.853 0.617653Z" fill="#30364F"/>
+</g>
+<defs>
+<filter id="filter0_d_1064_8" x="0.361816" y="0.361816" width="29.2764" height="28.2764" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1064_8"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1064_8" result="shape"/>
+</filter>
+</defs>
+</svg>

luckydiamond/src/components/PaymentsModal.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="payment-modal">
-    <div class="payments-modal__content">
+    <div class="payments-modal__content close-modal__icon text-styles__margin">
       <h1>{{ payments ? 'Пополнить' : 'Вывод' }}</h1>
-      <button @click="closeModal">X</button>
+      <img @click="closeModal" src="@/assets/icons-other/icon-payments-modal-close.svg">
+    </div>
+    <div v-if="payments" class="payments-modal__deposit">
+      <div class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input">
+        <h3>Сумма пополнения</h3>
+        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+        <input type="number">
+        <div class="deposit-btns">
+
         </div>
-    <div v-if="payments" class="payments-modal__deposit payments__input--color payments__margin payments__button">
-      <label>Введите сумму пополнения</label>
-      <input v-model="amount" type="number">
-      <div class="payments-modal__content--btn">
-        <button type="submit" @click="detectorMethod('dep')">Подтвердить</button>
       </div>
     </div>
     <div v-else class="payments-modal__withdraw payments__input--color payments__margin payments__button">

luckydiamond/src/pages/ProfilePage.vue

@@ -56,7 +56,7 @@
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
-import PaymentsModal from "@/components/archive/PaymentsModal.vue";
+import PaymentsModal from "@/components/PaymentsModal.vue";
 import '@/assets/css/PagesStyles/profile.css'
 
 export default {