refactor: move zoom button under chart selection bar

cryptoalgebra · Apr 24, 2024 · 7cedbaa · 7cedbaa
1 parent 645a5e5
commit 7cedbaa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/components/swap/SwapChart/index.tsx b/src/components/swap/SwapChart/index.tsx
@@ -300,14 +300,14 @@ const SwapChart = () => {
 
         {/* <MarketDepthChart currencyA={tokenA} currencyB={tokenB} poolAddress={poolId} isOpen={isMarketDepthOpen} close={() => setIsMarketDepthOpen(false)} /> */}
 
-        <div className="flex flex-col md:flex-row gap-4 justify-between">
+        <div className="flex flex-col md:flex-row ml-auto gap-4 justify-between">
 
             {
                 chartType !== SwapChartView.TICKS ?
                 <Popover open={isPoolSwitcherOpen}>
                     <PopoverTrigger
                         onMouseDown={() => setIsPoolSwitcherOpen(v => !v)}
-                        className="flex items-center justify-between w-fit min-w-[240px] py-2 px-4 rounded-3xl bg-card border border-card-border hover:bg-card-hover duration-200">
+                        className="flex items-center justify-between w-fit min-w-[240px] py-2 px-4 ml-auto rounded-3xl bg-card border border-card-border hover:bg-card-hover duration-200">
                         <div className="flex items-center gap-4 font-semibold">
                             <span className="flex">{pairImage}</span>
                             <span>{pairTitle}</span>
@@ -338,7 +338,7 @@ const SwapChart = () => {
             }
             <div className="flex gap-4 w-fit p-2 bg-card border border-card-border rounded-3xl">
                 {chartType === SwapChartView.TICKS ?
-                <div className="flex gap-2">
+                <div className="flex gap-2 max-sm:hidden">
                     <TicksZoomBar zoom={ticksChartZoom} onZoom={setTicksChartZoom} />
                     <div className="self-center w-[1px] h-3/6 border border-card-border/40"></div>
                 </div>
@@ -390,6 +390,12 @@ const SwapChart = () => {
                 </HoverCard> */}
             </div>
         </div>
+        {
+            chartType === SwapChartView.TICKS &&
+            <div className="flex gap-2 mr-2 ml-auto absolute right-0 top-20 z-50 max-md:top-24">
+                <TicksZoomBar zoom={ticksChartZoom} onZoom={setTicksChartZoom} onlyZoom />
+            </div>
+        }
         <div className={`flex items-center justify-center relative w-full h-[300px]`}>
 
             {chartType === SwapChartView.TICKS && !isPoolExists && <div>Pool doesn't exists.</div>}

diff --git a/src/components/swap/TicksZoomBar/index.tsx b/src/components/swap/TicksZoomBar/index.tsx
@@ -3,9 +3,10 @@ import { Button } from "@/components/ui/button";
 interface TicksZoomBarProps {
     zoom: number;
     onZoom: (value: number) => void;
+    onlyZoom?: boolean;
 }
 
-const TicksZoomBar = ({ zoom, onZoom }: TicksZoomBarProps) => {
+const TicksZoomBar = ({ zoom, onZoom, onlyZoom = false }: TicksZoomBarProps) => {
     const ZOOM_STEP = window.innerWidth < 720 ? 15 : 5;
     const DEFAULT_ZOOM = window.innerWidth < 720 ? 100 : 50;
     const MIN_ZOOM = window.innerWidth < 720 ? 50 : 10;
@@ -14,35 +15,42 @@ const TicksZoomBar = ({ zoom, onZoom }: TicksZoomBarProps) => {
     const handleZoomIn = () => zoom < MAX_ZOOM && onZoom(zoom + ZOOM_STEP);
     const handleZoomOut = () => zoom > MIN_ZOOM && onZoom(zoom - ZOOM_STEP);
 
+    if (onlyZoom) {
+        return (
+            <>
+                <Button disabled={zoom <= MIN_ZOOM} variant="icon" className="text-lg pb-0.5 border" size="icon" onClick={handleZoomOut}>
+                    -
+                </Button>
+                <Button disabled={zoom >= MAX_ZOOM} variant="icon" size="icon" className="text-lg pb-0.5 border" onClick={handleZoomIn}>
+                    +
+                </Button>
+            </>
+        );
+    }
+
     return (
         <>
             <Button
                 variant={zoom === MIN_ZOOM ? "iconActive" : "ghost"}
-                className="h-10 max-sm:hidden text-sm"
+                className="h-10 text-sm"
                 onClick={() => onZoom(MIN_ZOOM)}
             >
                 10%
             </Button>
             <Button
                 variant={zoom === DEFAULT_ZOOM ? "iconActive" : "ghost"}
-                className="h-10 max-sm:hidden text-sm"
+                className="h-10 text-sm"
                 onClick={() => onZoom(DEFAULT_ZOOM)}
             >
                 50%
             </Button>
             <Button
                 variant={zoom === MAX_ZOOM ? "iconActive" : "ghost"}
-                className="h-10 max-sm:hidden text-sm"
+                className="h-10 text-sm"
                 onClick={() => onZoom(MAX_ZOOM)}
             >
                 100%
             </Button>
-            <Button disabled={zoom <= MIN_ZOOM} variant="icon" className="text-lg pb-0.5" size="icon" onClick={handleZoomOut}>
-                -
-            </Button>
-            <Button disabled={zoom >= MAX_ZOOM} variant="icon" size="icon" className="text-lg pb-0.5" onClick={handleZoomIn}>
-                +
-            </Button>
         </>
     );
 };