change icon zoom

src/pages/editor/components/ZoomControls.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Add, Minus, Grid8 } from "iconsax-react";
+import { AddCircle, MinusCirlce } from "iconsax-react";
 import { useEditorStore } from "../store/editorStore";
 
 const ZoomControls = () => {
@@ -54,20 +54,20 @@ const ZoomControls = () => {
   }, [isDragging, handleMouseMove, handleMouseUp]);
 
   return (
-    <div className="fixed right-8 top-24 bg-white rounded-full px-4 py-2.5 shadow-lg flex items-center gap-3 z-50">
-      <button
+    <div className="fixed right-[390px]  mx-auto w-fit bottom-1 bg-white/20 rounded-full px-4 py-2.5 shadow-lg flex items-center gap-3 z-50">
+      {/* <button
         className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
         title="نمایش گرید"
       >
         <Grid8 size={18} color="black" variant="Outline" />
-      </button>
+      </button> */}
 
       <button
-        onClick={zoomOut}
+        onClick={zoomIn}
         className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
-        title="کوچک‌نمایی"
+        title="بزرگ‌نمایی"
       >
-        <Minus size={18} color="black" />
+        <AddCircle size={18} color="black" />
       </button>
 
       <div
@@ -84,13 +84,15 @@ const ZoomControls = () => {
       </div>
 
       <button
-        onClick={zoomIn}
+        onClick={zoomOut}
         className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
-        title="بزرگ‌نمایی"
+        title="کوچک‌نمایی"
       >
-        <Add size={18} color="black" />
+        <MinusCirlce size={18} color="black" />
       </button>
 
+
+
       <div className="text-sm font-medium text-black">1/1</div>
     </div>
   );