UI Features & Tips

Using Dark Mode

Step: Toggle Theme

1. Look for the theme toggle button (🌙 icon) in the top navigation bar
2. Click the button to switch between light and dark mode
3. The theme will change immediately

Step: Persistent Theme

1. Your theme preference is saved automatically
2. The next time you log in, your preferred theme will be applied

Collapsing the Sidebar

Step: Hide Sidebar

1. Look for the "Hide Sidebar" button on the left edge of the screen
2. Click the button
3. The sidebar will collapse, giving more space to the main content

Step: Show Sidebar

1. When collapsed, the button will show "Show Sidebar"
2. Click the button to expand the sidebar again

Using Toast Notifications

Understanding Toast Types

1. Success (Green): Action completed successfully
2. Error (Red): Something went wrong
3. Warning (Yellow): Important information or warnings
4. Info (Blue): General information

Behavior

1. Toasts appear in the top-right corner
2. They auto-dismiss after 5 seconds
3. You can click the X to dismiss manually
4. Multiple toasts stack vertically

Keyboard Shortcuts

Navigation

1. Use Tab to navigate between form fields
2. Use Enter to submit forms
3. Use Escape to close modals
4. Use arrow keys in dropdowns

Accessibility

1. All interactive elements are keyboard accessible
2. Screen readers are supported
3. Focus indicators are visible

Responsive Design

Mobile Devices

1. Sidebar collapses automatically on small screens
2. Tables become scrollable horizontally
3. Modals adapt to screen size
4. Touch-friendly button sizes

Tablet Devices

1. Optimized layout for medium screens
2. Sidebar can be toggled
3. Full functionality available

Desktop

1. Full-featured layout
2. Sidebar always visible (unless manually collapsed)
3. Maximum screen real estate usage

---