- {children}
+
+ {/* Sidebar */}
+
+
+ {/* Mobile sidebar (hidden by default) */}
+
+ {/* We'd implement a mobile menu here */}
+
+
+ {/* Main content */}
+
+ {/* Header */}
+
+
+
+
+ Admin Portal
+
+
+ {/* User menu */}
+
+
+
+
+ {/* Page content */}
+
+ {children}
+
+
);
}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 698d821..7516723 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1227,3 +1227,56 @@ main {
color: #FFFFFF !important;
border: 3px solid #FFFFFF !important;
}
+
+/* ========================================== */
+/* NAVIGATION THEME SELECTOR VISIBILITY */
+/* ========================================== */
+
+/* Main navigation theme selector button visibility */
+.nav-bar button[aria-label*="Theme"],
+.nav-bar #theme-selector-button {
+ color: var(--color-text) !important;
+ background-color: rgba(0, 0, 0, 0.1) !important;
+ border: 1px solid var(--color-border) !important;
+ border-radius: 0.5rem !important;
+}
+
+.nav-bar button[aria-label*="Theme"]:hover,
+.nav-bar #theme-selector-button:hover {
+ background-color: var(--color-bg-secondary) !important;
+ color: var(--color-primary) !important;
+}
+
+/* Scrolled navigation theme selector */
+.nav-bar-scrolled button[aria-label*="Theme"],
+.nav-bar-scrolled #theme-selector-button {
+ background-color: rgba(0, 0, 0, 0.05) !important;
+ border: 1px solid var(--color-border) !important;
+}
+
+/* Dark theme navigation theme selector */
+.dark .nav-bar button[aria-label*="Theme"],
+.dark .nav-bar #theme-selector-button {
+ background-color: rgba(255, 255, 255, 0.15) !important;
+ color: var(--color-text) !important;
+}
+
+.dark .nav-bar button[aria-label*="Theme"]:hover,
+.dark .nav-bar #theme-selector-button:hover {
+ background-color: var(--color-bg-secondary) !important;
+}
+
+/* High contrast theme selectors in navigation */
+.high-contrast-light .nav-bar button[aria-label*="Theme"],
+.high-contrast-light .nav-bar #theme-selector-button {
+ background-color: #000000 !important;
+ color: #FFFFFF !important;
+ border: 3px solid #000000 !important;
+}
+
+.high-contrast-dark .nav-bar button[aria-label*="Theme"],
+.high-contrast-dark .nav-bar #theme-selector-button {
+ background-color: #FFFFFF !important;
+ color: #000000 !important;
+ border: 3px solid #FFFFFF !important;
+}
diff --git a/frontend/src/components/molecules/ThemeSelector.tsx b/frontend/src/components/molecules/ThemeSelector.tsx
index 7806846..b88474d 100644
--- a/frontend/src/components/molecules/ThemeSelector.tsx
+++ b/frontend/src/components/molecules/ThemeSelector.tsx
@@ -75,7 +75,7 @@ const ThemeSelector: React.FC = () => {
aria-expanded={isOpen}
aria-label={`Theme Settings: Currently ${getThemeName(theme)}`}
onClick={() => setIsOpen(!isOpen)}
- className="p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
+ className="p-2 rounded-md text-gray-900 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
>
Theme Settings: Currently {getThemeName(theme)}
diff --git a/frontend/src/hooks/useEvents.ts b/frontend/src/hooks/useEvents.ts
index 09aeb2f..3d81c4b 100644
--- a/frontend/src/hooks/useEvents.ts
+++ b/frontend/src/hooks/useEvents.ts
@@ -58,6 +58,95 @@ export interface UseEventsReturn {
// API base URL
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000/api';
+// Mock data for development (replace with real API calls when backend is ready)
+const mockEvents: Event[] = [
+ {
+ _id: '1',
+ title: 'Monthly Social Meeting',
+ description: 'Join us for our monthly social gathering with games, food, and conversation.',
+ date: '2025-04-15',
+ time: '7:00 PM',
+ location: 'Olathe Community Center',
+ category: 'social',
+ status: 'published',
+ registrationRequired: true,
+ registeredCount: 23,
+ maxAttendees: 50,
+ recurring: true,
+ recurrencePattern: 'monthly',
+ tags: ['social', 'community'],
+ createdAt: '2025-03-01T10:00:00Z',
+ updatedAt: '2025-03-15T14:30:00Z'
+ },
+ {
+ _id: '2',
+ title: 'ASL Workshop for Beginners',
+ description: 'Learn basic ASL signs and conversational skills in this interactive workshop.',
+ date: '2025-04-22',
+ time: '2:00 PM',
+ location: 'OCD Meeting Room',
+ category: 'educational',
+ status: 'published',
+ registrationRequired: true,
+ registeredCount: 15,
+ maxAttendees: 25,
+ recurring: false,
+ tags: ['education', 'ASL', 'workshop'],
+ createdAt: '2025-03-10T09:00:00Z',
+ updatedAt: '2025-03-20T11:15:00Z'
+ },
+ {
+ _id: '3',
+ title: 'Board Meeting',
+ description: 'Monthly board meeting to discuss club business and upcoming events.',
+ date: '2025-05-05',
+ time: '6:00 PM',
+ location: 'Zoom Meeting',
+ category: 'board',
+ status: 'draft',
+ registrationRequired: false,
+ registeredCount: 0,
+ recurring: true,
+ recurrencePattern: 'monthly',
+ tags: ['board', 'official'],
+ createdAt: '2025-04-01T08:00:00Z',
+ updatedAt: '2025-04-01T08:00:00Z'
+ },
+ {
+ _id: '4',
+ title: 'Bowling Tournament',
+ description: 'Annual bowling tournament for all skill levels. Prizes for winners!',
+ date: '2025-05-18',
+ time: '1:00 PM',
+ location: 'Strike Zone Bowling',
+ category: 'athletic',
+ status: 'published',
+ registrationRequired: true,
+ registeredCount: 32,
+ maxAttendees: 40,
+ recurring: false,
+ tags: ['sports', 'competition', 'tournament'],
+ createdAt: '2025-03-05T12:00:00Z',
+ updatedAt: '2025-04-10T16:45:00Z'
+ },
+ {
+ _id: '5',
+ title: 'Deaf Awareness Week Event',
+ description: 'Community outreach event to promote deaf awareness and culture.',
+ date: '2025-09-24',
+ time: '10:00 AM',
+ location: 'Olathe Public Library',
+ category: 'general',
+ status: 'archived',
+ registrationRequired: false,
+ registeredCount: 0,
+ recurring: false,
+ tags: ['awareness', 'community', 'outreach'],
+ createdAt: '2025-08-01T10:00:00Z',
+ updatedAt: '2025-09-30T17:00:00Z'
+ }
+];
+
/**
* Hook for managing events data
*/
@@ -68,12 +157,55 @@ export function useEvents(): UseEventsReturn {
const [pagination, setPagination] = useState
(null);
/**
- * Fetch events with optional filtering
+ * Fetch events with optional filtering (using mock data for development)
*/
const fetchEvents = useCallback(async (filters?: EventFilter) => {
setLoading(true);
setError(null);
+ // For development: Use mock data with filtering instead of API call
+ try {
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 300));
+
+ let filteredEvents = [...mockEvents];
+
+ // Apply filters to mock data
+ if (filters) {
+ if (filters.status && filters.status !== 'all') {
+ filteredEvents = filteredEvents.filter(event => event.status === filters.status);
+ }
+
+ if (filters.category && filters.category !== 'all') {
+ filteredEvents = filteredEvents.filter(event => event.category === filters.category);
+ }
+
+ if (filters.search) {
+ const searchTerm = filters.search.toLowerCase();
+ filteredEvents = filteredEvents.filter(event =>
+ event.title.toLowerCase().includes(searchTerm) ||
+ event.location.toLowerCase().includes(searchTerm) ||
+ event.description.toLowerCase().includes(searchTerm)
+ );
+ }
+ }
+
+ setEvents(filteredEvents);
+ setPagination({
+ total: filteredEvents.length,
+ page: 1,
+ limit: 10,
+ pages: Math.ceil(filteredEvents.length / 10)
+ });
+ } catch (err) {
+ console.error('Error fetching events:', err);
+ setError(err instanceof Error ? err : new Error('Failed to fetch events'));
+ } finally {
+ setLoading(false);
+ }
+
+ // Real API call commented out for development
+ /*
try {
// Build query string from filters
const queryParams = new URLSearchParams();
@@ -94,12 +226,19 @@ export function useEvents(): UseEventsReturn {
} finally {
setLoading(false);
}
+ */
}, []);
/**
- * Get a single event by ID
+ * Get a single event by ID (using mock data for development)
*/
const getEventById = useCallback(async (id: string): Promise => {
+ // For development: Use mock data
+ const event = mockEvents.find(e => e._id === id);
+ return event || null;
+
+ // Real API call commented out for development
+ /*
try {
const response = await axios.get(`${API_URL}/events/${id}`);
return response.data.event;
@@ -107,12 +246,28 @@ export function useEvents(): UseEventsReturn {
console.error(`Error fetching event with ID ${id}:`, err);
return null;
}
+ */
}, []);
/**
- * Create a new event
+ * Create a new event (mock implementation for development)
*/
const createEvent = useCallback(async (eventData: Omit): Promise => {
+ // For development: Mock event creation
+ const newEvent: Event = {
+ ...eventData,
+ _id: Math.random().toString(36).substr(2, 9),
+ createdAt: new Date().toISOString(),
+ updatedAt: new Date().toISOString()
+ };
+
+ // Update local state
+ setEvents(prevEvents => [...prevEvents, newEvent]);
+
+ return newEvent;
+
+ // Real API call commented out for development
+ /*
try {
const response = await axios.post(`${API_URL}/events`, eventData, {
headers: {
@@ -130,12 +285,31 @@ export function useEvents(): UseEventsReturn {
console.error('Error creating event:', err);
return null;
}
- }, [fetchEvents]);
+ */
+ }, []);
/**
- * Update an existing event
+ * Update an existing event (mock implementation for development)
*/
const updateEvent = useCallback(async (id: string, eventData: Partial): Promise => {
+ // For development: Mock event update
+ const updatedEvent = {
+ ...eventData,
+ _id: id,
+ updatedAt: new Date().toISOString()
+ };
+
+ // Update local state
+ setEvents(prevEvents =>
+ prevEvents.map(event =>
+ event._id === id ? { ...event, ...updatedEvent } : event
+ )
+ );
+
+ return updatedEvent as Event;
+
+ // Real API call commented out for development
+ /*
try {
const response = await axios.put(`${API_URL}/events/${id}`, eventData, {
headers: {
@@ -157,12 +331,19 @@ export function useEvents(): UseEventsReturn {
console.error(`Error updating event with ID ${id}:`, err);
return null;
}
+ */
}, []);
/**
- * Delete an event
+ * Delete an event (mock implementation for development)
*/
const deleteEvent = useCallback(async (id: string): Promise => {
+ // For development: Mock event deletion
+ setEvents(prevEvents => prevEvents.filter(event => event._id !== id));
+ return true;
+
+ // Real API call commented out for development
+ /*
try {
await axios.delete(`${API_URL}/events/${id}`, {
headers: {
@@ -179,12 +360,27 @@ export function useEvents(): UseEventsReturn {
console.error(`Error deleting event with ID ${id}:`, err);
return false;
}
+ */
}, []);
/**
- * Register for an event
+ * Register for an event (mock implementation for development)
*/
const registerForEvent = useCallback(async (id: string): Promise => {
+ // For development: Mock registration
+ setEvents(prevEvents =>
+ prevEvents.map(event =>
+ event._id === id
+ ? { ...event, registeredCount: event.registeredCount + 1 }
+ : event
+ )
+ );
+
+ const updatedEvent = mockEvents.find(e => e._id === id);
+ return updatedEvent || null;
+
+ // Real API call commented out for development
+ /*
try {
const response = await axios.post(`${API_URL}/events/${id}/register`, {}, {
headers: {
@@ -206,12 +402,27 @@ export function useEvents(): UseEventsReturn {
console.error(`Error registering for event with ID ${id}:`, err);
return null;
}
+ */
}, []);
/**
- * Cancel registration for an event
+ * Cancel registration for an event (mock implementation for development)
*/
const cancelRegistration = useCallback(async (id: string): Promise => {
+ // For development: Mock registration cancellation
+ setEvents(prevEvents =>
+ prevEvents.map(event =>
+ event._id === id
+ ? { ...event, registeredCount: Math.max(0, event.registeredCount - 1) }
+ : event
+ )
+ );
+
+ const updatedEvent = mockEvents.find(e => e._id === id);
+ return updatedEvent || null;
+
+ // Real API call commented out for development
+ /*
try {
const response = await axios.post(`${API_URL}/events/${id}/cancel-registration`, {}, {
headers: {
@@ -233,12 +444,33 @@ export function useEvents(): UseEventsReturn {
console.error(`Error cancelling registration for event with ID ${id}:`, err);
return null;
}
+ */
}, []);
- // Load events on initial render
+ // Load mock events on initial render (replace with real API when backend is ready)
useEffect(() => {
- fetchEvents();
- }, [fetchEvents]);
+ // For development: Use mock data instead of API call
+ const loadMockData = () => {
+ setLoading(true);
+ setError(null);
+
+ // Simulate API delay
+ setTimeout(() => {
+ setEvents(mockEvents);
+ setPagination({
+ total: mockEvents.length,
+ page: 1,
+ limit: 10,
+ pages: 1
+ });
+ setLoading(false);
+ }, 500);
+ };
+
+ loadMockData();
+ // Comment out real API call for development
+ // fetchEvents();
+ }, []); // Remove fetchEvents dependency to avoid real API calls
return {
events,
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index ec9e89c..6b8f4fd 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -171,6 +171,25 @@
margin-bottom: 1.5rem;
}
+.admin-page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+}
+
+.admin-page-header-title {
+ color: var(--admin-text);
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.admin-page-header-subtitle {
+ color: var(--admin-text-light);
+ font-size: 0.875rem;
+ margin-top: 0.25rem;
+}
+
/* Admin Stat Cards */
.admin-stat-card {
background-color: var(--admin-bg-soft);
@@ -219,6 +238,7 @@
padding: 1.5rem;
box-shadow: var(--shadow-md);
contain: layout style;
+ margin-bottom: 1.5rem;
}
.admin-card-header {
@@ -302,6 +322,26 @@
color: var(--admin-text-muted);
}
+.admin-badge-social {
+ background-color: #dbeafe;
+ color: #1d4ed8;
+}
+
+.admin-badge-educational {
+ background-color: #e9d5ff;
+ color: #7c3aed;
+}
+
+.admin-badge-board {
+ background-color: #fef3c7;
+ color: #d97706;
+}
+
+.admin-badge-athletic {
+ background-color: #e0e7ff;
+ color: #4338ca;
+}
+
/* Dark theme admin badge overrides */
.dark .admin-badge-success {
background-color: #14532d;
@@ -318,6 +358,213 @@
color: #fca5a5;
}
+.dark .admin-badge-social {
+ background-color: #1e3a8a;
+ color: #93c5fd;
+}
+
+.dark .admin-badge-educational {
+ background-color: #581c87;
+ color: #c4b5fd;
+}
+
+.dark .admin-badge-board {
+ background-color: #92400e;
+ color: #fde68a;
+}
+
+.dark .admin-badge-athletic {
+ background-color: #3730a3;
+ color: #a5b4fc;
+}
+
+/* Admin Form Elements */
+.admin-form-label {
+ display: block;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--admin-text);
+ margin-bottom: 0.25rem;
+}
+
+.admin-form-select,
+.admin-form-input {
+ display: block;
+ width: 100%;
+ padding: 0.75rem;
+ background-color: var(--admin-bg);
+ border: 1px solid var(--admin-border);
+ border-radius: 0.375rem;
+ color: var(--admin-text);
+ font-size: 0.875rem;
+ transition: all 0.2s ease;
+}
+
+.admin-form-select:focus,
+.admin-form-input:focus {
+ outline: none;
+ border-color: var(--admin-primary);
+ box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
+}
+
+.admin-form-select:focus-visible,
+.admin-form-input:focus-visible {
+ outline: 2px solid var(--admin-primary);
+ outline-offset: 2px;
+}
+
+/* Admin Button Styles */
+.admin-btn-primary {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ background-color: var(--admin-primary);
+ color: white;
+ border: none;
+ border-radius: 0.375rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-decoration: none;
+}
+
+.admin-btn-primary:hover {
+ background-color: var(--admin-primary-dark);
+ color: white;
+}
+
+.admin-btn-secondary {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ background-color: var(--admin-bg);
+ color: var(--admin-text);
+ border: 1px solid var(--admin-border);
+ border-radius: 0.375rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.admin-btn-secondary:hover {
+ background-color: var(--admin-bg-secondary);
+}
+
+/* Admin Table Styles */
+.admin-table {
+ min-width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+}
+
+.admin-table-header {
+ background-color: var(--admin-bg-secondary);
+}
+
+.admin-table-header-cell {
+ padding: 0.75rem 1.5rem;
+ text-align: left;
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: var(--admin-text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ border-bottom: 1px solid var(--admin-border);
+}
+
+.admin-table-body {
+ background-color: var(--admin-bg);
+}
+
+.admin-table-row {
+ border-bottom: 1px solid var(--admin-border);
+ transition: background-color 0.2s ease;
+}
+
+.admin-table-row:hover {
+ background-color: var(--admin-bg-secondary);
+}
+
+.admin-table-cell {
+ padding: 1rem 1.5rem;
+ white-space: nowrap;
+ color: var(--admin-text);
+ font-size: 0.875rem;
+}
+
+.admin-table-cell-title {
+ font-weight: 500;
+ color: var(--admin-text);
+ margin-bottom: 0.25rem;
+}
+
+.admin-table-cell-subtitle {
+ color: var(--admin-text-light);
+ font-size: 0.75rem;
+}
+
+/* Admin Action Links */
+.admin-action-link {
+ color: var(--admin-primary);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+ margin-right: 0.5rem;
+}
+
+.admin-action-link:hover {
+ color: var(--admin-primary-dark);
+}
+
+.admin-action-link-danger {
+ color: var(--admin-error);
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.admin-action-link-danger:hover {
+ color: #b91c1c;
+}
+
+/* Loading and Error States */
+.admin-loading {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 3rem;
+}
+
+.admin-loading-spinner {
+ width: 2rem;
+ height: 2rem;
+ border: 2px solid var(--admin-border);
+ border-top: 2px solid var(--admin-primary);
+ border-radius: 50%;
+ animation: admin-spin 1s linear infinite;
+}
+
+.admin-loading-text {
+ margin-top: 0.5rem;
+ color: var(--admin-text-muted);
+}
+
+.admin-error-text {
+ color: var(--admin-error);
+}
+
+.admin-empty-text {
+ color: var(--admin-text-muted);
+}
+
+@keyframes admin-spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
/* Admin Quick Actions */
.admin-quick-actions {
display: grid;
@@ -402,6 +649,43 @@
font-weight: 600;
}
+/* High Contrast Form Elements */
+.high-contrast-light .admin-form-select,
+.high-contrast-light .admin-form-input {
+ border: 3px solid var(--color-border);
+ font-weight: 600;
+}
+
+.high-contrast-dark .admin-form-select,
+.high-contrast-dark .admin-form-input {
+ border: 3px solid var(--color-border);
+ font-weight: 600;
+}
+
+.high-contrast-light .admin-btn-primary,
+.high-contrast-dark .admin-btn-primary {
+ border: 3px solid transparent;
+ font-weight: 700;
+}
+
+.high-contrast-light .admin-btn-secondary,
+.high-contrast-dark .admin-btn-secondary {
+ border: 3px solid var(--color-border);
+ font-weight: 700;
+}
+
+.high-contrast-light .admin-table-header-cell,
+.high-contrast-dark .admin-table-header-cell {
+ font-weight: 700;
+ border-bottom: 3px solid var(--color-border);
+}
+
+.high-contrast-light .admin-table-cell,
+.high-contrast-dark .admin-table-cell {
+ font-weight: 600;
+ border-bottom: 2px solid var(--color-border);
+}
+
/* High Contrast Focus Indicators for Admin */
.high-contrast-light .admin-nav-item:focus-visible,
.high-contrast-dark .admin-nav-item:focus-visible {
@@ -415,20 +699,6 @@
outline-offset: 2px;
}
-/* Admin Responsive Design */
-@media (max-width: 768px) {
- .admin-stat-card {
- padding: 1rem;
- }
-
- .admin-main {
- padding: 1rem;
- }
-
- .admin-card {
- padding: 1rem;
- }
-}
/* ========================================== */
/* HIGH CONTRAST ADMIN THEME IMPLEMENTATION */
/* Following CSS Variable Strategy Guidelines */
@@ -599,3 +869,67 @@ html.high-contrast-dark body .admin-sidebar .admin-nav .admin-nav-item.admin-nav
border-left: 10px solid #FFD700 !important;
font-weight: 900 !important;
}
+
+/* Admin Header Theme Selector - Ensure visibility in all themes */
+.admin-header .relative button,
+.admin-header #theme-selector-button {
+ color: var(--admin-text) !important;
+ background-color: rgba(0, 0, 0, 0.05) !important;
+ border: 1px solid var(--admin-border) !important;
+}
+
+.admin-header .relative button:hover,
+.admin-header #theme-selector-button:hover {
+ background-color: var(--admin-bg-secondary) !important;
+ color: var(--admin-text) !important;
+}
+
+/* Dark theme header theme selector */
+.dark .admin-header .relative button,
+.dark .admin-header #theme-selector-button {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ color: var(--admin-text) !important;
+}
+
+.dark .admin-header .relative button:hover,
+.dark .admin-header #theme-selector-button:hover {
+ background-color: var(--admin-bg-secondary) !important;
+}
+
+/* High contrast theme selector visibility */
+.high-contrast-light .admin-header .relative button,
+.high-contrast-light .admin-header #theme-selector-button {
+ background-color: #000000 !important;
+ color: #FFFFFF !important;
+ border: 3px solid #000000 !important;
+}
+
+.high-contrast-dark .admin-header .relative button,
+.high-contrast-dark .admin-header #theme-selector-button {
+ background-color: #FFFFFF !important;
+ color: #000000 !important;
+ border: 3px solid #FFFFFF !important;
+}
+
+/* Admin Responsive Design */
+@media (max-width: 768px) {
+ .admin-stat-card {
+ padding: 1rem;
+ }
+
+ .admin-main {
+ padding: 1rem;
+ }
+
+ .admin-card {
+ padding: 1rem;
+ }
+
+ .admin-table-cell {
+ padding: 0.75rem;
+ }
+
+ .admin-table-header-cell {
+ padding: 0.75rem;
+ }
+}