Refactor: dock buttons

mezh-hq · Aug 11, 2024 · e63325e · e63325e
1 parent b683c85
commit e63325e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 51 deletions.
diff --git a/src/components/core/button.tsx b/src/components/core/button.tsx
@@ -7,7 +7,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary: "bg-black text-white",
-        secondary: "text-black bg-slate-100 after:bg-black/[0.15]"
+        secondary: "text-black bg-slate-100 hover:bg-slate-200/75 after:bg-black/[0.15]"
       },
       size: {
         default: "h-10 px-4 py-2",

diff --git a/src/components/workspace/actions.tsx b/src/components/workspace/actions.tsx
@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { dataAttributes, ids, selectors } from "@/constants";
 import type { ISTKProps } from "@/types";
 import { d3Extended, getScaleFactorAccountingForViewBoxWidth } from "@/utils";
+import { Button } from "../core";
 import { Tool } from "../toolbar/data";
 import { default as DockHandler } from "./dock-handler";
 import { showPostOffsetElements, showPreOffsetElements } from "./elements";
@@ -128,72 +129,54 @@ const Actions = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events"
             {showVisibilityControls && <VisibilityFreezeScale {...props} />}
             {showZoomControls && (
               <>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    panStyles?.handles?.left?.className
-                  )}
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", panStyles?.handles?.left?.className)}
                   onClick={() => panLeft()}
-                  role="button"
                   style={panStyles?.handles?.left?.properties}
                 >
                   <ChevronLeft size={16} />
-                </div>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    panStyles?.handles?.right?.className
-                  )}
-                  role="button"
+                </Button>
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", panStyles?.handles?.right?.className)}
                   onClick={() => panRight()}
                   style={panStyles?.handles?.right?.properties}
                 >
                   <ChevronRight size={16} />
-                </div>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    zoomStyles?.out?.className
-                  )}
+                </Button>
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", zoomStyles?.out?.className)}
                   onClick={zoomOut}
-                  role="button"
                   style={zoomStyles?.out?.properties}
                 >
                   <Minus size={16} />
-                </div>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    zoomStyles?.in?.className
-                  )}
+                </Button>
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", zoomStyles?.in?.className)}
                   onClick={zoomIn}
-                  role="button"
                   style={zoomStyles?.in?.properties}
                 >
                   <Plus size={16} />
-                </div>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    panStyles?.handles?.up?.className
-                  )}
-                  role="button"
+                </Button>
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", panStyles?.handles?.up?.className)}
                   onClick={() => panUp()}
                   style={panStyles?.handles?.up?.properties}
                 >
                   <ChevronUp size={16} />
-                </div>
-                <div
-                  className={twMerge(
-                    "w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash",
-                    panStyles?.handles?.down?.className
-                  )}
-                  role="button"
+                </Button>
+                <Button
+                  variant="secondary"
+                  className={twMerge("w-8 h-8 p-2", panStyles?.handles?.down?.className)}
                   onClick={() => panDown()}
                   style={panStyles?.handles?.down?.properties}
                 >
                   <ChevronDown size={16} />
-                </div>
+                </Button>
               </>
             )}
             {showVisibilityControls && <VisibilityOffset {...props} />}

diff --git a/src/components/workspace/visibility.tsx b/src/components/workspace/visibility.tsx
@@ -6,6 +6,7 @@ import { store } from "@/store";
 import { setInitialViewBoxScale, setVisibilityOffset } from "@/store/reducers/editor";
 import type { ISTKProps } from "@/types";
 import { d3Extended } from "@/utils";
+import { Button } from "../core";
 import { showAllElements } from "./elements";
 
 const freeze = () =>
@@ -31,14 +32,14 @@ export const VisibilityFreezeScale = (props: Pick<ISTKProps, "mode" | "styles" |
   const styles = props.styles?.visibilityControls;
 
   return (
-    <div
-      className={twMerge("w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash", styles?.buttons?.className)}
+    <Button
+      variant="secondary"
+      className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
       onClick={initialViewBoxScale ? unfreeze : freeze}
-      role="button"
       style={styles?.buttons?.properties}
     >
       {initialViewBoxScale ? <Lock size={16} /> : <Unlock size={16} />}
-    </div>
+    </Button>
   );
 };
 
@@ -48,13 +49,13 @@ export const VisibilityOffset = (props: Pick<ISTKProps, "mode" | "styles" | "opt
   const styles = props.styles?.visibilityControls;
 
   return (
-    <div
-      className={twMerge("w-8 h-8 p-2 rounded-md bg-slate-100 cursor-pointer splash", styles?.buttons?.className)}
+    <Button
+      variant="secondary"
+      className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
       onClick={visibilityOffset === 0 ? setVisibility : unsetVisibility}
-      role="button"
       style={styles?.buttons?.properties}
     >
       {visibilityOffset === 0 ? <Scan size={16} /> : <Focus size={16} />}
-    </div>
+    </Button>
   );
 };