From 3b97eb944d9ed6d0c2ec37a09eff61ebc04185c1 Mon Sep 17 00:00:00 2001
From: Miyuru Gunarathna <miyurupriyawadan@gmail.com>
Date: Sun, 11 Aug 2024 21:09:04 +0530
Subject: [PATCH 1/2] Fix: few more ui issues

---
 src/components/controls/image.tsx             |  2 +-
 src/components/controls/index.tsx             |  4 +--
 .../controls/select/polyline/index.tsx        |  8 +++--
 .../select/polyline/section-selector.tsx      | 36 ++++++++++---------
 .../controls/select/seats/categorizer.tsx     |  2 +-
 src/components/core/input.tsx                 |  2 +-
 src/components/core/popover.tsx               |  2 +-
 src/components/core/select.tsx                |  4 +--
 src/components/core/tooltip.tsx               |  2 +-
 src/components/index.tsx                      |  2 +-
 src/components/operations/index.tsx           |  2 +-
 src/components/toolbar/index.tsx              |  4 +--
 src/components/workspace/actions.tsx          |  0
 src/components/workspace/dock/index.tsx       |  2 +-
 14 files changed, 40 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/workspace/actions.tsx

diff --git a/src/components/controls/image.tsx b/src/components/controls/image.tsx
index 9096f13..7e7b0bc 100644
--- a/src/components/controls/image.tsx
+++ b/src/components/controls/image.tsx
@@ -51,7 +51,7 @@ const ImageControls = ({ options: { maxImageSize = 1024000 } = {} }: IImageContr
   return (
     <div className="w-full flex flex-col gap-5">
       <div
-        className="w-full aspect-square flex justify-center items-center rounded-md overflow-clip cursor-pointer bg-slate-100 border border-border"
+        className="w-full aspect-square flex justify-center items-center rounded-md overflow-clip cursor-pointer bg-slate-100 border border-gray-200"
         onClick={onUploadClick}
       >
         {file ? (
diff --git a/src/components/controls/index.tsx b/src/components/controls/index.tsx
index 39840a9..8ef8dae 100644
--- a/src/components/controls/index.tsx
+++ b/src/components/controls/index.tsx
@@ -59,13 +59,13 @@ const Controls = ({ options, styles }: IControlProps) => {
     <div
       id={ids.controls}
       className={twMerge(
-        "h-full bg-white border-l shadow-lg border-border absolute top-0 overflow-y-auto z-10",
+        "h-full bg-white border-l shadow-lg border-gray-200 absolute top-0 overflow-y-auto z-10",
         transition,
         width,
         open ? "right-0" : "-right-[22rem]"
       )}
     >
-      <div className="flex justify-between items-center gap-4 h-14 border-b border-border box-content px-5 sticky top-0 bg-white">
+      <div className="flex justify-between items-center gap-4 h-14 border-b border-gray-200 box-content px-5 sticky top-0 bg-white">
         <h5>Settings</h5>
         <IconButton
           className="w-6 h-6 p-0 shrink-0"
diff --git a/src/components/controls/select/polyline/index.tsx b/src/components/controls/select/polyline/index.tsx
index e6d6920..e2f5cf2 100644
--- a/src/components/controls/select/polyline/index.tsx
+++ b/src/components/controls/select/polyline/index.tsx
@@ -13,9 +13,9 @@ const PolylineSelectControls = (props: IControlProps) => {
   const firstElement = document.getElementById(selectedElementIds[0]);
 
   return (
-    <div className="flex flex-col gap-4 py-1">
+    <div className="flex flex-col gap-5">
       <SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} {...props} />
-      <div className="grid grid-cols-3 items-center gap-4">
+      <div className="flex flex-col gap-3">
         <ControlInput
           id="polyline-stroke-input"
           label="Stroke"
@@ -27,7 +27,10 @@ const PolylineSelectControls = (props: IControlProps) => {
               d3Extended.selectById(id).style("stroke", e.target.value);
             });
           }}
+          className="p-0 px-[.125rem]"
         />
+      </div>
+      <div className="flex flex-col gap-3">
         <ControlInput
           id="polyline-fill-input"
           label="Fill"
@@ -39,6 +42,7 @@ const PolylineSelectControls = (props: IControlProps) => {
               d3Extended.selectById(id).style("color", e.target.value);
             });
           }}
+          className="p-0 px-[.125rem]"
         />
       </div>
     </div>
diff --git a/src/components/controls/select/polyline/section-selector.tsx b/src/components/controls/select/polyline/section-selector.tsx
index e6c1337..bfb4390 100644
--- a/src/components/controls/select/polyline/section-selector.tsx
+++ b/src/components/controls/select/polyline/section-selector.tsx
@@ -1,4 +1,4 @@
-import { DollarSign, Plus, X } from "lucide-react";
+import { DollarSign, Plus, Settings2, X } from "lucide-react";
 import { useSelector } from "react-redux";
 import { default as debounce } from "lodash/debounce";
 import { twMerge } from "tailwind-merge";
@@ -7,7 +7,7 @@ import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { addSection, deleteSection, updatePolylines, updateSection } from "@/store/reducers/editor";
 import { ISTKProps } from "@/types";
-import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddSection = () => store.dispatch(addSection(undefined));
 
@@ -20,8 +20,8 @@ type IControlProps = Pick<ISTKProps, "options" | "styles">;
 export const SectionManager = ({ options }: IControlProps) => {
   const sections = useSelector((state: any) => state.editor.sections);
   return (
-    <div className="grid gap-4">
-      <div className="flex gap-2 justify-between items-center">
+    <div className="flex flex-col gap-3">
+      <div className="w-full flex justify-between items-center gap-4">
         <h6 className="font-medium text-sm">Sections</h6>
         <IconButton
           className="w-6 h-6 p-0"
@@ -83,18 +83,22 @@ const SectionSelector = ({ firstElement, selectedElementIds, options }: IControl
   const sections = useSelector((state: any) => state.editor.sections);
   return (
     <>
-      <div className="w-full flex justify-between items-center gap-12">
-        <Callout className="font-semibold">Sections</Callout>
-        <Popover>
-          <PopoverTrigger>
-            <Caption className="text-blue-500 hover:text-blue-600 transform translate-y-0.5 cursor-pointer transition-all duration-medium">
-              Manage
-            </Caption>
-          </PopoverTrigger>
-          <PopoverContent className="bg-white w-80 py-4 mr-4">
-            <SectionManager options={options} />
-          </PopoverContent>
-        </Popover>
+      <div className="flex flex-col gap-3">
+        <div className="w-full flex justify-between items-center gap-4">
+          <h6 className="font-medium text-sm">Sections</h6>
+          <Popover>
+            <PopoverTrigger>
+              <IconButton
+                className="w-6 h-6 p-0 shrink-0"
+                variant="secondary"
+                icon={<Settings2 className="w-4 h-4" />}
+              />
+            </PopoverTrigger>
+            <PopoverContent className="bg-white w-80 py-4 mr-4">
+              <SectionManager options={options} />
+            </PopoverContent>
+          </Popover>
+        </div>
       </div>
       <Select
         key={selectedElementIds?.join(",")}
diff --git a/src/components/controls/select/seats/categorizer.tsx b/src/components/controls/select/seats/categorizer.tsx
index abbff95..97b2134 100644
--- a/src/components/controls/select/seats/categorizer.tsx
+++ b/src/components/controls/select/seats/categorizer.tsx
@@ -84,7 +84,7 @@ export const CategoryManager = ({ options }: IControlProps) => {
                       key={section.id}
                       className={twMerge(
                         "w-full flex gap-3 items-center py-2 px-4 text-base cursor-pointer hover:bg-gray-100 transition-all duration-medium",
-                        section.id === "0" && "justify-center border-b pb-2",
+                        section.id === "0" && "justify-center border-b border-gray-200 pb-2",
                         section.id === category.section && "bg-blue-50 "
                       )}
                       {...{ [dataAttributes.section]: section.id }}
diff --git a/src/components/core/input.tsx b/src/components/core/input.tsx
index db2f418..2914a81 100644
--- a/src/components/core/input.tsx
+++ b/src/components/core/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
     <input
       type={type}
       className={twMerge(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/src/components/core/popover.tsx b/src/components/core/popover.tsx
index d599803..d1eecc8 100644
--- a/src/components/core/popover.tsx
+++ b/src/components/core/popover.tsx
@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={twMerge(
-        "stk-core z-50 w-72 rounded-md border bg-popover p-4 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "stk-core z-50 w-72 rounded-md border border-gray-200 bg-popover p-4 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/src/components/core/select.tsx b/src/components/core/select.tsx
index e9c980f..34ae467 100644
--- a/src/components/core/select.tsx
+++ b/src/components/core/select.tsx
@@ -27,7 +27,7 @@ const SelectTrigger = React.forwardRef<
   <Trigger
     ref={ref}
     className={twMerge(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <Content
       ref={ref}
       className={twMerge(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/src/components/core/tooltip.tsx b/src/components/core/tooltip.tsx
index 7ec8d00..051ead8 100644
--- a/src/components/core/tooltip.tsx
+++ b/src/components/core/tooltip.tsx
@@ -16,7 +16,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={twMerge(
-      "z-50 overflow-hidden rounded-md border bg-white px-3 py-1 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border border-gray-200 bg-white px-3 py-1 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 5409d6c..b9ba763 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -15,7 +15,7 @@ const Designer: React.FC<ISTKProps> = (props) => {
     <>
       <div
         className={twMerge(
-          "bg-white text-black h-full min-h-[calc(100vh-32px)] flex overflow-x-hidden",
+          "bg-white text-black h-full min-h-dvh flex overflow-x-hidden",
           props.styles?.root?.className
         )}
         style={props?.styles?.root?.properties}
diff --git a/src/components/operations/index.tsx b/src/components/operations/index.tsx
index 33e9598..7e965c1 100644
--- a/src/components/operations/index.tsx
+++ b/src/components/operations/index.tsx
@@ -33,7 +33,7 @@ const Operations: React.FC<ISTKProps> = ({
     <div
       id={ids.operationBar}
       className={twMerge(
-        "w-full flex justify-between items-center gap-6 bg-white px-5 py-2 border-b border-border z-10",
+        "w-full flex justify-between items-center gap-6 bg-white px-5 py-2 border-b border-gray-200 z-10",
         styles?.root?.className
       )}
       style={styles?.root?.properties}
diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
index 9c86b85..a5284a9 100644
--- a/src/components/toolbar/index.tsx
+++ b/src/components/toolbar/index.tsx
@@ -80,13 +80,13 @@ const ToolBar: React.FC<ISTKProps> = (props) => {
   return (
     <div
       id={ids.toolbar}
-      className={twMerge("border-r border-border bg-white", styles?.root?.className)}
+      className={twMerge("border-r border-gray-200 bg-white", styles?.root?.className)}
       style={styles?.root?.properties}
     >
       <div className="m-[.875rem] p-1">
         <DraftingCompass className="w-5 h-5" />
       </div>
-      <hr />
+      <hr className="!border-gray-200" />
       <div className="overflow-y-auto h-[calc(100%-3.5rem)] flex flex-col">
         <div className="grow">
           {Object.entries(tools).map(([key, value]) => {
diff --git a/src/components/workspace/actions.tsx b/src/components/workspace/actions.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/workspace/dock/index.tsx b/src/components/workspace/dock/index.tsx
index 326c938..a4ae5b1 100644
--- a/src/components/workspace/dock/index.tsx
+++ b/src/components/workspace/dock/index.tsx
@@ -120,7 +120,7 @@ const Dock = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events">)
         >
           <div
             className={twMerge(
-              "border-t sm:border border-border w-full sm:w-fit bg-white p-3 sm:p-2 overflow-x-auto sm:rounded-lg flex justify-center [&>div]:shrink-0 gap-2 transition-all duration-500 ease-in-out opacity-100",
+              "border-t sm:border border-gray-200 w-full sm:w-fit bg-white p-3 sm:p-2 overflow-x-auto sm:rounded-lg flex justify-center [&>div]:shrink-0 gap-2 transition-all duration-500 ease-in-out opacity-100",
               panStyles?.root?.className,
               !dock && "translate-y-20 opacity-0"
             )}

From 565a2d170fa2c0de79ec01c39dc81b9fa8416220 Mon Sep 17 00:00:00 2001
From: Miyuru Gunarathna <miyurupriyawadan@gmail.com>
Date: Sun, 11 Aug 2024 21:26:20 +0530
Subject: [PATCH 2/2] Feat: added extended styles for dock

---
 src/components/workspace/dock/index.tsx | 19 ++++++++++++-------
 src/types/styles.ts                     |  4 ++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/workspace/dock/index.tsx b/src/components/workspace/dock/index.tsx
index a4ae5b1..10ab2cc 100644
--- a/src/components/workspace/dock/index.tsx
+++ b/src/components/workspace/dock/index.tsx
@@ -97,9 +97,11 @@ const Dock = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events">)
 
   const zoomStyles = props.styles?.zoomControls;
   const panStyles = props.styles?.panControls;
+  const dockStyles = props.styles?.dock;
 
+  const isDesigner = props.mode === "designer";
   const showZoomControls = props.options?.showZoomControls ?? true;
-  const showVisibilityControls = props.mode === "designer" && (props.options?.showVisibilityControls ?? true);
+  const showVisibilityControls = isDesigner && (props.options?.showVisibilityControls ?? true);
   const showReloadButton = props.options?.showReloadButton ?? false;
   const isUser = props.mode === "user";
 
@@ -110,21 +112,24 @@ const Dock = (props: Pick<ISTKProps, "mode" | "styles" | "options" | "events">)
           {showReloadButton && (
             <Reload mode={props.mode} options={props.options} styles={props.styles} onReload={props.events?.onReload} />
           )}
-          <DockHandler />
+          {(showZoomControls || showVisibilityControls) && <DockHandler />}
         </div>
       )}
       {(showZoomControls || showVisibilityControls) && (
         <div
-          id={ids.zoomControls}
-          className="absolute overflow-clip bottom-0 sm:pb-4 left-0 right-0 flex justify-center items-center"
+          className={twMerge(
+            "absolute overflow-clip bottom-0 pb-4 left-0 right-0 flex justify-center items-center pointer-events-none",
+            dockStyles?.root?.className
+          )}
         >
           <div
+            id={ids.zoomControls}
             className={twMerge(
-              "border-t sm:border border-gray-200 w-full sm:w-fit bg-white p-3 sm:p-2 overflow-x-auto sm:rounded-lg flex justify-center [&>div]:shrink-0 gap-2 transition-all duration-500 ease-in-out opacity-100",
-              panStyles?.root?.className,
+              "border border-gray-200 w-fit bg-white p-2 overflow-x-auto rounded-lg flex justify-center [&>div]:shrink-0 gap-2 transition-all duration-500 ease-in-out opacity-100 pointer-events-auto",
+              dockStyles?.container?.className,
               !dock && "translate-y-20 opacity-0"
             )}
-            style={panStyles?.root?.properties}
+            style={dockStyles?.container?.properties}
           >
             {showVisibilityControls && <VisibilityFreezeScale {...props} />}
             {showZoomControls && (
diff --git a/src/types/styles.ts b/src/types/styles.ts
index f23bac7..d850521 100644
--- a/src/types/styles.ts
+++ b/src/types/styles.ts
@@ -90,4 +90,8 @@ export interface IStyles {
     container?: IStyle;
     button?: IStyle;
   };
+  dock?: {
+    container?: IStyle;
+    root?: IStyle;
+  };
 }