refactor: replace div elements with buttons for side selection in WallProperties; improve material preview layout

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

@@ -119,7 +119,7 @@ const WallProperties = () => {
 
         <div className="material-preview">
           <div className="sides-wrapper">
-            <div
+            <button
               className={`side-wrapper ${activeSide === "side1" ? "active" : ""
                 }`}
               onClick={() => setActiveSide("side1")}
@@ -128,14 +128,15 @@ const WallProperties = () => {
               <div className="texture-image">
                 {selectedMaterials.side1 && (
                   <img
+                    draggable={false}
                     src={selectedMaterials.side1.texture}
                     alt={selectedMaterials.side1.textureName}
                   />
                 )}
               </div>
-            </div>
+            </button>
 
-            <div
+            <button
               className={`side-wrapper ${activeSide === "side2" ? "active" : ""
                 }`}
               onClick={() => setActiveSide("side2")}
@@ -144,17 +145,19 @@ const WallProperties = () => {
               <div className="texture-image">
                 {selectedMaterials.side2 && (
                   <img
+                    draggable={false}
                     src={selectedMaterials.side2.texture}
                     alt={selectedMaterials.side2.textureName}
                   />
                 )}
               </div>
-            </div>
+            </button>
           </div>
 
           <div className="preview">
             {selectedMaterials[activeSide] && (
               <img
+                draggable={false}
                 src={selectedMaterials[activeSide]!.texture}
                 alt={selectedMaterials[activeSide]!.textureName}
               />
@@ -168,18 +171,22 @@ const WallProperties = () => {
           ) : (
             <div className="material-container">
               {materials.map((material, index) => (
-                <div
+                <button
                   className="material-wrapper"
                   key={`${material.textureName}_${index}`}
                   onClick={() => handleSelectMaterial(material)}
                 >
                   <div className="material-property">
                     <div className="material-image">
-                      <img src={material.texture} alt={material.textureName} />
+                      <img
+                        draggable={false}
+                        src={material.texture}
+                        alt={material.textureName}
+                      />
                     </div>
                     <div className="material-name">{material.textureName}</div>
                   </div>
-                  <div
+                  <button
                     className="delete-material"
                     onClick={(e) => {
                       e.stopPropagation();
@@ -187,8 +194,8 @@ const WallProperties = () => {
                     }}
                   >
                     <RemoveIcon />
-                  </div>
+                  </button>
-                </div>
+                </button>
               ))}
             </div>
           )}

app/src/styles/layout/sidebar.scss

@@ -1114,6 +1114,7 @@
 
           input {
             padding: 5px 4px;
+            text-align: center;
           }
 
           .dropdown {
@@ -1527,6 +1528,7 @@
       .header {
         @include flex-space-between;
         border: none;
+
         .eyedrop-button {
           @include flex-center;
         }
@@ -1534,6 +1536,7 @@
 
       .inputs-container {
         @include flex-space-between;
+
         .input-container {
           padding: 0 4px;
           gap: 6px;
@@ -1652,6 +1655,143 @@
   }
 }
 
+.sidebar-right-wrapper {
+  .wall-properties-container {
+    .header {
+
+      color: var(--background-color-button);
+    }
+
+    .wall-properties {
+      padding: 12px 0;
+
+      .value-field-container {
+        padding: 0;
+
+        .input {
+          input {
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    section {
+      padding: 0;
+      margin: 0;
+      max-height: 50vh;
+
+      .header-wrapper {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px;
+      }
+
+      .material-preview {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        background: var(--Grays-Gray-6, #F2F2F7);
+        padding: 18px 25px;
+
+        .sides-wrapper {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          background-color: #FCFDFD;
+          border-radius: 4px;
+          overflow: hidden;
+
+          .side-wrapper {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 0;
+            cursor: pointer;
+
+            .label {
+              color: var(--background-color-button);
+            }
+
+            &.active {
+              background-color: #E0DFFF;
+            }
+
+            .texture-image {
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              overflow: hidden;
+
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+          }
+        }
+
+        .preview {
+          width: 90%;
+          // width: 100%;
+          height: 111px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+
+      .materials {
+        padding: 6px 12px;
+        max-height: 250px;
+        overflow: auto;
+
+        .material-container {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+
+          .material-wrapper {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .material-property {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              .material-image {
+                width: 30px;
+                height: 30px;
+                border-radius: 6px;
+                overflow: hidden;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                }
+              }
+            }
+
+            .delete-material {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .assets-container-main {
   width: 100%;
   display: flex;