apksel-dev/pos-dashboard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Improve Dark Mode Theme Preview Structure

Browse Source 
βœ… Enhanced Dark Mode Preview:
- Restructured dark mode label to match light mode exactly
- Moved onClick handler to label level for better UX
- Removed nested div wrapper for cleaner structure
- Consistent theme-preview-card styling

πŸ”§ Technical Improvements:
- Dark mode preview now has same structure as light mode
- Better click area coverage for theme selection
- Cleaner JSX hierarchy and organization
- Consistent preview card styling across themes

πŸ“‹ Changes Made:
- src/InitialPage/themeSettings.jsx: Restructured dark mode preview
- Moved onClick={DarkThemes} to label element
- Removed unnecessary div wrapper
- Consistent indentation and structure

🎯 Benefits:
- Better visual consistency between light and dark previews
- Improved user interaction with larger click areas
- Cleaner code structure and organization
- Enhanced theme preview experience

πŸš€ Features:
- Both light and dark mode previews now have identical structure
- Consistent theme-preview-card styling
- Better responsive behavior
- Professional preview appearance
This commit is contained in:
tuan.cna 2025-06-02 10:07:52 +07:00
parent c345cffa4f
commit 4ddc23fbfd
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/InitialPage/themeSettings.jsx
View File

@ -351,34 +351,35 @@ const ThemeSettings = () => {
defaultValue="dark_mode"
defaultChecked
/>
<label htmlFor="dark_mode" className="checktoggles theme-preview-card">
<div onClick={DarkThemes}>
{/* Custom Dark Mode Preview */}
<div className="theme-preview dark-preview">
<div className="preview-header">
<div className="preview-dots">
<span className="dot red"></span>
<span className="dot yellow"></span>
<span className="dot green"></span>
</div>
<label
htmlFor="dark_mode"
className="checktoggles theme-preview-card"
onClick={DarkThemes}
>
{/* Custom Dark Mode Preview */}
<div className="theme-preview dark-preview">
<div className="preview-header">
<div className="preview-dots">
<span className="dot red"></span>
<span className="dot yellow"></span>
<span className="dot green"></span>
</div>
<div className="preview-body">
<div className="preview-sidebar dark-sidebar">
<div className="sidebar-item"></div>
<div className="sidebar-item"></div>
<div className="sidebar-item active"></div>
</div>
<div className="preview-content dark-content">
<div className="content-header"></div>
<div className="content-body">
<div className="content-line"></div>
<div className="content-line short"></div>
</div>
</div>
<div className="preview-body">
<div className="preview-sidebar dark-sidebar">
<div className="sidebar-item"></div>
<div className="sidebar-item"></div>
<div className="sidebar-item active"></div>
</div>
<div className="preview-content dark-content">
<div className="content-header"></div>
<div className="content-body">
<div className="content-line"></div>
<div className="content-line short"></div>
</div>
</div>
</div>
</div>
<span className="theme-name">
<Moon size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} />
Dark Mode