From 0c1202d89a385611dd93e68a2285339324a413a0 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 13:43:04 -0600
Subject: [PATCH] refactor: add scrollbar styles to dialog components for
 improved usability

---
 src/components/AttendanceDialog.js      |  2 +-
 src/components/CreateMemberDialog.js    |  2 +-
 src/components/ImportMembersDialog.js   |  2 +-
 src/components/Navbar.js                |  2 +-
 src/components/PlanDialog.js            |  2 +-
 src/components/PublicNavbar.js          |  2 +-
 src/components/WordPressImportWizard.js |  2 +-
 src/components/ui/command.jsx           |  2 +-
 src/components/ui/context-menu.jsx      |  2 +-
 src/components/ui/dropdown-menu.jsx     |  2 +-
 src/components/ui/input.jsx             |  2 +-
 src/components/ui/select.jsx            |  2 +-
 src/layouts/AdminLayout.js              |  2 +-
 src/pages/admin/AdminEvents.js          |  6 +++---
 src/pages/admin/AdminRoles.js           | 12 ++++++------
 src/pages/members/MemberCalendar.js     |  2 +-
 src/pages/members/MembersDirectory.js   |  2 +-
 17 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js
index 14afbc4..d950e04 100644
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -55,7 +55,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}
diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index 2476245..c287564 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -119,7 +119,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js
index f015e62..28e8cc7 100644
--- a/src/components/ImportMembersDialog.js
+++ b/src/components/ImportMembersDialog.js
@@ -138,7 +138,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 2431c3b..6614881 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -224,7 +224,7 @@ const Navbar = () => {
             )}
 
             {/* Navigation Links */}
-            <nav className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
               <div className="space-y-2">
                 <Link
                   to="/"
diff --git a/src/components/PlanDialog.js b/src/components/PlanDialog.js
index 3694d02..3736214 100644
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -159,7 +159,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 6c7af8a..132ce49 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -204,7 +204,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto scrollbar-dashboard">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
diff --git a/src/components/WordPressImportWizard.js b/src/components/WordPressImportWizard.js
index 9d0d45a..bb99f72 100644
--- a/src/components/WordPressImportWizard.js
+++ b/src/components/WordPressImportWizard.js
@@ -896,7 +896,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard
diff --git a/src/components/ui/command.jsx b/src/components/ui/command.jsx
index e0eac77..a470ce3 100644
--- a/src/components/ui/command.jsx
+++ b/src/components/ui/command.jsx
@@ -50,7 +50,7 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden", className)}
     {...props} />
 ))
 
diff --git a/src/components/ui/context-menu.jsx b/src/components/ui/context-menu.jsx
index b450396..14f9b46 100644
--- a/src/components/ui/context-menu.jsx
+++ b/src/components/ui/context-menu.jsx
@@ -47,7 +47,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props} />
diff --git a/src/components/ui/dropdown-menu.jsx b/src/components/ui/dropdown-menu.jsx
index f848ec2..4dbb017 100644
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.jsx
@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index 764b48f..0148d4c 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     <input
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
index b1367bf..93913ea 100644
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden scrollbar-dashboard scrollbar-x-dashboard rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/src/layouts/AdminLayout.js b/src/layouts/AdminLayout.js
index a93df83..a57e9d6 100644
--- a/src/layouts/AdminLayout.js
+++ b/src/layouts/AdminLayout.js
@@ -63,7 +63,7 @@ const AdminLayout = ({ children }) => {
       )}
 
       {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
         <div className="max-w-7xl mx-auto px-6 py-8">
           {children}
         </div>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index 2a2df32..a0df97a 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -158,7 +158,7 @@ const AdminEvents = () => {
               </Button>
             </DialogTrigger>
 
-            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
               <DialogHeader>
                 <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple  rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] bg-background focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
+                    className="w-4 h-4 ui-checkbox text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
diff --git a/src/pages/admin/AdminRoles.js b/src/pages/admin/AdminRoles.js
index 658f654..4f5f328 100644
--- a/src/pages/admin/AdminRoles.js
+++ b/src/pages/admin/AdminRoles.js
@@ -184,9 +184,9 @@ const AdminRoles = () => {
   const groupedPermissions = groupPermissionsByModule();
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 ">
       {/* Header */}
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center ">
         <div>
           <h1 className="text-3xl font-bold text-[var(--purple-ink)]">Role Management</h1>
           <p className="text-gray-600 mt-1">
@@ -273,7 +273,7 @@ const AdminRoles = () => {
 
       {/* Create Role Modal */}
       <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
-        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto scrollbar-dashboard scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Create New Role</DialogTitle>
             <DialogDescription>
@@ -317,7 +317,7 @@ const AdminRoles = () => {
               <p className="text-sm text-gray-600 mb-3">
                 Select permissions for this role. You can also add permissions later.
               </p>
-              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto">
+              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto scrollbar-dashboard">
                 {Object.entries(groupedPermissions).map(([module, perms]) => (
                   <div key={module} className="mb-4">
                     <button
@@ -373,7 +373,7 @@ const AdminRoles = () => {
 
       {/* Edit Role Modal */}
       <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
-        <DialogContent>
+        <DialogContent >
           <DialogHeader>
             <DialogTitle>Edit Role</DialogTitle>
             <DialogDescription>
@@ -417,7 +417,7 @@ const AdminRoles = () => {
 
       {/* Manage Permissions Modal */}
       <Dialog open={showPermissionsModal} onOpenChange={setShowPermissionsModal}>
-        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Manage Permissions: {selectedRole?.name}</DialogTitle>
             <DialogDescription>
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js
index 1136be1..9ed6f7b 100644
--- a/src/pages/members/MemberCalendar.js
+++ b/src/pages/members/MemberCalendar.js
@@ -195,7 +195,7 @@ export default function MemberCalendar() {
         </Card>
 
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
             {selectedEvent && (
               <>
                 <DialogHeader>
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index ba24ce9..5d17b86 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -377,7 +377,7 @@ const MembersDirectory = () => {
 
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
-        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>