π¨ Improve Dark Mode Theme Preview Structure
β 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:
parent
c345cffa4f
commit
4ddc23fbfd
@ -351,8 +351,11 @@ const ThemeSettings = () => {
|
||||
defaultValue="dark_mode"
|
||||
defaultChecked
|
||||
/>
|
||||
<label htmlFor="dark_mode" className="checktoggles theme-preview-card">
|
||||
<div onClick={DarkThemes}>
|
||||
<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">
|
||||
@ -377,8 +380,6 @@ const ThemeSettings = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="theme-name">
|
||||
<Moon size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} />
|
||||
Dark Mode
|
||||
|
||||
Loadingβ¦
x
Reference in New Issue
Block a user