Merge pull request #30 from menthorlabs/3-enhance-error-message-display

feat: improve toast component
menthorlabs · Oct 14, 2023 · eb19ed2 · eb19ed2
2 parents 95e7433 + 10f1544
commit eb19ed2
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