add toatification package

components/login-page/Login-form.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
+  <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
   
-    <p class="text-[1.502vw] border-b px-[0.5vw]">ورود</p>
+    <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">ورود</p>
     <div class="relative flex flexBox w-full pt-[1vw]">
       <input
         v-model="phone"
@@ -10,7 +10,7 @@
         placeholder="شماره موبایل خود را وارد کنید"
       />
       <svg
-        class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
+        class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
         viewBox="0 0 22 22"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -32,18 +32,23 @@
       </svg>
     </div>
 
-    <button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
-      <span class="loader absolute" v-if="loading"></span>
+    <button class="greenButton  h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[8vw] md:!mt-[1.5vw] relative" @click="login">
+      <span class="loader 
+      h-[7vw] w-[7vw] left-[35vw] top-[3vw]
+      md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
+      absolute" v-if="loading"></span>
       <span v-else>دریافت کد ورود</span>
       
     </button>
-    <div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]" v-for="(error,index) in errors" :key="index">
+    <div class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw]  md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] md:-top-[10vw]" v-for="(error,index) in errors" :key="index">
       <span>* {{error}}</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
 const phone = ref(null);
 const errors = ref([]);
 const loading = ref(false);
@@ -72,13 +77,12 @@ async function login() {
       },
     });
     if (data.message === 'کد با موفقیت ارسال شد') {
+      toast.success('کد ورود برای شما ارسال شد')
       const phoneNumber = useState('phoneNumber', () => phone.value)
       FormStatus.value = true;
     }
     loading.value = false;
   } catch (error) {
-  //   console.log('errrrr :',error.data.data.message)
-  //  console.log('errrrr :', error.data.data.error)
   loading.value = false;
   return errors.value.push(error.data.data.error)
   }
@@ -87,11 +91,8 @@ async function login() {
 
 
 <style scoped>
+
 .loader {
-  top: 0.65vw;
-  left: 12vw;
-  width: 1.5vw;
-  height: 1.5vw;
   border: 0.2vw solid #fff;
   border-bottom-color: transparent;
   border-radius: 50%;