fix bug login and register modal

components/LoginModal.vue

 <template>
-    <v-row v-if="dialog" justify="center">
+  <v-row
+    v-if="dialog"
+    justify="center"
+  >
     <v-dialog
       v-model="dialog"
+      persistent
       width="450px"
     >
-        <!-- <template #activator="{ on, attrs }">
-            <v-btn
-            color="primary"
-            dark
-            v-bind="attrs"
-            v-on="on"
-            >
-            Open Dialog
-            </v-btn>
-        </template> -->
       <v-card-title class="justify-center">
         <p class="font-weight-black" style="font-size: 35px">
           LOGIN
@@ -81,23 +75,23 @@
 
 <script>
 export default {
-name: 'LoginModal',
-props: {
+  name: 'LoginModal',
+  props: {
     status: {
       type: Boolean,
       default: true
     }
-},
-data: () => ({
+  },
+  data: () => ({
     email: '',
     password: ''
-}),
-computed: {
+  }),
+  computed: {
     dialog () {
       return this.status
     }
-},
-methods: {
+  },
+  methods: {
     async login () {
       try {
         const resp = await this.$axios.post('/login',
@@ -122,13 +116,15 @@ methods: {
         this.$router.push('/login')
       }
     }
-}
+  }
 }
 </script>
 
-<style>
+<style scoped>
 .formlogin {
     padding: 30px;
 }
+::v-deep .v-dialog{
+  background-color: #5ae2dc;
+}
 </style>
-  
\ No newline at end of file

components/RegisterModal.vue

@@ -2,6 +2,7 @@
   <v-row v-if="dialog" justify="center">
     <v-dialog
       v-model="dialog"
+      persistent
       width="450px"
     >
       <v-card-title class="justify-center">
@@ -155,8 +156,11 @@ export default {
 }
 </script>
 
-  <style>
+  <style scoped>
     .formlogin {
       padding: 30px;
     }
+    ::v-deep .v-dialog{
+      background-color: #5ae2dc;
+    }
   </style>

components/user/Header.vue

@@ -244,8 +244,8 @@
     <!-- end header bottom -->
 
     <!-- show modal -->
-    <LoginModal v-click-outside="() => activeLogin = false" :status="activeLogin" @close="activeLogin=false" />
-    <SignupModal v-click-outside="() => activeRegister = false" :status="activeRegister" @close="activeRegister=false" />
+    <LoginModal :status="activeLogin" @close="activeLogin=false" />
+    <SignupModal :status="activeRegister" @close="activeRegister=false" />
   </div>
 </template>