From 39d68ee143c35babbe4a4e6379d5fe04a3ed159a Mon Sep 17 00:00:00 2001
From: "tuan.cna" <tuan.cna@ots/vn>
Date: Mon, 2 Jun 2025 09:41:52 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20JSX=20Structure=20-=20Remo?=
 =?UTF-8?q?ve=20Nested=20Forms=20and=20Fix=20Closing=20Tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Fixed JSX Structure Issues:
- Removed nested form tags that caused parsing errors
- Fixed missing closing div tags after Direction section removal
- Proper JSX hierarchy maintained throughout component
- No more Babel parsing errors

🔧 Technical Fixes:
- Removed duplicate form wrapper around Navigation Colors
- Fixed theme-mode div structure and nesting
- Proper closing tags for all JSX elements
- Clean component structure without syntax errors

📋 Changes Made:
- src/InitialPage/themeSettings.jsx: Fixed JSX structure
- Removed nested <form> tags
- Fixed div closing tags hierarchy
- Maintained all functionality while fixing structure

🎯 Benefits:
- No more build errors or parsing issues
- Clean JSX structure following React best practices
- Proper component hierarchy
- All theme customizer features still working

🚀 Maintained Features:
- Theme Mode selection (Dark/Light)
- Layout Mode options (Default, Box, Collapsed, etc.)
- Navigation Color options (Light, Grey, Dark)
- All click handlers and functionality preserved
- Reset and Buy Now buttons working
---
 src/InitialPage/themeSettings.jsx | 447 +++++++++++++++---------------
 1 file changed, 223 insertions(+), 224 deletions(-)

diff --git a/src/InitialPage/themeSettings.jsx b/src/InitialPage/themeSettings.jsx
index 7215f55..66a117c 100644
--- a/src/InitialPage/themeSettings.jsx
+++ b/src/InitialPage/themeSettings.jsx
@@ -389,246 +389,245 @@ const ThemeSettings = () => {
                       </div>
                     </div>
                   </div>
+                </div>
 
-                    <div className="theme-mode border-0 mb-0">
-                      <div className="theme-head">
-                        <h6><Layout size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Layout Mode</h6>
-                        <p>Select the primary layout style for your app.</p>
+                <div className="theme-mode border-0 mb-0">
+                  <div className="theme-head">
+                    <h6><Layout size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Layout Mode</h6>
+                    <p>Select the primary layout style for your app.</p>
+                  </div>
+                  <div className="row">
+                    <div className="col-xl-6 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div
+                            className="status-toggle d-flex align-items-center me-2"
+                            onClick={DefaultStyle}
+                          >
+                            <input
+                              type="radio"
+                              name="layout"
+                              id="default_layout"
+                              className="check layout-mode"
+                              defaultValue="default"
+                              defaultChecked
+                            />
+                            <label
+                              htmlFor="default_layout"
+                              className="checktoggles"
+                            >
+                              <ImageWithBasePath
+                                src="assets/img/theme/theme-img-01.jpg"
+                                alt="img"
+                              />
+                              <span className="theme-name">Default</span>
+                            </label>
+                          </div>
+                        </div>
                       </div>
-                      <div className="row">
-                        <div className="col-xl-6 ere">
-                          <div className="layout-wrap">
-                            <div className="d-flex align-items-center">
-                              <div
-                                className="status-toggle d-flex align-items-center me-2"
-                                onClick={DefaultStyle}
-                              >
-                                <input
-                                  type="radio"
-                                  name="layout"
-                                  id="default_layout"
-                                  className="check layout-mode"
-                                  defaultValue="default"
-                                  defaultChecked
-                                />
-                                <label
-                                  htmlFor="default_layout"
-                                  className="checktoggles"
-                                >
-                                  <ImageWithBasePath
-                                    src="assets/img/theme/theme-img-01.jpg"
-                                    alt="img"
-                                  />
-                                  <span className="theme-name">Default</span>
-                                </label>
-                              </div>
-                            </div>
+                    </div>
+                    <div className="col-xl-6 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div
+                            className="status-toggle d-flex align-items-center me-2"
+                            onClick={LayoutBox}
+                          >
+                            <input
+                              type="radio"
+                              name="layout"
+                              id="box_layout"
+                              className="check layout-mode"
+                              defaultValue="box"
+                            />
+                            <label
+                              htmlFor="box_layout"
+                              className="checktoggles"
+                            >
+                              <ImageWithBasePath
+                                src="assets/img/theme/theme-img-07.jpg"
+                                alt="img"
+                              />
+                              <span className="theme-name">Box</span>
+                            </label>
                           </div>
                         </div>
-                        <div className="col-xl-6 ere">
-                          <div className="layout-wrap">
-                            <div className="d-flex align-items-center">
-                              <div
-                                className="status-toggle d-flex align-items-center me-2"
-                                onClick={LayoutBox}
-                              >
-                                <input
-                                  type="radio"
-                                  name="layout"
-                                  id="box_layout"
-                                  className="check layout-mode"
-                                  defaultValue="box"
-                                />
-                                <label
-                                  htmlFor="box_layout"
-                                  className="checktoggles"
-                                >
-                                  <ImageWithBasePath
-                                    src="assets/img/theme/theme-img-07.jpg"
-                                    alt="img"
-                                  />
-                                  <span className="theme-name">Box</span>
-                                </label>
-                              </div>
-                            </div>
+                      </div>
+                    </div>
+                    <div className="col-xl-6 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div
+                            className="status-toggle d-flex align-items-center me-2"
+                            onClick={collapsedLayout}
+                          >
+                            <input
+                              type="radio"
+                              name="layout"
+                              id="collapse_layout"
+                              className="check layout-mode"
+                              defaultValue="collapsed"
+                            />
+                            <label
+                              htmlFor="collapse_layout"
+                              className="checktoggles"
+                            >
+                              <ImageWithBasePath
+                                src="assets/img/theme/theme-img-05.jpg"
+                                alt="img"
+                              />
+                              <span className="theme-name">Collapsed</span>
+                            </label>
                           </div>
                         </div>
-                        <div className="col-xl-6 ere">
-                          <div className="layout-wrap">
-                            <div className="d-flex align-items-center">
-                              <div
-                                className="status-toggle d-flex align-items-center me-2"
-                                onClick={collapsedLayout}
-                              >
-                                <input
-                                  type="radio"
-                                  name="layout"
-                                  id="collapse_layout"
-                                  className="check layout-mode"
-                                  defaultValue="collapsed"
-                                />
-                                <label
-                                  htmlFor="collapse_layout"
-                                  className="checktoggles"
-                                >
-                                  <ImageWithBasePath
-                                    src="assets/img/theme/theme-img-05.jpg"
-                                    alt="img"
-                                  />
-                                  <span className="theme-name">Collapsed</span>
-                                </label>
-                              </div>
-                            </div>
+                      </div>
+                    </div>
+                    <div className="col-xl-6 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div
+                            className="status-toggle d-flex align-items-center me-2"
+                            onClick={HorizontalLayout}
+                          >
+                            <input
+                              type="radio"
+                              name="layout"
+                              id="horizontal_layout"
+                              className="check layout-mode"
+                              defaultValue="horizontal"
+                            />
+                            <label
+                              htmlFor="horizontal_layout"
+                              className="checktoggles"
+                            >
+                              <ImageWithBasePath
+                                src="assets/img/theme/theme-img-06.jpg"
+                                alt
+                              />
+                              <span className="theme-name">Horizontal</span>
+                            </label>
                           </div>
                         </div>
-                        <div className="col-xl-6 ere">
-                          <div className="layout-wrap">
-                            <div className="d-flex align-items-center">
-                              <div
-                                className="status-toggle d-flex align-items-center me-2"
-                                onClick={HorizontalLayout}
-                              >
-                                <input
-                                  type="radio"
-                                  name="layout"
-                                  id="horizontal_layout"
-                                  className="check layout-mode"
-                                  defaultValue="horizontal"
-                                />
-                                <label
-                                  htmlFor="horizontal_layout"
-                                  className="checktoggles"
-                                >
-                                  <ImageWithBasePath
-                                    src="assets/img/theme/theme-img-06.jpg"
-                                    alt
-                                  />
-                                  <span className="theme-name">Horizontal</span>
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="col-xl-6 ere">
-                          <div className="layout-wrap">
-                            <div className="d-flex align-items-center">
-                              <div
-                                className="status-toggle d-flex align-items-center me-2"
-                                onClick={modernLayout}
-                              >
-                                <input
-                                  type="radio"
-                                  name="layout"
-                                  id="modern_layout"
-                                  className="check layout-mode"
-                                  defaultValue="modern"
-                                />
-                                <label
-                                  htmlFor="modern_layout"
-                                  className="checktoggles"
-                                >
-                                  <ImageWithBasePath
-                                    src="assets/img/theme/theme-img-04.jpg"
-                                    alt
-                                  />
-                                  <span className="theme-name">Modern</span>
-                                </label>
-                              </div>
-                            </div>
+                      </div>
+                    </div>
+                    <div className="col-xl-6 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div
+                            className="status-toggle d-flex align-items-center me-2"
+                            onClick={modernLayout}
+                          >
+                            <input
+                              type="radio"
+                              name="layout"
+                              id="modern_layout"
+                              className="check layout-mode"
+                              defaultValue="modern"
+                            />
+                            <label
+                              htmlFor="modern_layout"
+                              className="checktoggles"
+                            >
+                              <ImageWithBasePath
+                                src="assets/img/theme/theme-img-04.jpg"
+                                alt
+                              />
+                              <span className="theme-name">Modern</span>
+                            </label>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                    <form id="nav_color" method="post">
-                      <div className="theme-mode">
-                        <div className="theme-head">
-                          <h6>Navigation Colors</h6>
-                          <p>Setup the color for the Navigation</p>
-                        </div>
-                        <div className="row">
-                          <div className="col-xl-4 ere">
-                            <div className="layout-wrap">
-                              <div className="d-flex align-items-center">
-                                <div className="status-toggle d-flex align-items-center me-2">
-                                  <input
-                                    type="radio"
-                                    name="nav_color"
-                                    id="light_color"
-                                    className="check nav-color"
-                                    defaultValue="light"
-                                    defaultChecked
-                                  />
-                                  <label
-                                    htmlFor="light_color"
-                                    className="checktoggles"
-                                  >
-                                    <span
-                                      className="theme-name"
-                                      onClick={LayoutLight}
-                                    >
-                                      Light
-                                    </span>
-                                  </label>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div className="col-xl-4 ere">
-                            <div className="layout-wrap">
-                              <div className="d-flex align-items-center">
-                                <div className="status-toggle d-flex align-items-center me-2">
-                                  <input
-                                    type="radio"
-                                    name="nav_color"
-                                    id="grey_color"
-                                    className="check nav-color"
-                                    defaultValue="grey"
-                                  />
-                                  <label
-                                    htmlFor="grey_color"
-                                    className="checktoggles"
-                                  >
-                                    <span
-                                      className="theme-name"
-                                      onClick={LayoutGrey}
-                                    >
-                                      Grey
-                                    </span>
-                                  </label>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div className="col-xl-4 ere">
-                            <div className="layout-wrap">
-                              <div className="d-flex align-items-center">
-                                <div className="status-toggle d-flex align-items-center me-2">
-                                  <input
-                                    type="radio"
-                                    name="nav_color"
-                                    id="dark_color"
-                                    className="check nav-color"
-                                    defaultValue="dark"
-                                  />
-                                  <label
-                                    htmlFor="dark_color"
-                                    className="checktoggles"
-                                  >
-                                    <span
-                                      className="theme-name"
-                                      onClick={LayoutDark}
-                                    >
-                                      Dark
-                                    </span>
-                                  </label>
-                                </div>
-                              </div>
-                            </div>
+                </div>
+
+                <div className="theme-mode">
+                  <div className="theme-head">
+                    <h6>Navigation Colors</h6>
+                    <p>Setup the color for the Navigation</p>
+                  </div>
+                  <div className="row">
+                    <div className="col-xl-4 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div className="status-toggle d-flex align-items-center me-2">
+                            <input
+                              type="radio"
+                              name="nav_color"
+                              id="light_color"
+                              className="check nav-color"
+                              defaultValue="light"
+                              defaultChecked
+                            />
+                            <label
+                              htmlFor="light_color"
+                              className="checktoggles"
+                            >
+                              <span
+                                className="theme-name"
+                                onClick={LayoutLight}
+                              >
+                                Light
+                              </span>
+                            </label>
                           </div>
                         </div>
                       </div>
-                    </form>
+                    </div>
+                    <div className="col-xl-4 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div className="status-toggle d-flex align-items-center me-2">
+                            <input
+                              type="radio"
+                              name="nav_color"
+                              id="grey_color"
+                              className="check nav-color"
+                              defaultValue="grey"
+                            />
+                            <label
+                              htmlFor="grey_color"
+                              className="checktoggles"
+                            >
+                              <span
+                                className="theme-name"
+                                onClick={LayoutGrey}
+                              >
+                                Grey
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="col-xl-4 ere">
+                      <div className="layout-wrap">
+                        <div className="d-flex align-items-center">
+                          <div className="status-toggle d-flex align-items-center me-2">
+                            <input
+                              type="radio"
+                              name="nav_color"
+                              id="dark_color"
+                              className="check nav-color"
+                              defaultValue="dark"
+                            />
+                            <label
+                              htmlFor="dark_color"
+                              className="checktoggles"
+                            >
+                              <span
+                                className="theme-name"
+                                onClick={LayoutDark}
+                              >
+                                Dark
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                   </div>
                 </div>
                 <div className="sidebar-footer">