fix: dark theme color for components

src/components/MewAlert/MewAlert.vue

@@ -5,6 +5,7 @@
   =====================================================================================
   -->
   <v-alert
+    class="mew-alert mb-0 bs-small"
     :class="[alertClasses, hideAlertIcon ? 'pl-7' : 'pl-4', 'py-3 pr-5']"
     colored-border
     :color="alertColor"
@@ -20,21 +21,18 @@
     <div :class="[hideAlertIcon ? '' : 'pl-1']">
       <span
         v-if="title"
-        class="mew-body font-weight-bold textDark--text"
-      >{{
-        title
-      }}</span>
-      <div
-        v-if="description"
-        class="mew-body textDark--text"
+        class="mew-body font-weight-bold textAlwaysDark--text"
+        >{{ title }}</span
       >
+      <div v-if="description" class="mew-body textAlwaysDark--text">
         {{ description }}
         <a
           v-if="linkObject"
           target="_blank"
-          class="textDark--text text-decoration-underline"
+          class="textAlwaysDark--text text-decoration-underline"
           :href="linkObject.url"
-        >{{ linkObject.text }}</a>
+          >{{ linkObject.text }}</a
+        >
       </div>
       <!--
   =====================================================================================
@@ -49,20 +47,9 @@
    TODO: change this to mew-icon component after icon buttons are finalized.
   =====================================================================================
   -->
-    <template v-slot:close="{ toggle }">
-      <v-btn
-        v-if="!hideCloseIcon"
-        class="close-btn"
-        @click="toggle"
-        icon
-      >
-        <v-icon
-          :color="alertColor"
-          size="16"
-          class="pa-1"
-        >
-          mdi-close
-        </v-icon>
+    <template #close="{ toggle }">
+      <v-btn v-if="!hideCloseIcon" class="close-btn" icon @click="toggle">
+        <v-icon :color="alertColor" size="16" class="pa-1"> mdi-close </v-icon>
       </v-btn>
     </template>
   </v-alert>
@@ -77,51 +64,51 @@ export default {
      */
     theme: {
       type: String,
-      default: 'info',
+      default: 'info'
     },
     /**
      * Sets a white background for the entire alert.
      */
     hasWhiteBackground: {
       type: Boolean,
-      default: false,
+      default: false
     },
     /**
      * Hides top left icon.
      */
     hideAlertIcon: {
       type: Boolean,
-      default: false,
+      default: false
     },
     /**
      * Hides close button.
      */
     hideCloseIcon: {
       type: Boolean,
-      default: false,
+      default: false
     },
     /**
      * Adds a title to the alert.
      */
     title: {
       type: String,
-      default: '',
+      default: ''
     },
     /**
      * Adds a description to the alert.
      */
     description: {
       type: String,
-      default: '',
+      default: ''
     },
     /**
      * Expects a link object with attributes text and url, i.e { url: 'www.myetherwallet.com', text: 'Home" }
      * This is added at the end of description.
      */
     linkObject: {
       type: Object,
-      default: () => {},
-    },
+      default: () => {}
+    }
   },
   data() {
     return {
@@ -132,8 +119,8 @@ export default {
         error: 'error',
         warning: 'warning',
         success: 'success',
-        info: 'info',
-      },
+        info: 'info'
+      }
     };
   },
   computed: {
@@ -201,7 +188,7 @@ export default {
      * @returns specific mew alert classes. Used for styling.
      */
     alertClasses() {
-      const classes = ['mew-alert mb-0'];
+      const classes = [];
       if (this.hasWhiteBackground) {
         classes.push('white');
       }
@@ -218,8 +205,8 @@ export default {
         classes.push('greenLight');
       }
       return classes;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -229,7 +216,6 @@ export default {
   */
 .mew-alert {
   border-radius: 8px;
-  box-shadow: 0px 1.6px 6px rgba(90, 103, 138, 0.6) !important;
   .close-btn {
     height: auto;
     width: auto;

src/components/MewButton/MewButton.vue

@@ -25,11 +25,8 @@
       <!-- ===================================================================================== -->
       <!-- Button text (if no title prop is passed, then slot should be used) -->
       <!-- ===================================================================================== -->
-      <span
-        v-if="title"
-        class="font-weight-regular reset-text-style"
-      >
-        {{ title }} 
+      <span v-if="title" class="font-weight-regular reset-text-style">
+        {{ title }}
       </span>
       <!-- ===================================================================================== -->
       <!-- slot: default -->
@@ -154,6 +151,7 @@ export default {
     /**
      * @returns the process circular loading color.
      */
+    /*
     loadingColor() {
       if (!this.disabled && this.isLight && this.isPrimaryTheme) {
         return 'greenPrimary';
@@ -181,6 +179,7 @@ export default {
 
       return 'white';
     },
+    */
     /**
      * @returns button color based on color theme and btn style props.
      */
@@ -205,7 +204,7 @@ export default {
 
       // PRIMARY COLORS
       if (this.isPrimaryTheme && this.isLight) {
-        return 'backgroundOverlay';
+        return 'buttonGrayLight';
       }
 
       if (this.isPrimaryTheme) {