redesign toast notifications

src/components/ArtistView/Header.vue

@@ -62,7 +62,6 @@ const artist = useArtistPageStore();
   position: absolute;
   opacity: 0.25;
   margin-right: -1rem;
-
 }
 .artist-page-header {
   height: 18rem;

src/components/Notification.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="toasts" v-if="notifStore.notifs">
     <div
-      class="new-notif rounded"
-      :class="[
-        { 'notif-error': notif.type == NotifType.Error },
-        {
-          'notif-info': notif.type == NotifType.Info,
-        },
-      ]"
+      class="new-notif rounded-sm"
+      :class="notif.type"
       v-for="notif in notifStore.notifs"
     >
-      <div class="ellip">{{ notif.text }}</div>
+      <component :is="getSvg(notif.type)" class="notif-icon" />
+      <div class="notif-text ellip">{{ notif.text }}</div>
     </div>
   </div>
 </template>
@@ -18,7 +14,25 @@
 <script setup lang="ts">
 import { useNotifStore, NotifType } from "../stores/notification";
 
+import ErrorSvg from "../assets/icons/toast/error.svg";
+import InfoSvg from "../assets/icons/toast/info.svg";
+import SuccessSvg from "../assets/icons/toast/ok.svg";
+import WorkingSvg from "../assets/icons/toast/working.svg";
+
 const notifStore = useNotifStore();
+
+function getSvg(notif: NotifType) {
+  switch (notif) {
+    case NotifType.Error:
+      return ErrorSvg;
+    case NotifType.Info:
+      return InfoSvg;
+    case NotifType.Success:
+      return SuccessSvg;
+    case NotifType.Working:
+      return WorkingSvg;
+  }
+}
 </script>
 <style lang="scss">
 .toasts {
@@ -29,27 +43,48 @@ const notifStore = useNotifStore();
   z-index: 100;
   display: flex;
   flex-direction: column-reverse;
-  gap: $small;
+  gap: 1rem;
 }
 
 .new-notif {
   width: 20rem;
-  height: 3.5rem;
-  bottom: 2rem;
-  padding: $small;
-  background: linear-gradient(to top right, #021b79, #0575e6);
+  height: 4rem;
+  background-color: $gray;
   display: grid;
   place-items: center;
-  align-items: center;
-  box-shadow: 0px 0px 2rem rgb(0, 0, 0);
-  font-size: .85rem;
+  box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.466);
+  font-size: 0.85rem;
+  padding: 1rem;
+
+  grid-template-columns: 2rem 3fr;
+  gap: $small;
+
+  .notif-text {
+    width: 100%;
+  }
 }
 
-.notif-error {
-  background: linear-gradient(to top right, #cf0b25, #e60518);
+.new-notif.error {
+  $bg: rgb(236, 31, 31);
+  $bg1: rgba(236, 31, 31, 0.15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
 }
 
-.notif-info {
-  background: linear-gradient(to top right, $gray4, $gray3);
+.new-notif.info {
+  $bg: rgb(28, 102, 238);
+  $bg1: rgba(31, 144, 236, 0.15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
+}
+
+.new-notif.success {
+  $bg: rgb(5, 167, 53);
+  $bg1: rgba(5, 167, 54, .15);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
+}
+
+.new-notif.working {
+  $bg: $gray4;
+  $bg1: rgba(128, 128, 128, 0.151);
+  background-image: linear-gradient(275deg, $bg, $bg1 74%);
 }
 </style>

src/components/shared/PlayBtnRect.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="playbtnrect" @click="usePlayFrom(source, useQStore, store)">
+  <button class="playbtnrect shadow-sm" @click="usePlayFrom(source, useQStore, store)">
     <playBtnSvg />
     <div class="text">Play</div>
   </button>