refactor: update material selection styles and improve layout in WallProperties; enhance hover effects

app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx

@@ -13,23 +13,26 @@ type Material = {
   textureName: string;
 };
 
-// Initial and default material
-const initialMaterial: Material = {
-  texture: wallTexture1,
-  textureName: "Grunge Concrete Wall",
-};
-
+// Default and initial materials
 const defaultMaterial: Material = {
   texture: defaultTexture,
   textureName: "Default Material",
 };
 
+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
 const WallProperties = () => {
   const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();
 
   const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
 
-  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+  const [materials, setMaterials] = useState<Material[]>([
+    defaultMaterial,
+    initialMaterial,
+  ]);
 
   const [selectedMaterials, setSelectedMaterials] = useState<{
     side1: Material | null;
@@ -39,11 +42,11 @@ const WallProperties = () => {
     side2: null,
   });
 
-  // Select initial material for both sides on mount
+  // Set default material initially for both sides
   useEffect(() => {
     setSelectedMaterials({
-      side1: initialMaterial,
-      side2: initialMaterial,
+      side1: defaultMaterial,
+      side2: defaultMaterial,
     });
   }, []);
 
@@ -71,21 +74,16 @@ const WallProperties = () => {
   };
 
   const handleRemoveMaterial = (index: number) => {
-    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const removedTexture = materials[index].texture;
 
-    // Ensure there's always at least one material
-    const newMaterials =
-      updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const newMaterials = updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
     setMaterials(newMaterials);
 
-    // Deselect the material if it's the one removed
     setSelectedMaterials((prev) => {
       const updated = { ...prev };
       ["side1", "side2"].forEach((side) => {
-        if (
-          updated[side as "side1" | "side2"]?.texture ===
-          materials[index].texture
-        ) {
+        if (updated[side as "side1" | "side2"]?.texture === removedTexture) {
           updated[side as "side1" | "side2"] = defaultMaterial;
         }
       });
@@ -120,8 +118,7 @@ const WallProperties = () => {
         <div className="material-preview">
           <div className="sides-wrapper">
             <button
-              className={`side-wrapper ${activeSide === "side1" ? "active" : ""
-                }`}
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""}`}
               onClick={() => setActiveSide("side1")}
             >
               <div className="label">Side 1</div>
@@ -137,8 +134,7 @@ const WallProperties = () => {
             </button>
 
             <button
-              className={`side-wrapper ${activeSide === "side2" ? "active" : ""
-                }`}
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
               onClick={() => setActiveSide("side2")}
             >
               <div className="label">Side 2</div>
@@ -170,33 +166,37 @@ const WallProperties = () => {
             <div className="no-materials">No materials added yet.</div>
           ) : (
             <div className="material-container">
-              {materials.map((material, index) => (
-                <button
-                  className="material-wrapper"
-                  key={`${material.textureName}_${index}`}
-                  onClick={() => handleSelectMaterial(material)}
-                >
-                  <div className="material-property">
-                    <div className="material-image">
-                      <img
-                        draggable={false}
-                        src={material.texture}
-                        alt={material.textureName}
-                      />
-                    </div>
-                    <div className="material-name">{material.textureName}</div>
-                  </div>
+              {materials.map((material, index) => {
+                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;
+
+                return (
                   <button
-                    className="delete-material"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRemoveMaterial(index);
-                    }}
+                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
+                    key={`${material.textureName}_${index}`}
+                    onClick={() => handleSelectMaterial(material)}
                   >
-                    <RemoveIcon />
+                    <div className="material-property">
+                      <div className="material-image">
+                        <img
+                          draggable={false}
+                          src={material.texture}
+                          alt={material.textureName}
+                        />
+                      </div>
+                      <div className="material-name">{material.textureName}</div>
+                    </div>
+                    <button
+                      className="delete-material"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveMaterial(index);
+                      }}
+                    >
+                      <RemoveIcon />
+                    </button>
                   </button>
-                </button>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>

app/src/styles/layout/sidebar.scss

@@ -1394,16 +1394,20 @@
         }
 
         &.selected {
-          background: var(--background-color-accent);
-          color: var(--text-button-color);
+          background: var(--highlight-accent-color);
+
+          .aisle-color {
+            // color: var(--text-button-color);
+          }
 
           &:hover {
-            background: var(--background-color-accent);
+            // background: var(--background-color-accent);
           }
         }
 
         &:hover {
-          background: var(--background-color-secondary);
+          background: var(--highlight-accent-color);
+          // background: var(--background-color-secondary);
         }
       }
     }
@@ -1680,6 +1684,7 @@
       padding: 0;
       margin: 0;
       max-height: 50vh;
+      overflow: hidden;
 
       .header-wrapper {
         display: flex;
@@ -1737,7 +1742,6 @@
 
         .preview {
           width: 90%;
-          // width: 100%;
           height: 111px;
 
           img {
@@ -1749,9 +1753,10 @@
       }
 
       .materials {
-        padding: 6px 12px;
         max-height: 250px;
         overflow: auto;
+        margin-bottom: 6px;
+        padding: 0 12px;
 
         .material-container {
           display: flex;
@@ -1762,6 +1767,16 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 4px 6px;
+            border-radius: 12px;
+
+            &:hover {
+              background: var(--highlight-accent-color);
+            }
+
+            &.selectedMaterial {
+              background: var(--highlight-accent-color);
+            }
 
             .material-property {
               display: flex;
@@ -1769,8 +1784,8 @@
               gap: 6px;
 
               .material-image {
-                width: 30px;
-                height: 30px;
+                width: 34px;
+                height: 34px;
                 border-radius: 6px;
                 overflow: hidden;