fix(snacks): reposition X in errors

website/client/src/components/snackbars/notification.vue

@@ -15,17 +15,17 @@
       </div>
 
       <div
-        class="notification callout pt-0"
+        class="notification callout py-2 ml-2"
         :class="classes"
       >
         <div
           v-if="notification.type === 'error'"
-          class="row"
+          class="row pr-4"
         >
           <div class="text">
             <div v-html="notification.text"></div>
           </div>
-          <close-icon />
+          <close-x />
         </div>
         <div
           v-if="notification.type === 'streak'"
@@ -52,7 +52,7 @@
           <div class="text">
             <div>{{ message }}</div>
           </div>
-          <div class="icon d-flex align-items-center">
+          <div class="icon d-flex align-items-center ml-3">
             <div
               v-if="notification.type === 'hp'"
               class="svg-icon"
@@ -74,7 +74,7 @@
               v-html="icons.mana"
             ></div>
             <div
-              class="icon-text"
+              class="icon-text ml-1"
               v-html="notification.text"
             ></div>
           </div>
@@ -86,13 +86,13 @@
           <div class="text">
             <div>{{ message }}</div>
           </div>
-          <div class="icon d-flex align-items-center">
+          <div class="icon d-flex align-items-center ml-3">
             <div
               class="svg-icon"
               v-html="icons.sword"
             ></div>
             <div
-              class="icon-text"
+              class="icon-text ml-1"
               v-html="notification.text"
             ></div>
           </div>
@@ -121,6 +121,15 @@
 <style lang="scss" scoped>
 @import '@/assets/scss/colors.scss';
 
+  ::v-deep .modal-close {
+    top: 11px;
+    right: 11px;
+
+    .svg-close {
+      color: $black;
+    }
+  }
+
   .notification-holder {
     display: flex;
     flex-direction: row;
@@ -132,14 +141,14 @@
   }
 
   .notification {
+    color: $black;
     max-width: 330px;
     border-radius: 4px;
-    background-color: $green-50;
+    padding-left: 12px;
+    padding-right: 12px;
+    background-color: $green-100;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    color: white;
-    margin-left: 0.5rem;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
+    line-height: 1.714;
 
     transition: opacity .5s, top .5s;
 
@@ -149,45 +158,21 @@
   }
 
   .info {
-    background-color: $blue-50;
+    background-color: $blue-100;
     padding-top: .5rem;
   }
 
   .error {
-    background-color: $maroon-100;
-    color: $white;
+    background-color: $red-100;
     position: relative;
-    padding-right: 1.5rem !important;
     cursor: pointer;
-
-    ::v-deep button {
-      height: 9px;
-      width: 9px;
-      top: 0.525rem;
-      right: 0.525rem;
-      padding: 0;
-
-      opacity: 0.5;
-
-      svg path {
-        stroke: white;
-      }
-    }
-
-    &:hover {
-      ::v-deep button {
-        opacity: 1;
-      }
-    }
   }
 
   .negative {
-    background-color: $maroon-100;
+    background-color: $red-100;
   }
 
   .text {
-    padding: .5rem 0;
-
     ::v-deep p:last-of-type {
       margin-bottom: 0; // remove last markdown padding
     }
@@ -196,10 +181,10 @@
   .svg-icon {
     width: 24px;
     height: 24px;
-    margin: 0.35rem;
   }
 
   .drop {
+    color: $white;
     background-color: $gray-50;
   }
 
@@ -210,7 +195,6 @@
   }
 
   .icon-text {
-    color: $white;
     font-weight: bold;
   }
 
@@ -230,12 +214,12 @@ import gold from '@/assets/svg/gold.svg?raw';
 import star from '@/assets/svg/star.svg?raw';
 import mana from '@/assets/svg/mana.svg?raw';
 import sword from '@/assets/svg/sword.svg?raw';
-import CloseIcon from '../shared/closeIcon';
+import CloseX from '@/components/ui/closeX';
 import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
-    CloseIcon,
+    CloseX,
     Sprite,
   },
   props: ['notification', 'visibleAmount'],