fix: use token cotainer for notification swap tokens

src/components/MewNotification/MewNotification.vue

@@ -61,23 +61,19 @@
                   <!-- ===================================================================================== -->
                   <div
                     v-else
-                    class="d-flex flex-column currency-symbol"
+                    class="d-flex flex-column currency-symbol ml-2"
                   >
-                    <img
-                      :src="
-                        notification.fromObj.icon
-                          ? notification.fromObj.icon
-                          : ethTokenPlaceholder
-                      "
-                      width="24px"
-                      height="24px"
-                    >
-                    <img
-                      :src="notification.toObj.icon"
-                      width="24px"
-                      height="24px"
+                    <MewTokenContainer
+                      :img=" notification.fromObj.icon
+                        ? notification.fromObj.icon
+                        : ethTokenPlaceholder"
+                      token-border
+                    />
+                    <MewTokenContainer
+                      :img="notification.toObj.icon"
                       class="overlap"
-                    >
+                      token-border
+                    />
                   </div>
 
                   <!-- ===================================================================================== -->
@@ -204,6 +200,7 @@
 </template>
 
 <script>
+import MewTokenContainer from '@/components/MewTokenContainer/MewTokenContainer.vue';
 import MewBadge from '@/components/MewBadge/MewBadge.vue';
 import MewBlockie from '@/components/MewBlockie/MewBlockie.vue';
 import MewTransformHash from '@/components/MewTransformHash/MewTransformHash.vue';
@@ -212,6 +209,7 @@ import ethTokenPlaceholder from '@/assets/images/icons/eth.svg';
 export default {
   name: 'MewNotification',
   components: {
+    MewTokenContainer,
     MewBadge,
     MewBlockie,
     MewTransformHash
@@ -472,7 +470,7 @@ export default {
   }
   .overlap {
     position: absolute;
-    left: 14px;
+    left: 15px;
   }
 }
 </style>

src/components/MewTokenContainer/MewTokenContainer.vue

@@ -4,6 +4,7 @@
   <!-- ===================================================================================== -->
   <div
     class="mew-token-container d-flex align-center justify-center"
+    :class="tokenBorder ? 'token-border' : ''"
     :style="{ height: `${getSize}`, width: `${getSize}` }"
   >
     <!-- ===================================================================================== -->
@@ -81,6 +82,13 @@ export default {
       type: [String, Array],
       default: '',
     },
+    /**
+     * Add border
+     */
+     tokenBorder: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -148,6 +156,10 @@ export default {
   border-radius: 50%;
   box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
 
+  &.token-border {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
+  }
+
   .token-skeleton {
     .v-skeleton-loader__avatar {
       background-color: var(--v-greyLight-base);