Merge pull request #9 from mezh-hq/feature/ui-revamp

Feature/UI revamp

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 ? (

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"

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>

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(",")}

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 }}

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}

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}

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

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}

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}

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}

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]) => {

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-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",
-              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 && (

src/types/styles.ts

@@ -90,4 +90,8 @@ export interface IStyles {
     container?: IStyle;
     button?: IStyle;
   };
+  dock?: {
+    container?: IStyle;
+    root?: IStyle;
+  };
 }