Enhance Visualization and Design components: add 'Design' option to ToggleHeader, improve state handling, and update styles for better consistency

app/src/components/layout/sidebarRight/visualization/Visualization.tsx

@@ -13,7 +13,7 @@ const Visualization = () => {
   return (
     <div className="visualization-right-sideBar">
       <ToggleHeader
-        options={["Data"]}
+        options={["Data","Design"]}
         activeOption={activeOption}
         handleClick={handleToggleClick}
       />

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -53,7 +53,7 @@ const Design = () => {
 
   // Initialize name input and extract elements when selectedChartId changes
   useEffect(() => {
-    setNameInput(selectedChartId?.header || selectedChartId?.title || "");
+    setNameInput(selectedChartId?.header ? selectedChartId?.title : "");
 
     if (!chartRef.current) return;
 
@@ -70,7 +70,7 @@ const Design = () => {
           const tagName = el.tagName.toLowerCase();
           const className =
             typeof el.className === "string" ? el.className : "";
-          const textContent = el.textContent?.trim() || "";
+          const textContent = el.textContent?.trim() ?? "";
 
           let selector = tagName;
 
@@ -196,22 +196,22 @@ const Design = () => {
   return (
     <div className="design">
       <div className="selectedWidget">
-        {selectedChartId?.title || selectedChartId?.header || "Widget 1"}
+        {selectedChartId?.title ? selectedChartId?.header : "Widget 1"}
       </div>
 
       <div className="reviewChart" ref={chartRef}>
         {selectedChartId?.title ? (
           <ChartComponent
-            type={selectedChartId.type || "bar"}
+            type={selectedChartId.type ?? "bar"}
             title={selectedChartId.title}
-            data={selectedChartId.data || defaultChartData}
+            data={selectedChartId.data ?? defaultChartData}
           />
         ) : (
           <SimpleCard
-            header={selectedChartId?.header || ""}
+            header={selectedChartId?.header ?? ""}
             icon={WalletIcon}
-            value={selectedChartId?.value || ""}
-            per={selectedChartId?.per || ""}
+            value={selectedChartId?.value ?? ""}
+            per={selectedChartId?.per ?? ""}
           />
         )}
       </div>
@@ -220,7 +220,7 @@ const Design = () => {
         <div className="option">
           <span>Element to Style</span>
           <RegularDropDown
-            header={selectedElementToStyle || "Select Element"}
+            header={selectedElementToStyle ?? "Select Element"}
             options={
               elementOptions.length > 0
                 ? elementOptions.map((opt) => opt.display)
@@ -230,7 +230,7 @@ const Design = () => {
               const selected = elementOptions.find(
                 (opt) => opt.display === value
               );
-              setSelectedElementToStyle(selected?.value || null);
+              setSelectedElementToStyle(selected?.value ?? null);
             }}
           />
         </div>
@@ -249,7 +249,7 @@ const Design = () => {
           <div className="option">
             <span>Chart Type</span>
             <RegularDropDown
-              header={selectedChartId?.type || "Select Type"}
+              header={selectedChartId?.type ?? "Select Type"}
               options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]}
               onSelect={(value) => {
                 handleUpdateWidget({ type: value });
@@ -261,7 +261,7 @@ const Design = () => {
         <div className="option">
           <span>Font Family</span>
           <RegularDropDown
-            header={selectedChartId?.fontFamily || "Select Font"}
+            header={selectedChartId?.fontFamily ?? "Select Font"}
             options={["Arial", "Roboto", "Sans-serif"]}
             onSelect={(value) => setSelectedFont(value)}
           />
@@ -270,7 +270,7 @@ const Design = () => {
         <div className="option">
           <span>Size</span>
           <RegularDropDown
-            header={selectedChartId?.fontSize || "Select Size"}
+            header={selectedChartId?.fontSize ?? "Select Size"}
             options={["12px", "14px", "16px", "18px"]}
             onSelect={(value) => setSelectedSize(value)}
           />
@@ -279,20 +279,20 @@ const Design = () => {
         <div className="option">
           <span>Weight</span>
           <RegularDropDown
-            header={selectedChartId?.fontWeight || "Select Weight"}
+            header={selectedChartId?.fontWeight ?? "Select Weight"}
             options={["Light", "Regular", "Bold"]}
             onSelect={(value) => setSelectedWeight(value)}
           />
         </div>
 
         <div className="option">
-          <div
+          <button
             className="header"
             onClick={() => setShowColorPicker((prev) => !prev)}
           >
             <span>Element Color</span>
             <div className="icon">▾</div>
-          </div>
+          </button>
 
           {showColorPicker && (
             <div className="colorDisplayer">

app/src/components/ui/inputs/ToggleHeader.tsx

@@ -14,15 +14,15 @@ const ToggleHeader: React.FC<ToggleHeaderProps> = ({
   return (
     <div className="toggle-header-container">
       {options.map((option, index) => (
-        <div
-          key={index}
+        <button
+          key={`${index}-${option}`}
           className={`toggle-header-item ${
             option === activeOption ? "active" : ""
           }`}
           onClick={() => handleClick(option)} // Call handleClick when an option is clicked
         >
           {option}
-        </div>
+        </button>
       ))}
     </div>
   );

app/src/components/ui/list/DropDownList.tsx

@@ -127,7 +127,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
             title="collapse-btn"
             className="collapse-icon option"
             style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
-            onClick={handleToggle}
+            // onClick={handleToggle}
           >
             <ArrowIcon />
           </button>

app/src/pages/Project.tsx

@@ -37,7 +37,7 @@ import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
 import useToggleStore from "../store/useUIToggleStore";
 import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
-import SimulationPlayer from "../components/ui/simulation/SimulationPlayer";
+import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import { useProductStore } from "../store/simulation/useProductStore";
 
 const Project: React.FC = () => {

app/src/store/builder/store.ts

@@ -472,7 +472,7 @@ interface CompareStore {
 }
 
 export const useCompareStore = create<CompareStore>((set) => ({
-  comparePopUp: true,
+  comparePopUp: false,
   setComparePopUp: (value) => set({ comparePopUp: value }),
   toggleComparePopUp: () =>
     set((state) => ({ comparePopUp: !state.comparePopUp })),

app/src/styles/layout/sidebar.scss

@@ -831,7 +831,7 @@
         gap: 15px;
         padding: 0;
         font-size: var(--font-weight-regular);
-        color: #4a4a4a;
+        color: var(--text-color);
 
         .reviewChart {
           width: 100%;
@@ -851,7 +851,7 @@
       .reviewChart {
         width: 100%;
         height: 150px;
-        background: #f0f0f0;
+        background: var(--background-color);
         display: flex;
         align-items: center;
       }
@@ -888,6 +888,7 @@
               justify-content: start;
               align-items: center;
 
+
               input[type="color"] {
                 border: none;
                 outline: none;
@@ -895,6 +896,7 @@
                 width: 24px;
                 height: 26px;
                 border-radius: #{$border-radius-small};
+                padding: 0;
               }
             }
           }