Refactor components and styles for consistency and clarity

app/src/components/ui/componets/DisplayZone.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
+import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -134,27 +135,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   };
 
   return (
-    <div className="zoon-wrapper">
+    <div className="zone-wrapper">
       {/* Left Arrow */}
       {showLeftArrow && (
         <button className="arrow left-arrow" onClick={handleScrollLeft}>
-          {"<"}
+          <MoveArrowLeft />
         </button>
       )}
 
       {/* Zones Wrapper */}
-      <div
-        ref={containerRef}
-        className="zones-wrapper"
-        style={{
-          display: "flex",
-          gap: "6px",
-          padding: "4px",
-          borderRadius: "8px",
-          overflowX: "auto",
-          maxWidth: "calc(100% - 10px)", // Uncomment this line if needed
-        }}
-      >
+      <div ref={containerRef} className="zones-wrapper">
         {Object.keys(zonesData).map((zoneName, index) => (
           <div
             key={index}
@@ -163,7 +153,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
             }`}
             onClick={() => {
               console.log("zoneName: ", zoneName);
-
               setSelectedZone({
                 zoneName,
                 activeSides: zonesData[zoneName].activeSides || [],
@@ -181,11 +170,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       {/* Right Arrow */}
       {showRightArrow && (
         <button className="arrow right-arrow" onClick={handleScrollRight}>
-          {">"}
+          <MoveArrowRight />
         </button>
       )}
     </div>
   );
 };
 
-export default DisplayZone;
+export default DisplayZone;