Add COSS toast notifications and swap in the new logo

Wire COSS's (Base UI) Sonner-style stacked toast into the app:

- Install @coss/toast (components/ui/toast.tsx) and mount <ToastProvider> in
  the root layout; add a small notify.{success,error,info,warning} helper
  (lib/toast.ts) over toastManager so callers don't repeat the toast shape.
- Toast on the events requested: clinic created (onboarding), auth actions
  (sign in / sign up / sign out / password reset request + reset), patient
  saved (create/edit), and all failure branches as error toasts (kept inline
  errors as a fallback). New auth toast strings added to the en translation.
- Replace the logo everywhere: overwrite public/temetro-logo.png with the new
  1024² square mark (same aspect ratio as the old 500², so existing 32×32
  next/image usages stay undistorted; no reference changes needed).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-06-04 18:58:04 +03:00
parent 415961ab52
commit 2c5624e049
13 changed files with 435 additions and 13 deletions
+45 -1
View File
@@ -59,7 +59,51 @@
background-position: -200% 0;
}
}
}
--animate-toast-success-odd: toast-success-odd 0.32s cubic-bezier(0.5, 1, 0.89, 1);
--animate-toast-success-even: toast-success-even 0.32s cubic-bezier(0.5, 1, 0.89, 1);
--animate-toast-error-odd: toast-error-odd 0.28s cubic-bezier(0.5, 1, 0.89, 1);
--animate-toast-error-even: toast-error-even 0.28s cubic-bezier(0.5, 1, 0.89, 1)
;
@keyframes toast-success-odd {
0% {
scale: 1;}
30% {
scale: 1.025;}
60% {
scale: 0.99;}
100% {
scale: 1;}}
@keyframes toast-error-odd {
0% {
translate: 0 0;}
25% {
translate: -3px 0;}
50% {
translate: 3px 0;}
75% {
translate: -3px 0;}
100% {
translate: 0 0;}}
@keyframes toast-success-even {
0% {
scale: 1;}
30% {
scale: 1.025;}
60% {
scale: 0.99;}
100% {
scale: 1;}}
@keyframes toast-error-even {
0% {
translate: 0 0;}
25% {
translate: -3px 0;}
50% {
translate: 3px 0;}
75% {
translate: -3px 0;}
100% {
translate: 0 0;}}}
:root {
--card: var(--color-white);