andika/membership-fe
3
1
Fork 1
Code Issues 20 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add scrollbar styles to dialog components for improved usability

Browse Source
This commit is contained in:
kayela
2026-01-14 13:43:04 -06:00
parent 0ebfe71361
commit 0c1202d89a
17 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/admin/AdminEvents.js
View File

@@ -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)

12
src/pages/admin/AdminRoles.js
View File

@@ -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>

2
src/pages/members/MemberCalendar.js
View File

@@ -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>

2
src/pages/members/MembersDirectory.js
View File

@@ -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>