feat: improve toast component

menthorlabs · Oct 14, 2023 · 10f1544 · 10f1544
1 parent 95e7433
commit 10f1544
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
@@ -16,6 +16,7 @@ declare module "vue" {
     $pinia?: string;
     $toastItems: { push: Function };
     $toastError: Function;
+    $toastSuccess: Function;
     $clerk: Clerk;
     $filters: {
       level: Function;

diff --git a/packages/ui/src/atoms/MToastCard.vue b/packages/ui/src/atoms/MToastCard.vue
@@ -29,7 +29,7 @@ closeWhenTimeExpires();
 
 <template>
   <div
-    class="relative w-full rounded-md border border-zinc-200 p-4 text-zinc-700 shadow-sm"
+    class="relative w-full rounded-md p-4 text-white shadow-sm bg-zinc-900"
     :class="[variants[variant]]"
     role="alert"
   >
@@ -38,32 +38,34 @@ closeWhenTimeExpires();
       icon="xmark"
       @click="$emit('close')"
     />
-    <div class="flex items-center">
-      <font-awesome-icon
-        v-if="variant === 'success'"
-        icon="circle-check"
-        class="mr-2 h-[16px] w-[16px] text-green-600"
-      />
-      <font-awesome-icon
-        v-if="variant === 'danger'"
-        icon="circle-xmark"
-        class="mr-2 h-[16px] w-[16px] text-red-600"
-      />
-      <div class="pr-[40px] text-sm font-semibold">{{ title }}</div>
-    </div>
-    <p v-if="description" class="mb-2 mt-2 text-sm font-normal">
-      {{ description }}
-    </p>
-    <div
-      v-if="buttons?.length > 0"
-      class="actions mt-2 flex flex-wrap items-center"
-    >
-      <MButton
-        v-for="button in buttons"
-        :variant="variant"
-        :text="button.text"
-        @click="button.click"
-      />
+    <div class="space-y-2">
+      <div class="flex items-center gap-4">
+        <font-awesome-icon
+          v-if="variant === 'success'"
+          icon="circle-check"
+          class="h-[16px] w-[16px] text-green-600"
+        />
+        <font-awesome-icon
+          v-if="variant === 'danger'"
+          icon="circle-xmark"
+          class="h-[16px] w-[16px] text-red-600"
+        />
+        <div class="pr-[40px] text-sm font-medium flex-1">{{ title }}</div>
+      </div>
+      <p v-if="description" class="text-sm font-normal text-zinc-400">
+        {{ description }}
+      </p>
+      <div
+        v-if="buttons?.length > 0"
+        class="actions flex flex-wrap items-center"
+      >
+        <MButton
+          v-for="button in buttons"
+          :variant="variant"
+          :text="button.text"
+          @click="button.click"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/molecules/MToast.vue b/packages/ui/src/molecules/MToast.vue
@@ -14,7 +14,7 @@ function removeItem(index) {
 <template>
   <TransitionGroup
     tag="div"
-    class="pointer-events-none fixed left-0 top-0 z-50 flex h-screen w-screen flex-col-reverse items-start p-4"
+    class="pointer-events-none fixed left-0 top-0 z-50 flex h-screen w-screen flex-col-reverse items-center p-4"
     name="toast"
   >
     <MToastCard