add close button to modal

components/DetailModal.vue

@@ -22,9 +22,14 @@
           </v-carousel>
         </v-col>
         <v-col>
+          <v-row class="flex-row align-center justify-space-between mt-2">
           <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
             {{ name }}
           </v-card-title>
+          <v-btn icon @click="$emit('close')" style="background-color:red">
+              <v-icon color="white">mdi-close</v-icon>
+            </v-btn>
+          </v-row>
           <v-row class="flex-row align-center">
             <h3 class="mr-4">
               Price:
@@ -183,6 +188,9 @@ export default {
     }
   },
   methods: {
+    close () {
+      this.$props.status = false
+    },
     closeDialog () {
       this.$props.status = false
     },

components/user/Header.vue

@@ -136,11 +136,11 @@
                   :key="item.id"
                   link
                 >
-                  <v-list-item-avatar tile align-center min-height="80px" cover>
+                  <v-list-item-avatar class="item-avatar" tile align-center min-height="80px" cover>
                     <v-img :src="item.product.images[0]" />
                   </v-list-item-avatar>
                   <v-list-item-content class="list-item-card">
-                    <v-list-item-title>{{ item.product.name }}</v-list-item-title>
+                    <v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
                     <v-list-item-subtitle>{{ item.quantity +"x"+ item.product.price + "$" }}</v-list-item-subtitle>
                   </v-list-item-content>
 
@@ -201,15 +201,15 @@
 
       <v-list dense three-line>
         <v-list-item v-for="item in wishlist" :key="item.name" link>
-          <v-list-item-avatar>
-            <v-img :src="item.product.images[0]" />
+          <v-list-item-avatar tile class="align-center item-avatar">
+            <v-img tile :src="item.product.images[0]" />
           </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ item.product.name }}</v-list-item-title>
-            <v-list-item-subtitle>{{ item.product.price }}</v-list-item-subtitle>
+          <v-list-item-content class="list-item-card">
+            <v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
+            <v-list-item-subtitle>{{ item.product.price + '$' }}</v-list-item-subtitle>
           </v-list-item-content>
 
-          <v-list-item-action>
+          <v-list-item-action class="align-self-center">
             <v-btn icon @click="removeWishlist(item, index)">
               <v-icon color="grey lighten-1">
                 mdi-close-circle-outline
@@ -539,4 +539,9 @@ b {
 .list-item::-webkit-scrollbar {
   display: none;
 }
+.item-avatar {
+  height: 70px !important;
+  width: 70px !important;
+  min-width: 70px;
+}
 </style>