From 72fc9d5c8dec161e8a08c3ecdf5d0924677f98df Mon Sep 17 00:00:00 2001
From: Zakariye Mohamed <168684030+zakiscoding@users.noreply.github.com>
Date: Thu, 23 Apr 2026 17:07:44 -0400
Subject: [PATCH] chore: remove role switcher and switches

Remove the demo role switcher button and replace profile toggle switches with simple On/Off buttons.

Made-with: Cursor
---
 app/components/RoleSwitcher.tsx | 21 ---------------------
 app/layout.tsx                  |  2 --
 app/profile/page.tsx            | 28 +++++++++++++++++-----------
 3 files changed, 17 insertions(+), 34 deletions(-)
 delete mode 100644 app/components/RoleSwitcher.tsx

diff --git a/app/components/RoleSwitcher.tsx b/app/components/RoleSwitcher.tsx
deleted file mode 100644
index fc5fb44..0000000
--- a/app/components/RoleSwitcher.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import { useAuth } from "../context/AuthContext";
-
-export default function RoleSwitcher() {
-  const { user, toggleRole } = useAuth();
-
-  if (!user) return null;
-
-  return (
-    <div className="fixed bottom-24 left-4 z-40 md:bottom-6 md:left-6">
-      <button
-        onClick={toggleRole}
-        className="flex items-center gap-2 rounded-full border border-orange-200 bg-gradient-to-r from-orange-500 to-red-600 px-4 py-2 text-sm font-bold text-white shadow-2xl backdrop-blur-md transition-all hover:scale-105 hover:shadow-orange-500/30 dark:border-orange-700"
-      >
-        <span className="text-lg">{user.role === "customer" ? "🚲" : "🛍️"}</span>
-        Switch to {user.role === "customer" ? "Driver" : "Customer"}
-      </button>
-    </div>
-  );
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index be10760..7ec56a1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,6 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { CartProvider } from "./context/CartContext";
 import { AuthProvider } from "./context/AuthContext";
 import { ThemeProvider } from "./context/ThemeContext";
-import RoleSwitcher from "./components/RoleSwitcher";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -35,7 +34,6 @@ export default function RootLayout({
           <AuthProvider>
             <CartProvider>
               {children}
-              <RoleSwitcher />
             </CartProvider>
           </AuthProvider>
         </ThemeProvider>
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 0225385..e69004f 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "@/app/context/AuthContext";
 import { useState, useEffect } from "react";
 import { useTheme } from "@/app/context/ThemeContext";
-import { Switch } from "@/components/ui/switch";
 
 export default function ProfilePage() {
   const router = useRouter();
@@ -197,11 +196,13 @@ export default function ProfilePage() {
                   <span className="text-lg">🌙</span>
                   <span className="font-medium">Dark Mode</span>
                 </div>
-                <Switch
-                  checked={theme === "dark"}
-                  onCheckedChange={() => toggleTheme()}
+                <button
+                  onClick={toggleTheme}
+                  className="rounded-lg border border-stone-200 dark:border-stone-700 px-3 py-1.5 text-xs font-bold hover:bg-stone-50 dark:hover:bg-stone-700/40 transition-colors"
                   aria-label="Toggle dark mode"
-                />
+                >
+                  {theme === "dark" ? "On" : "Off"}
+                </button>
               </div>
             )}
             <div className="flex items-center justify-between p-3 rounded-lg border border-stone-200 dark:border-stone-700">
@@ -209,14 +210,19 @@ export default function ProfilePage() {
                 <span className="text-lg">🔔</span>
                 <span className="font-medium">Notifications</span>
               </div>
-              <Switch
-                checked={notificationsEnabled}
-                onCheckedChange={(checked) => {
-                  setNotificationsEnabled(checked);
-                  localStorage.setItem("quickbite_notifications_enabled", String(checked));
+              <button
+                onClick={() => {
+                  setNotificationsEnabled((prev) => {
+                    const next = !prev;
+                    localStorage.setItem("quickbite_notifications_enabled", String(next));
+                    return next;
+                  });
                 }}
+                className="rounded-lg border border-stone-200 dark:border-stone-700 px-3 py-1.5 text-xs font-bold hover:bg-stone-50 dark:hover:bg-stone-700/40 transition-colors"
                 aria-label="Toggle notifications"
-              />
+              >
+                {notificationsEnabled ? "On" : "Off"}
+              </button>
             </div>
           </div>
         </div>