fix: dark theme notification slot color issues

Author: hsurf22

src/components/MewNotification/MewNotification.vue

@@ -18,30 +18,24 @@
             class="px-2 py-0"
             :color="backgroundColor"
           >
-            <v-container
-              fluid
-              class="px-0"
-            >
+            <v-container fluid class="px-0">
               <v-row dense>
-                <v-col
-                  class="d-flex align-center"
-                  cols="8"
-                >
+                <v-col class="d-flex align-center" cols="8">
                   <!-- ===================================================================================== -->
                   <!-- Displays indicator if notification not read -->
                   <!-- ===================================================================================== -->
                   <div
                     v-if="
                       $vuetify.breakpoint.smAndUp &&
-                        !notification.read &&
-                        showIndicator
+                      !notification.read &&
+                      showIndicator
                     "
                     :class="[
                       getClasses(notification.status.value.toLowerCase()),
                       'indicator',
                       'ml-2',
                       'd-none',
-                      'd-sm-flex',
+                      'd-sm-flex'
                     ]"
                   />
 
@@ -59,10 +53,7 @@
                   <!-- ===================================================================================== -->
                   <!-- Displays swap icons if it is a swap notification -->
                   <!-- ===================================================================================== -->
-                  <div
-                    v-else
-                    class="d-flex flex-column currency-symbol ml-2"
-                  >
+                  <div v-else class="d-flex flex-column currency-symbol ml-2">
                     <MewTokenContainer
                       :img="
                         notification.fromObj.icon
@@ -130,10 +121,7 @@
                     </div>
                   </div>
                 </v-col>
-                <v-col
-                  cols="4"
-                  class="text-right pr-2"
-                >
+                <v-col cols="4" class="text-right pr-2">
                   <mew-badge
                     :badge-title="notification.type.string"
                     :badge-type="getBadgeType"
@@ -148,20 +136,11 @@
             </v-container>
           </v-expansion-panel-header>
 
-          <v-expansion-panel-content
-            class="pa-0"
-            :color="backgroundColor"
-          >
+          <v-expansion-panel-content class="pa-0" :color="backgroundColor">
             <div class="expanded-container capitalize">
               <v-container>
-                <v-row
-                  v-for="(detail, idx) in getDetails"
-                  :key="idx"
-                >
-                  <v-col
-                    cols="6"
-                    class="textPrimary--text"
-                  >
+                <v-row v-for="(detail, idx) in getDetails" :key="idx">
+                  <v-col cols="6" class="textPrimary--text">
                     {{ detail.string }}:
                   </v-col>
                   <v-col
@@ -183,11 +162,7 @@
                       hide-icon
                     >
                       <template #activatorSlot="{ on }">
-                        <a
-                          :href="detail.link"
-                          target="_blank"
-                          v-on="on"
-                        >
+                        <a :href="detail.link" target="_blank" v-on="on">
                           <mew-transform-hash :hash="detail.value" />
                         </a>
                       </template>
@@ -221,7 +196,7 @@ export default {
     MewBadge,
     MewBlockie,
     MewTransformHash,
-    MewTooltip,
+    MewTooltip
   },
   props: {
     /**
@@ -240,78 +215,78 @@ export default {
         return {
           txHash: {
             value: '',
-            string: '',
+            string: ''
           },
           gasPrice: {
             value: '',
-            string: '',
+            string: ''
           },
           gasLimit: {
             value: '',
-            string: '',
+            string: ''
           },
           total: {
             value: '',
-            string: '',
+            string: ''
           },
           from: {
             value: '',
-            string: '',
+            string: ''
           },
           to: {
             value: '',
-            string: '',
+            string: ''
           },
           amount: {
             value: '',
-            string: '',
+            string: ''
           },
           timestamp: {
             value: '',
-            string: '',
+            string: ''
           },
           status: {
             value: '',
-            string: '',
+            string: ''
           },
           type: {
             value: '',
-            string: '',
+            string: ''
           },
           fromObj: {
             currency: '',
             amount: '',
-            icon: '',
+            icon: ''
           },
           toObj: {
             currency: '',
             amount: '',
             icon: '',
-            to: '',
+            to: ''
           },
-          read: false,
+          read: false
         };
-      },
+      }
     },
     showIndicator: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   data() {
     return {
       ethTokenPlaceholder: ethTokenPlaceholder,
       txTypes: {
         in: 'txIn',
         out: 'txOut',
-        swap: 'swap',
+        swap: 'swap'
       },
       txStatusOptions: {
         success: 'success',
         pending: 'pending',
-        failed: 'failed',
+        failed: 'failed'
       },
-      hashType: 'Transaction Hash',
+      hashType: 'Transaction Hash'
     };
   },
   computed: {
@@ -326,13 +301,16 @@ export default {
         : this.notification.toObj.amount;
     },
     backgroundColor() {
+      if (this.$vuetify.theme.dark) {
+        return 'buttonGrayLight';
+      }
       if (this.notification.status.value == this.txStatusOptions.pending) {
         return 'warning';
       }
       if (this.notification.status.value == this.txStatusOptions.failed) {
         return 'error lighten-1';
       }
-      return 'superPrimary';
+      return 'buttonGrayLight';
     },
     getBadgeType() {
       const type = this.notification.type.value.toLowerCase();
@@ -346,7 +324,7 @@ export default {
           'gasLimit',
           'total',
           'timestamp',
-          'status',
+          'status'
         ];
       for (const key in this.notification) {
         if (detailTypes.indexOf(key) >= 0) {
@@ -357,7 +335,7 @@ export default {
     },
     isSwap() {
       return this.notification.type.value.toLowerCase() === this.txTypes.swap;
-    },
+    }
   },
   methods: {
     isHash(type) {
@@ -393,8 +371,8 @@ export default {
         }
         return 'failed-type';
       }
-    },
-  },
+    }
+  }
 };
 </script>