fix: toaster for forgot password - [CU-869bgeuuw]

app/assets/css/main.css

@@ -23,13 +23,10 @@
   --dialog-backdrop: rgba(91, 112, 131, 0.4);
   --input-autofill: #e8f0fe;
   --oauth: #ffffff;
-  --toaster-bg-success: #dcfce7;
-  --toaster-text-success: #166534;
-  --toaster-bg-error: #fee2e2;
-  --toaster-text-error: #991b1b;
-  --toaster-bg-warning: #fef9c3;
-  --toaster-text-warning: #92400e;
-  --toaster-bg-info: #dbeafe;
+  --toaster-bg: #ffffff;
+  --toaster-text-success: #1cb356;
+  --toaster-text-error: #c22828;
+  --toaster-text-warning: #caa016;
   --toaster-text-info: #1e3a8a;
   --radius: 0.625rem;
   --card: oklch(1 0 0);
@@ -74,14 +71,11 @@
   --popover-foreground: #e7e9ea;
   --input-autofill: #202939;
   --oauth: #ffffff;
-  --toaster-bg-success: #064e3b;
-  --toaster-text-success: #86efac;
-  --toaster-bg-error: #7f1d1d;
-  --toaster-text-error: #fecaca;
-  --toaster-bg-warning: #78350f;
+  --toaster-bg: #111111;
+  --toaster-text-success: #18f16b;
+  --toaster-text-error: #ff5252;
   --toaster-text-warning: #fcd34d;
-  --toaster-bg-info: #1e3a8a;
-  --toaster-text-info: #bfdbfe;
+  --toaster-text-info: #4197ff;
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
   --primary-foreground: oklch(0.205 0 0);
@@ -199,4 +193,95 @@
     outline: none !important;
     box-shadow: none !important;
   }
+
+  [data-sonner-toast] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    padding: 14px 18px;
+    border-radius: 8px;
+
+    background: var(--toaster-bg);
+
+    color: var(--foreground);
+    font-size: 14px;
+    font-weight: 500;
+
+    box-shadow:
+      0 20px 25px -5px rgb(0 0 0 / 0.15),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+
+    animation: toast-slide-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    @apply border-border border-1 shadow-lg;
+  }
+
+  /* Left accent bar */
+  [data-sonner-toast]::before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 6px;
+    bottom: 6px;
+    width: 4px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.9;
+  }
+  /* Toast types */
+  [data-sonner-toast][data-type='success'] {
+    color: var(--toaster-text-success);
+    box-shadow:
+      0 2px 3px -2px var(--toaster-text-success),
+      0 2px 3px -2px var(--toaster-text-success);
+  }
+
+  [data-sonner-toast][data-type='error'] {
+    color: var(--toaster-text-error);
+    box-shadow:
+      0 2px 3px -2px var(--toaster-text-error),
+      0 2px 3px -2px var(--toaster-text-error);
+  }
+
+  [data-sonner-toast][data-type='warning'] {
+    color: var(--toaster-text-warning);
+    box-shadow:
+      0 2px 3px -2px var(--toaster-text-warning),
+      0 2px 3px -1px var(--toaster-text-warning);
+  }
+
+  [data-sonner-toast][data-type='info'] {
+    color: var(--toaster-text-info);
+    box-shadow:
+      0 2px 3px -2px var(--toaster-text-info),
+      0 2px 3px -2px var(--toaster-text-info);
+  }
+
+  /* Close button */
+  [data-sonner-close-button] {
+    opacity: 0.5;
+    transition: opacity 120ms ease;
+  }
+
+  [data-sonner-close-button]:hover {
+    opacity: 1;
+  }
+
+  /* Animation */
+  @keyframes toast-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
 }

app/components/ui/Toaster.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { Toaster as Sonner } from 'vue-sonner';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/utils';
 
 const toasterVariants = cva(
-  'toaster fixed z-[9999] flex flex-col gap-3 p-4 md:p-6 rounded-lg max-w-xs w-auto m-4',
+  'toaster group fixed z-[9999] flex flex-col gap-2 p-4 max-w-sm w-full',
   {
     variants: {
       position: {
-        'top-left': 'top-0 left-0',
-        'top-center': 'top-0 left-1/2 -translate-x-1/2',
-        'top-right': 'top-0 right-0',
-        'bottom-left': 'bottom-0 left-0',
-        'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-        'bottom-right': 'bottom-0 right-0',
+        'top-left': 'top-4 left-4',
+        'top-center': 'top-4 left-1/2 -translate-x-1/2',
+        'top-right': 'top-4 right-4',
+        'bottom-left': 'bottom-4 left-4',
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+        'bottom-right': 'bottom-4 right-4',
       },
     },
     defaultVariants: {
@@ -22,15 +22,9 @@ const toasterVariants = cva(
   },
 );
 
-interface Props {
-  position?: NonNullable<Parameters<typeof toasterVariants>[0]>['position'];
-}
-
-withDefaults(defineProps<Props>(), {
-  position: 'bottom-right',
-});
+defineProps<{ position?: keyof (typeof toasterVariants)['variants']['position'] }>();
 </script>
 
 <template>
-  <Sonner :class="cn(toasterVariants({ position }))" />
+  <Sonner :class="cn(toasterVariants({ position }))" rich-colors close-button />
 </template>

app/pages/playground/toaster.vue

@@ -1,40 +1,27 @@
 <script setup lang="ts">
 import { showToaster } from '@/utils/showToaster';
 
-function showToasts(error: string) {
-  switch (error) {
-    case 'error':
-      showToaster('error', 'toaster.login.error', true);
-      break;
-    case 'success':
-      showToaster('success', 'toaster.login.success', true);
-      break;
-    case 'warning':
-      showToaster('warning', 'toaster.login.success');
-      break;
-    case 'info':
-      showToaster('info', 'toaster.login.success');
-      break;
-    default:
-      showToaster('info', 'toaster.login.error');
-      break;
-  }
+function showToasts(type: 'error' | 'success' | 'warning' | 'info') {
+  showToaster(type, `toaster.login.${type}`, true);
 }
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center py-20">
-    <UiButton class="my-3 w-75" variant="default" type="button" @click="showToasts('error')">{{
-      $t('error')
-    }}</UiButton>
-    <UiButton class="my-3 w-75" variant="default" type="button" @click="showToasts('success')">{{
-      $t('success')
-    }}</UiButton>
-    <UiButton class="my-3 w-75" variant="default" type="button" @click="showToasts('warning')">{{
-      $t('warning')
-    }}</UiButton>
-    <UiButton class="my-3 w-75" variant="default" type="button" @click="showToasts('info')">{{
-      $t('info')
-    }}</UiButton>
+  <div class="flex flex-col items-center justify-center gap-3 py-20">
+    <UiButton class="w-75" @click="showToasts('error')">
+      {{ $t('error') }}
+    </UiButton>
+
+    <UiButton class="w-75" @click="showToasts('success')">
+      {{ $t('success') }}
+    </UiButton>
+
+    <UiButton class="w-75" @click="showToasts('warning')">
+      {{ $t('warning') }}
+    </UiButton>
+
+    <UiButton class="w-75" @click="showToasts('info')">
+      {{ $t('info') }}
+    </UiButton>
   </div>
 </template>

app/stores/auth/password.ts

@@ -58,10 +58,10 @@ export const usePasswordStore = defineStore('password', () => {
           const errorCode = error.data?.data?.error?.code;
           return [{ field: 'identifier', code: errorCode }];
         } else if (error.data?.statusCode === 429) {
-          showToaster('error', 'toaster.checkUser.rateLimit');
+          showToaster('error', 'toaster.checkUser.rateLimit', true);
         }
       } else {
-        showToaster('error', 'toaster.checkUser.error');
+        showToaster('error', 'toaster.checkUser.error', true);
       }
     } finally {
       loading.value = false;
@@ -82,7 +82,7 @@ export const usePasswordStore = defineStore('password', () => {
         const errors = error.data?.data?.error.errors;
         return errors;
       } else {
-        showToaster('error', 'toaster.verifyUser.error');
+        showToaster('error', 'toaster.verifyUser.error', true);
       }
     } finally {
       loading.value = false;
@@ -93,17 +93,17 @@ export const usePasswordStore = defineStore('password', () => {
     try {
       await passwordService.resendOtp(confirmationToken.value);
       step.value = 1;
-      showToaster('success', 'toaster.resendOtp.success');
+      showToaster('success', 'toaster.resendOtp.success', true);
     } catch (error) {
       if (isApiError(error) && error.status === 429) {
         const apiError = error.data?.data;
-        showToaster('error', apiError?.message || 'toaster.resendOtp.rateLimit');
+        showToaster('error', apiError?.message || 'toaster.resendOtp.rateLimit', true);
         const { retryAfter } = apiError?.error as unknown as { retryAfter: number };
         if (retryAfter) {
           return retryAfter;
         }
       } else {
-        showToaster('error', 'toaster.resendOtp.error');
+        showToaster('error', 'toaster.resendOtp.error', true);
       }
     }
   };
@@ -118,14 +118,14 @@ export const usePasswordStore = defineStore('password', () => {
       await passwordService.resetPassword(data);
       resetData();
       open.value = false;
-      showToaster('success', 'toaster.resetPassword.success');
+      showToaster('success', 'toaster.resetPassword.success', true);
       router.push('/home');
     } catch (error) {
       if (isApiValidationError(error)) {
         const errors = error.data?.data?.error.errors;
         return errors;
       } else {
-        showToaster('error', 'toaster.resetPassword.error');
+        showToaster('error', 'toaster.resetPassword.error', true);
       }
     } finally {
       loading.value = false;

app/utils/showToaster.ts

@@ -1,43 +1,13 @@
 import { toast } from 'vue-sonner';
 import { useNuxtApp } from '#app';
 
-const typeConfig = {
-  success: {
-    icon: '✔️',
-    bg: 'var(--toaster-bg-success)',
-    color: 'var(--toaster-text-success)',
-  },
-  error: {
-    icon: '❌',
-    bg: 'var(--toaster-bg-error)',
-    color: 'var(--toaster-text-error)',
-  },
-  warning: {
-    icon: '⚠️',
-    bg: 'var(--toaster-bg-warning)',
-    color: 'var(--toaster-text-warning)',
-  },
-  info: {
-    icon: 'ℹ️',
-    bg: 'var(--toaster-bg-info)',
-    color: 'var(--toaster-text-info)',
-  },
-} as const;
-
-type ToastType = keyof typeof typeConfig;
-
-export function showToaster(type: ToastType, message: string, translate: boolean = false) {
-  const { icon, bg, color } = typeConfig[type];
+export function showToaster(
+  type: 'success' | 'error' | 'warning' | 'info',
+  message: string,
+  translate = false,
+) {
   const { $i18n } = useNuxtApp();
+  const text = translate ? $i18n.t(message) : message;
 
-  const translatedMessage = translate ? $i18n.t(message) : message;
-
-  toast(`${icon} ${translatedMessage}`, {
-    style: {
-      background: bg,
-      color: color,
-      padding: '10px 14px',
-      borderRadius: '20px',
-    },
-  });
+  toast[type](text);
 }