From 4ddc23fbfdda5dda32a569ee72ee80cebccf6fd6 Mon Sep 17 00:00:00 2001
From: "tuan.cna" <tuan.cna@ots/vn>
Date: Mon, 2 Jun 2025 10:07:52 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20Dark=20Mode=20Theme=20?=
 =?UTF-8?q?Preview=20Structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ 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
---
 src/InitialPage/themeSettings.jsx | 47 ++++++++++++++++---------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/InitialPage/themeSettings.jsx b/src/InitialPage/themeSettings.jsx
index f5f95e0..5f1c45b 100644
--- a/src/InitialPage/themeSettings.jsx
+++ b/src/InitialPage/themeSettings.jsx
@@ -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