From 9c0471a10968a54d3d35cd21d5331568eafbf325 Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Thu, 8 May 2025 00:36:17 +0000
Subject: [PATCH] Improve the appearance and functionality of alerts and
 dashboard navigation

Refactors the toast component's styling, updates DashboardLayout link components and exports a standalone toast function in useToast hook.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/f896073f-d218-43ce-a7c7-a9c09756cf37.jpg
---
 .../src/components/layout/DashboardLayout.tsx | 26 +++++++++----------
 client/src/components/ui/toast.tsx            |  2 +-
 client/src/hooks/use-toast.ts                 | 14 ++++++++--
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/client/src/components/layout/DashboardLayout.tsx b/client/src/components/layout/DashboardLayout.tsx
index 7b597a6..d7c3b4f 100644
--- a/client/src/components/layout/DashboardLayout.tsx
+++ b/client/src/components/layout/DashboardLayout.tsx
@@ -43,8 +43,8 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
             <p className="text-muted-foreground mb-4 text-center">
               You don't have permission to access this area. Please contact an administrator if you believe this is an error.
             </p>
-            <Link href="/">
-              <a className="text-primary hover:underline">Return to Home</a>
+            <Link href="/" className="text-primary hover:underline">
+              Return to Home
             </Link>
           </CardContent>
         </Card>
@@ -116,17 +116,17 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
                 {navItems.map((item) => {
                   const isActive = location === item.href;
                   return (
-                    <Link key={item.href} href={item.href}>
-                      <a
-                        className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
-                          isActive 
-                            ? "bg-primary/10 text-primary" 
-                            : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                        }`}
-                      >
-                        {item.icon}
-                        {item.label}
-                      </a>
+                    <Link 
+                      key={item.href} 
+                      href={item.href}
+                      className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
+                        isActive 
+                          ? "bg-primary/10 text-primary" 
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                      }`}
+                    >
+                      {item.icon}
+                      {item.label}
                     </Link>
                   );
                 })}
diff --git a/client/src/components/ui/toast.tsx b/client/src/components/ui/toast.tsx
index d264dd4..8d20652 100644
--- a/client/src/components/ui/toast.tsx
+++ b/client/src/components/ui/toast.tsx
@@ -29,7 +29,7 @@ export function Toast({
     return () => clearTimeout(timer);
   }, [id, onDismiss]);
 
-  const baseClasses = "fixed bottom-4 right-4 rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm";
+  const baseClasses = "rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm";
   const variantClasses = variant === "destructive" 
     ? "bg-red-500 text-white" 
     : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100";
diff --git a/client/src/hooks/use-toast.ts b/client/src/hooks/use-toast.ts
index 8eff2c1..cbfd618 100644
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -3,7 +3,7 @@ import { useState } from "react";
 
 type ToastVariant = "default" | "destructive";
 
-interface ToastOptions {
+export interface ToastOptions {
   title?: string;
   description?: string;
   variant?: ToastVariant;
@@ -12,10 +12,17 @@ interface ToastOptions {
   className?: string;
 }
 
+// Export stand-alone toast function for convenience
+let addToast: (options: ToastOptions) => number = () => 0;
+
+export function toast(options: ToastOptions) {
+  return addToast(options);
+}
+
 export function useToast() {
   const [toasts, setToasts] = useState<ToastOptions[]>([]);
 
-  // Create a function that matches the expected signature in BlogManagement
+  // Create a function that matches the expected signature
   const toast = (options: ToastOptions) => {
     const id = Date.now();
     const newToast = {
@@ -34,6 +41,9 @@ export function useToast() {
     return id;
   };
 
+  // Set the exported toast function to use this implementation
+  addToast = toast;
+
   const dismiss = (id?: number) => {
     if (id) {
       setToasts((prev) => prev.filter((toast) => toast.id !== id));