everything restyled

frontend/realtime/src/KonvaApp/Engine.ts

@@ -1,6 +1,5 @@
 import Konva from "konva";
 
-
 import { uiAccess, uiEvents } from "~/signals";
 import { ShapeNode } from "./Nodes";
 
@@ -99,7 +98,6 @@ export class Engine {
     this.stage.add(this.nodeIsolationLayer);
     this.stage.add(this.uiLayer);
 
-
     // Konva Transformer
     this.nodeTransformer = new NodeTransformer();
     this.uiLayer.add(this.nodeTransformer.getKonvaNode());
@@ -120,7 +118,7 @@ export class Engine {
       height: VideoResolutions.SQUARE_1024.height,
       mediaLayerRef: this.mediaLayer,
       bgLayerRef: this.bgLayer,
-      offScreenCanvas: this.offScreenCanvas
+      offScreenCanvas: this.offScreenCanvas,
     });
 
     // Collection of all Nodes
@@ -180,13 +178,8 @@ export class Engine {
     // hence, lastly, setup these events
     this.setupEventSystem();
     this.setAppMode(AppModes.SELECT);
-
-
-
   }
 
-
-
   private setAppMode(newAppMode: AppModes) {
     this.appMode = newAppMode;
     switch (this.appMode) {
@@ -368,7 +361,18 @@ export class Engine {
 
     uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
       await this.realTimeDrawEngine.saveOutput();
+    });
 
+    uiEvents.toolbarMain.SELECT.onClick(() => {
+      console.log("Toolbar Main >> Select");
+    });
+
+    uiEvents.toolbarMain.PAINT.onClick(() => {
+      console.log("Toolbar Main >> Paint");
+    });
+
+    uiEvents.toolbarMain.ERASER.onClick(() => {
+      console.log("Toolbar Main >> Eraser");
     });
 
     uiEvents.toolbarMain.PREVIEW.onClick(async () => {
@@ -399,8 +403,6 @@ export class Engine {
       this.addImage(image);
     });
 
-
-
     uiEvents.onAddTextToEngine((textdata) => {
       this.addText(textdata);
     });
@@ -465,7 +467,7 @@ export class Engine {
         return;
       }
       this.changeNodeColor(nodeColor);
-    })
+    });
   }
 
   disableAllButtons() {
@@ -501,7 +503,7 @@ export class Engine {
   }
 
   // Sandbox is quickly a way to test your idea.
-  public async sandbox() { }
+  public async sandbox() {}
 
   public onMessage(event: MessageEvent) {
     console.log("Message From Shared Worker");
@@ -529,9 +531,9 @@ export class Engine {
       x: 10,
       y: 80,
       text: "",
-      fontSize: 24,
+      fontSize: 18,
       fontFamily: "Source Sans 3",
-      fill: "black",
+      fill: "white",
     });
     const anim = new Konva.Animation((frame) => {
       if (frame && import.meta.env.DEV) {
@@ -549,32 +551,34 @@ export class Engine {
   }
 
   private changeNodeColor(nodeColor: NodeColor) {
-    console.log('Changing node color:', nodeColor);
+    console.log("Changing node color:", nodeColor);
     // Find the node that is selected with the id
-    const idSelector = '#' + nodeColor.kNodeId;
+    const idSelector = "#" + nodeColor.kNodeId;
     const selectedNode = this.mediaLayer.findOne(idSelector);
-    console.log('Selected node:', selectedNode);
-    console.log('ID selector:', idSelector);
-    console.log('Media layer:', this.mediaLayer);
+    console.log("Selected node:", selectedNode);
+    console.log("ID selector:", idSelector);
+    console.log("Media layer:", this.mediaLayer);
     // TODO: Change the color of the node
     // Turns out shapes are image nodes... how do we change the image's fill??
     if (selectedNode) {
       // Get the shape node from the real time drawing engine's image nodes
-      const shapeNode = this.realTimeDrawEngine.findImageNodeById(nodeColor.kNodeId);
+      const shapeNode = this.realTimeDrawEngine.findImageNodeById(
+        nodeColor.kNodeId,
+      );
       if (shapeNode && shapeNode instanceof ShapeNode) {
         // Create new shape node with updated color
         const newShapeNode = new ShapeNode({
           canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-          canvasSize: this.realTimeDrawEngine.captureCanvas.size(), 
+          canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
           shapeType: shapeNode.shapeType,
           size: shapeNode.size,
           color: nodeColor.color,
           mediaLayerRef: this.mediaLayer,
-          selectionManagerRef: this.selectionManager
+          selectionManagerRef: this.selectionManager,
         });
         newShapeNode.kNode.position(shapeNode.kNode.position());
         newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex());
-        
+
         // Remove old node and add new one
         shapeNode.kNode.destroy();
         this.commandManager.createNode(newShapeNode);
@@ -601,7 +605,7 @@ export class Engine {
       size: size,
       color: color,
       mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager
+      selectionManagerRef: this.selectionManager,
     });
     shapeNode.kNode.zIndex(1); // Replace desiredZIndex with a number
 
@@ -665,7 +669,7 @@ export class Engine {
           if (
             longestVideoNode === undefined ||
             node.videoComponent.duration >
-            longestVideoNode.videoComponent.duration
+              longestVideoNode.videoComponent.duration
           ) {
             longestVideoNode = node;
           }

frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts

@@ -23,7 +23,6 @@ interface ShapeNodeConstructor {
 }
 
 export class ShapeNode extends NetworkedNode {
-  
   retry(): void {
     throw new Error("Method not implemented.");
   }
@@ -36,7 +35,7 @@ export class ShapeNode extends NetworkedNode {
     canvasSize,
     shapeType,
     size,
-    color = "#ff0000", // Default red if no color provided
+    color = "#2D81FF", // Default red if no color provided
     transform: existingTransform,
     mediaLayerRef,
     selectionManagerRef,
@@ -49,7 +48,7 @@ export class ShapeNode extends NetworkedNode {
     });
 
     let shape = null;
-    
+
     switch (shapeType) {
       case ShapeType.CIRCLE:
         const circleShape = new Konva.Circle({
@@ -72,7 +71,7 @@ export class ShapeNode extends NetworkedNode {
           width: circleShape.width(),
           height: circleShape.height(),
           ...transform,
-          fill: 'transparent',
+          fill: "transparent",
           strokeScaleEnabled: false,
           draggable: true,
         });
@@ -107,7 +106,7 @@ export class ShapeNode extends NetworkedNode {
           width: squareShape.width(),
           height: squareShape.height(),
           ...transform,
-          fill: 'transparent',
+          fill: "transparent",
           strokeScaleEnabled: false,
           draggable: true,
         });
@@ -142,7 +141,7 @@ export class ShapeNode extends NetworkedNode {
           width: triangleShape.width(),
           height: triangleShape.height(),
           ...transform,
-          fill: 'transparent',
+          fill: "transparent",
           strokeScaleEnabled: false,
           draggable: true,
         });

frontend/realtime/src/KonvaApp/Nodes/constants.ts

@@ -4,12 +4,12 @@ export enum NodeType {
   IMAGE = "image",
   TEXT = "text",
   VIDEO = "video",
-  SHAPE = "shape"
+  SHAPE = "shape",
 }
 export const transparent = Colors.transparent;
 export const primaryOrange = Colors.primaryOrange;
 
-export const highlightStrokeWidth = 10;
+export const highlightStrokeWidth = 2;
 export const minNodeSize = {
   width: 200,
   height: 200,

frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts

@@ -40,8 +40,9 @@ export class SelectorSquare {
     stageRef: Konva.Stage;
   }) {
     this.kSquare = new Konva.Rect({
-      fill: "	rgb(250, 128, 114, 0.3)",
-      stroke: "salmon",
+      fill: "rgba(45, 129, 255, 0.3)",
+      stroke: "#00a1ff",
+      strokeWidth: 1,
       visible: false,
       // disable events to not interrupt with events
       listening: false,

frontend/realtime/src/KonvaApp/constants.ts

@@ -2,6 +2,8 @@ export enum AppModes {
   INIT = "INIT",
   PREVIEW = "PREVIEW",
   SELECT = "SELECT",
+  PAINT = "PAINT",
+  ERASER = "ERASER",
   RENDERING = "RENDERING",
 }
 
@@ -14,5 +16,5 @@ export const VideoResolutions = {
 export const Colors = {
   transparent: "rgba(0,0,0,0)",
   translucentBlack: "rgba(0,0,0,0.3)",
-  primaryOrange: "rgba(230,100,98,1)",
+  primaryOrange: "rgba(45, 129, 255, 1)",
 };

frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx

@@ -1,22 +1,28 @@
-
 import { useSignalEffect } from "@preact/signals-react";
-import { Slider } from "~/components/ui"
-import { dispatchUiEvents } from "~/signals"
+import { Slider } from "~/components/ui";
+import { dispatchUiEvents } from "~/signals";
 import { promptStrength } from "~/signals/uiEvents/promptSettings";
 
 export const SignaledPromptSlider = () => {
+  const sliderValue = promptStrength.value;
+  const onSliderValueChanged =
+    dispatchUiEvents.promptSettings.setPromptStrength;
 
-    const sliderValue = promptStrength.value
-    const onSliderValueChanged = dispatchUiEvents.promptSettings.setPromptStrength
+  // This makes component re-render whenever the signal value changes
+  useSignalEffect(() => {
+    promptStrength.value;
+  });
 
-    // This makes component re-render whenever the signal value changes
-    useSignalEffect(() => {
-        promptStrength.value;
-    })
-
-    return (
-        <div className="fixed bottom-80 left-1/2 -translate-x-1/2 h-4 w-96">
-            <Slider min={0} max={100} value={sliderValue} onChange={onSliderValueChanged} step={1} />
-        </div>
-    )
-}
+  return (
+    <div className="fixed bottom-[138px] left-1/2 h-4 w-[400px] -translate-x-1/2 shadow-lg">
+      <Slider
+        min={0}
+        max={100}
+        value={sliderValue}
+        onChange={onSliderValueChanged}
+        step={1}
+        innerLabel={`Strength - ${sliderValue}%`}
+      />
+    </div>
+  );
+};

frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx

@@ -1,31 +1,17 @@
 import { useSignalEffect } from "@preact/signals-react";
-import { useCallback, useEffect, useRef } from "react";
+import { useRef } from "react";
 import { ResizeType, Textarea } from "~/components/ui";
 import { dispatchUiEvents } from "~/signals";
 import { promptText } from "~/signals/uiEvents/promptSettings";
 
-export const SignaledPromptText = ({
-}) => {
+export const SignaledPromptText = ({}) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const focusOnTextArea = useCallback(() => {
-    if (textAreaRef.current === null) {
-      return;
-    }
-    textAreaRef.current.focus();
-  }, []);
-  
-  useEffect(() => {
-    focusOnTextArea();
-  }, []);
 
   const TextAreaStates = {
-    style: {
-      width: "530px",
-      height: "200px",
-    },
-    placeholder: "",
+    placeholder: "Type your prompt here...",
     label: "",
     resize: "none" as ResizeType,
+    rows: 3,
   };
 
   const textContent = promptText.value;
@@ -36,11 +22,18 @@ export const SignaledPromptText = ({
   // This makes component re-render whenever the signal value changes
   useSignalEffect(() => {
     promptText.value;
-  })
+  });
 
   return (
-    <div className="fixed bottom-24 left-1/2 -translate-x-1/2">
-      <Textarea {...TextAreaStates} ref={textAreaRef} onChange={onTextChanged} value={textContent} />
+    <div className="fixed bottom-5 left-1/2 w-[400px] -translate-x-1/2 text-[16px] font-medium shadow-lg">
+      <Textarea
+        className="glass rounded-xl"
+        {...TextAreaStates}
+        ref={textAreaRef}
+        onChange={onTextChanged}
+        value={textContent}
+        spellCheck={false}
+      />
     </div>
   );
 };

frontend/realtime/src/KonvaRootComponent/SignaledToolbarMain.tsx

@@ -50,6 +50,13 @@ export const SignaledToolbarMain = ({
         return () => dispatchUiEvents.addShapeToEngine({ shape: "triangle" });
       case ToolbarMainButtonNames.ADD_SQUARE:
         return () => dispatchUiEvents.addShapeToEngine({ shape: "square" });
+      case ToolbarMainButtonNames.SELECT:
+      case ToolbarMainButtonNames.ERASER:
+      case ToolbarMainButtonNames.PAINT:
+        return (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          toolbarMain.setMode(buttonName);
+          dispatchers[buttonName](e);
+        };
       default:
         return dispatchers[buttonName];
     }
@@ -76,7 +83,7 @@ export const SignaledToolbarMain = ({
     dispatchers.loadingBarRetry(e);
   };
   return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2">
+    <div className="fixed left-4 top-1/2 -translate-y-1/2">
       <Transition
         as="div"
         className={twMerge(

frontend/realtime/src/app/global.css

@@ -4,10 +4,11 @@
 
 @layer base {
   :root {
-    @apply bg-ui-background font-sans text-[#222222];
+    @apply bg-ui-background font-sans text-white;
   }
   .pegboard {
-    background-image: radial-gradient(#3f3f466b 1px, transparent 0);
+    background-image: radial-gradient(#ffffff25 1px, transparent 0);
+    background-color: #1b1b1f;
     background-size: 36px 36px;
     @apply bg-center;
   }
@@ -41,7 +42,24 @@
   }
 
   input {
-    @apply border-0 px-2 py-1 outline-none -outline-offset-2 focus:outline-primary-500 focus:ring-0;
+    @apply bg-ui-controls border-0 px-2 py-1 outline-none -outline-offset-2 focus:outline-primary-500 focus:ring-0;
+  }
+
+  textarea {
+    @apply bg-ui-controls placeholder:text-white/50;
+
+    /* Webkit scrollbar styles */
+    &::-webkit-scrollbar {
+      @apply w-1;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply rounded-full bg-white/20 hover:bg-white/30;
+    }
   }
 }
 
@@ -87,6 +105,11 @@
     background-position: 100% 0;
     animation: highlight-sweep 3s infinite linear;
   }
+
+  .glass {
+    @apply relative border border-ui-border shadow-lg backdrop-blur-xl transition-colors duration-300;
+    @apply bg-ui-controls/50 hover:bg-ui-controls/90 !important;
+  }
 }
 
 @keyframes glow {

frontend/realtime/src/app/pages/main/index.tsx

@@ -8,6 +8,7 @@ import { ToolbarUserProfile } from "~/components/features";
 //Components of the Konva App are all in the KonvaComponent
 import { KonvaRootComponent } from "~/KonvaRootComponent";
 import { ToolbarTopLeft } from "~/components/features/ToolbarTopLeft";
+import { ToolbarTopRight } from "~/components/features/ToolbarTopRight";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -25,6 +26,7 @@ export const Main = withProtectionRoute(() => {
       />
       <div className="absolute top-0 flex w-full justify-between px-2">
         <ToolbarTopLeft />
+        <ToolbarTopRight />
         {/* <ToolbarUserProfile /> */}
       </div>
     </div>

frontend/realtime/src/components/features/DialogAddImage/DialogAddImage.tsx

@@ -52,7 +52,7 @@ export const DialogAddImage = ({
             "w-full max-w-2xl",
           )}
         >
-          <DialogTitle className="text-3xl font-bold">Upload Image</DialogTitle>
+          <DialogTitle className="text-2xl font-bold">Upload Image</DialogTitle>
           <div className="flex flex-col rounded-lg border-2 border-dashed border-ui-border">
             <FileUploader
               title=""

frontend/realtime/src/components/features/DialogEditText/DialogEditText.tsx

@@ -73,7 +73,7 @@ export const DialogEditText = ({
     <Dialog open={isOpen} onClose={closeCallback} className="relative z-50">
       <div className={dialogBackgroundStyles}>
         <DialogPanel className={twMerge(paperWrapperStyles, dialogPanelStyles)}>
-          <DialogTitle className="text-3xl font-bold">Edit Text</DialogTitle>
+          <DialogTitle className="text-2xl font-bold">Edit Text</DialogTitle>
           <TextEditor
             text={text}
             formatData={textFormatData}

frontend/realtime/src/components/features/FileUploader/DragAndDropZone.tsx

@@ -24,7 +24,7 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => {
 
   // const fileName = file && getFileName(file).toUpperCase();
   const wrapperClassName = twMerge(
-    "group cursor-pointer px-6 py-12 bg-gray-100 hover:bg-gray-200/60 transition-colors duration-150 ease-in-out",
+    "group cursor-pointer px-6 py-12 bg-ui-controls hover:bg-white/25 transition-colors duration-150 ease-in-out rounded-lg",
     !file && "flex flex-col items-center justify-center gap-",
     file && "flex items-center gap-2 py-6",
     // "rounded-lg border-2 border-dashed border-ui-border",

frontend/realtime/src/components/features/ToolbarButton.tsx

@@ -44,12 +44,12 @@ export const ToolbarButton = ({
   }
 
   const mergedButtonClasses = twMerge(
-    "rounded-lg py-2 px-3 hover:bg-gray-200/50 transition-all duration-100",
-    children ? "w-fit flex items-center gap-2 text-nowrap" : "size-10",
-    active && "pointer-events-none text-primary ",
+    "rounded-lg hover:bg-white/15 transition-all duration-100 border-2 border-transparent text-white/80 px-2",
+    children ? "w-fit flex items-center gap-2.5 text-nowrap" : "size-10",
+    active && "bg-primary/30 border-2 border-primary hover:bg-primary/30",
     disabled && "pointer-events-none text-secondary-300",
     buttonProps.prominent &&
-      "highlight-button border border-primary-400/30 text-primary-500 hover:bg-primary-100/40 hover:border-primary-400/60",
+      "border border-primary-400/30 text-primary-500 hover:bg-primary-100/40 hover:border-primary-400/60",
     customButtonClassNames,
   );
 
@@ -57,6 +57,7 @@ export const ToolbarButton = ({
     <button
       className={mergedButtonClasses}
       disabled={disabled}
+      autoFocus={false}
       {...restButtonProps}
       onClick={(e) => {
         e.preventDefault();
@@ -73,7 +74,11 @@ export const ToolbarButton = ({
     </button>
   );
   if (tooltip) {
-    return <Tooltip tip={tooltip}>{Button}</Tooltip>;
+    return (
+      <Tooltip position="right" tip={tooltip}>
+        {Button}
+      </Tooltip>
+    );
   }
   return Button;
 };

frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx

@@ -1,29 +1,27 @@
-import { Fragment, MouseEventHandler } from "react";
-import { twMerge } from "tailwind-merge";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowRotateLeft,
   faArrowRotateRight,
   faCircle,
+  faEraser,
   faFilePlus,
-  faFilm,
-  faFloppyDisk,
   faImage,
   faLocationArrow,
-  faMagicWandSparkles,
+  faPaintbrush,
   faShapes,
   faSquare,
   faText,
   faTriangle,
 } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Fragment, MouseEventHandler } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { ToolbarButton } from "../ToolbarButton";
 
 // style and constants
 import { paperWrapperStyles, toolTipStyles } from "~/components/styles";
 import { ToolbarMainButtonNames } from "./enum";
-import { ButtonPreviewAndRender } from "./ButtonPreviewAndRender";
 
 export const ToolbarMain = ({
   disabled = false,
@@ -42,13 +40,14 @@ export const ToolbarMain = ({
     <>
       <div
         className={twMerge(
-          "flex w-fit items-center divide-x divide-ui-border",
+          "flex h-fit flex-col items-center gap-y-2",
           paperWrapperStyles,
+          "glass",
           disabled &&
-          "pointer-events-none cursor-default bg-ui-border shadow-md",
+            "pointer-events-none cursor-default bg-ui-border shadow-md",
         )}
       >
-        <div className="flex items-center gap-2 pr-2">
+        <div className="flex flex-col items-center gap-2">
           <ToolbarButton
             icon={faLocationArrow}
             iconProps={{ className: "fa-flip-horizontal" }}
@@ -62,62 +61,111 @@ export const ToolbarMain = ({
           />
 
           <Popover className="relative">
-            <PopoverButton as={Fragment}>
-              <button
-                data-tooltip="Add Shapes"
-                className={twMerge(
-                  "size-10 rounded-lg p-2 hover:bg-gray-200/50",
-                  toolTipStyles,
-                )}
-              >
-                <FontAwesomeIcon icon={faShapes} />
-              </button>
-            </PopoverButton>
-            <PopoverPanel
-              anchor="bottom"
-              className={twMerge(
-                // "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2",
-                "flex flex-col [--anchor-gap:16px]",
-                paperWrapperStyles,
-              )}
-            >
-              <ToolbarButton icon={faSquare} buttonProps={buttonProps.ADD_SQUARE} />
-              <ToolbarButton icon={faCircle} buttonProps={buttonProps.ADD_CIRCLE} />
-              <ToolbarButton icon={faTriangle} buttonProps={buttonProps.ADD_TRIANGLE} />
-            </PopoverPanel>
+            {({ close }) => (
+              <>
+                <PopoverButton as={Fragment}>
+                  <button
+                    data-tooltip="Add Shapes"
+                    className={twMerge(
+                      "size-10 rounded-lg border-2 border-transparent text-white/80 transition-all duration-100 hover:bg-white/15",
+                      toolTipStyles.base,
+                      toolTipStyles.right,
+                    )}
+                  >
+                    <FontAwesomeIcon icon={faShapes} />
+                  </button>
+                </PopoverButton>
+                <PopoverPanel
+                  anchor="right"
+                  className={twMerge(
+                    "flex flex-row [--anchor-gap:12px]",
+                    paperWrapperStyles,
+                  )}
+                >
+                  <ToolbarButton
+                    icon={faSquare}
+                    buttonProps={{
+                      ...buttonProps.ADD_SQUARE,
+                      onClick: (e) => {
+                        buttonProps.ADD_SQUARE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                  <ToolbarButton
+                    icon={faCircle}
+                    buttonProps={{
+                      ...buttonProps.ADD_CIRCLE,
+                      onClick: (e) => {
+                        buttonProps.ADD_CIRCLE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                  <ToolbarButton
+                    icon={faTriangle}
+                    buttonProps={{
+                      ...buttonProps.ADD_TRIANGLE,
+                      onClick: (e) => {
+                        buttonProps.ADD_TRIANGLE.onClick?.(e);
+                        close();
+                      },
+                    }}
+                  />
+                </PopoverPanel>
+              </>
+            )}
           </Popover>
 
           <Popover className="relative">
             <PopoverButton as={Fragment}>
               <button
-                data-tooltip="Add..."
+                data-tooltip="Add Media"
                 className={twMerge(
-                  "size-10 rounded-lg p-2 hover:bg-gray-200/50",
-                  toolTipStyles,
+                  "size-10 rounded-lg border-2 border-transparent text-white/80 transition-all duration-100 hover:bg-white/15",
+                  toolTipStyles.base,
+                  toolTipStyles.right,
                 )}
               >
                 <FontAwesomeIcon icon={faFilePlus} />
               </button>
             </PopoverButton>
             <PopoverPanel
-              anchor="bottom"
+              anchor="right"
               className={twMerge(
                 // "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2",
-                "flex flex-col [--anchor-gap:16px]",
+                "flex [--anchor-gap:12px]",
                 paperWrapperStyles,
               )}
             >
               <ToolbarButton icon={faImage} buttonProps={buttonProps.ADD_IMAGE}>
-                Add Image
+                <span className="text-[16px]">Add Image</span>
               </ToolbarButton>
               {/* <ToolbarButton icon={faFilm} buttonProps={buttonProps.ADD_VIDEO}>
                 Add Video
               </ToolbarButton> */}
             </PopoverPanel>
           </Popover>
-
         </div>
-        <div className="flex items-center gap-2 pl-2">
+
+        <hr className="w-full border-t border-white/15" />
+
+        <div className="flex flex-col items-center gap-2">
+          <ToolbarButton
+            icon={faPaintbrush}
+            buttonProps={buttonProps.PAINT}
+            tooltip="Paint Brush"
+          />
+          <ToolbarButton
+            icon={faEraser}
+            buttonProps={buttonProps.ERASER}
+            tooltip="Eraser"
+          />
+        </div>
+
+        <hr className="w-full border-t border-white/15" />
+
+        <div className="flex flex-col items-center gap-2">
           <ToolbarButton
             icon={faArrowRotateLeft}
             buttonProps={buttonProps.UNDO}
@@ -128,15 +176,11 @@ export const ToolbarMain = ({
             buttonProps={buttonProps.REDO}
             tooltip="Redo"
           />
-          <ToolbarButton
+          {/* <ToolbarButton
             icon={faFloppyDisk}
             buttonProps={buttonProps.SAVE}
             tooltip="Save"
-          />
-          <ButtonPreviewAndRender
-            buttonPreviewProps={buttonProps.PREVIEW}
-            buttonRenderProps={buttonProps.DOWNLOAD}
-          />
+          /> */}
         </div>
       </div>
     </>

frontend/realtime/src/components/features/ToolbarMain/enum.ts

@@ -7,6 +7,8 @@ export enum ToolbarMainButtonNames {
   ADD_CIRCLE = "ADD_CIRCLE",
   ADD_TRIANGLE = "ADD_TRIANGLE",
   ADD_SQUARE = "ADD_SQUARE",
+  PAINT = "PAINT",
+  ERASER = "ERASER",
   AI_STYLIZE = "AI_STYLIZE",
   UNDO = "UNDO",
   REDO = "REDO",

frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx

@@ -1,28 +1,27 @@
 import { twMerge } from "tailwind-merge";
 
-import { paperWrapperStyles } from "~/components/styles";
-import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
-import { ToolbarButton } from "~/components/features/ToolbarButton";
+// import { paperWrapperStyles } from "~/components/styles";
+// import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
+// import { ToolbarButton } from "~/components/features/ToolbarButton";
 
 export const ToolbarTopLeft = () => {
   return (
     <div
       className={twMerge(
-        paperWrapperStyles,
         "z-20 mt-2 flex h-fit w-fit items-center gap-1 py-2.5 pl-4",
       )}
     >
       <img
-        src="/brand/Storyteller-Logo-Black.png"
+        src="/brand/mira-logo.png"
         alt="logo"
-        className="mr-4 h-8"
+        className="h-[30px] select-none pb-1"
       />
-      <ToolbarButton icon={faPlus}>
+      {/* <ToolbarButton icon={faPlus}>
         <span className="font-semibold">New Board</span>
       </ToolbarButton>
       <ToolbarButton icon={faQuestion}>
         <span className="font-semibold">Help</span>
-      </ToolbarButton>
+      </ToolbarButton> */}
     </div>
   );
 };

frontend/realtime/src/components/features/ToolbarTopRight/index.tsx

@@ -0,0 +1,31 @@
+import { faSave } from "@fortawesome/pro-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+import { Button } from "~/components/ui/Button";
+import { toolbarMain } from "~/signals/uiAccess/toolbarMain";
+import { dispatchers } from "~/signals/uiEvents/toolbarMain";
+import { ToolbarMainButtonNames } from "../ToolbarMain/enum";
+
+// import { paperWrapperStyles } from "~/components/styles";
+// import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
+// import { ToolbarButton } from "~/components/features/ToolbarButton";
+
+export const ToolbarTopRight = () => {
+  const saveButtonState =
+    toolbarMain.signal.value.buttonStates[ToolbarMainButtonNames.SAVE];
+
+  return (
+    <div
+      className={twMerge(
+        "z-20 mt-2 flex h-fit w-fit items-center gap-1 p-4 py-2.5",
+      )}
+    >
+      <Button
+        icon={faSave}
+        onClick={dispatchers[ToolbarMainButtonNames.SAVE]}
+        disabled={saveButtonState?.disabled}
+      >
+        Save Image
+      </Button>
+    </div>
+  );
+};

frontend/realtime/src/components/styles.ts

@@ -1,26 +1,35 @@
 import { twMerge } from "tailwind-merge";
 
 export const paperWrapperStyles =
-  "rounded-xl border border-ui-border bg-ui-panel p-2 shadow-lg";
+  "rounded-xl border border-ui-border p-1.5 shadow-lg bg-ui-panel";
 
 export const transitionTimingStyles = "transition duration-150 ease-in-out";
 
 export const dialogBackgroundStyles =
   "fixed inset-0 flex w-screen items-center justify-center bg-black/50";
 
-export const toolTipStyles = twMerge(
-  "relative",
-  "before:w-0 before:h-0 before:absolute",
-  "before:left-1/2 before:bottom-full before:mb-[1px] before:-translate-x-1/2 before:z-50",
-  "before:border-l-8 before:border-l-transparent",
-  "before:border-r-8 before:border-r-transparent",
-  "before:border-t-8 before:border-t-white",
-  "after:absolute after:left-1/2 after:bottom-full after:-translate-x-1/2 after:z-40",
-  "after:content-[attr(data-tooltip)] after:text-black after:text-nowrap",
-  "after:rounded-lg after:border after:border-ui-border after:bg-ui-panel after:px-2.5 after:py-1.5 after:mb-2 after:shadow-xl",
-  "after:hidden before:hidden hover:after:block hover:before:block",
-);
+export const toolTipStyles = {
+  base: twMerge(
+    "relative",
+    "after:absolute after:z-40",
+    "after:content-[attr(data-tooltip)] after:text-black after:text-nowrap after:text-sm after:font-medium after:text-white/80 after:glass",
+    "after:rounded-lg after:border after:border-ui-border after:bg-ui-panel after:px-2.5 after:py-1 after:shadow-xl",
+    "after:hidden hover:after:block",
+  ),
+  top: twMerge(
+    "after:left-1/2 after:bottom-full after:-translate-x-1/2 after:mb-3.5",
+  ),
+  bottom: twMerge(
+    "after:left-1/2 after:top-full after:-translate-x-1/2 after:mt-3.5",
+  ),
+  left: twMerge(
+    "after:top-1/2 after:right-full after:-translate-y-1/2 after:mr-3.5",
+  ),
+  right: twMerge(
+    "after:top-1/2 after:left-full after:-translate-y-1/2 after:ml-3.5",
+  ),
+};
 
 export const dialogPanelStyles = twMerge(
-  "flex max-w-5xl flex-col justify-between gap-4 p-6",
+  "flex max-w-5xl flex-col justify-between gap-4 p-6 bg-[#1C1C20]",
 );

frontend/realtime/src/components/ui/Button.tsx

@@ -31,14 +31,14 @@ export const Button = ({
         return "bg-tertiary hover:bg-tertiary-400 text-white focus-visible:outline-tertiary-600";
       }
       case "secondary": {
-        return "bg-gray-600 hover:bg-gray-500 text-white focus-visible:outline-secondary";
+        return "bg-ui-controls hover:bg-ui-controls/80 text-white focus-visible:outline-secondary";
       }
       case "action": {
         return " bg-action hover:bg-action-500 text-white focus-visible:outline-action";
       }
       case "primary":
       default: {
-        return "bg-primary hover:bg-primary-400 text-white focus-visible:outline-primary-600";
+        return "bg-primary hover:bg-primary-600 text-white focus-visible:outline-primary-600";
       }
     }
   }

frontend/realtime/src/components/ui/ComboBox.tsx

@@ -29,25 +29,25 @@ export const Combobox = ({ options, value, onChange }: ComboBoxInterface) => {
       onChange={onChange}
       onClose={() => setQuery("")}
     >
-      <div className="relative flex h-10 rounded-md border">
+      <div className="relative flex h-10 rounded-md border border-ui-border">
         <ComboboxInput
-          className="rounded-md"
+          className="rounded-lg px-3"
           displayValue={(font: string) => font}
           onChange={(event) => setQuery(event.target.value)}
         />
-        <ComboboxButton className="absolute right-0 top-0 flex h-10 items-center justify-center hover:text-primary">
-          <FontAwesomeIcon icon={faChevronDown} className="size-4 p-2" />
+        <ComboboxButton className="absolute right-0 top-0 flex h-10 items-center justify-center px-3 transition-colors duration-300 hover:text-primary">
+          <FontAwesomeIcon icon={faChevronDown} className="size-4" />
         </ComboboxButton>
       </div>
       <ComboboxOptions
         anchor="bottom"
-        className="mt-1 w-[var(--input-width)] rounded-lg border empty:invisible"
+        className="mt-1 w-[var(--input-width)] rounded-lg border border-ui-border empty:invisible"
       >
         {filteredOptions.map((option, idx) => (
           <ComboboxOption
             key={idx}
             value={option}
-            className="cursor-pointer bg-white p-2 data-[focus]:bg-primary-200 data-[selected]:font-medium"
+            className="bg-ui-controls cursor-pointer px-3 py-2 data-[focus]:bg-gray-600 data-[selected]:font-medium"
           >
             {option}
           </ComboboxOption>

frontend/realtime/src/components/ui/Slider.tsx

@@ -12,6 +12,7 @@ interface SliderProps {
   showTooltip?: boolean;
   tooltipContent?: ReactNode;
   suffix?: string;
+  innerLabel?: string;
 }
 
 export const Slider = ({
@@ -24,6 +25,7 @@ export const Slider = ({
   showTooltip,
   tooltipContent,
   suffix,
+  innerLabel,
 }: SliderProps) => {
   const [localValue, setLocalValue] = useState(value);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -88,25 +90,40 @@ export const Slider = ({
     <div
       ref={sliderRef}
       className={twMerge(
-        "relative h-2.5 w-full cursor-pointer rounded-full bg-gray-500",
+        "glass group relative h-7 w-full cursor-pointer overflow-hidden rounded-lg border border-ui-border",
+        isDragging && "!bg-ui-controls/90",
         className,
       )}
       onMouseDown={handleMouseDown}
     >
-      <div
-        className="absolute h-2.5 rounded-full bg-primary"
-        style={{ width: `${percentage}%` }}
-      ></div>
       <div
         className={twMerge(
-          "absolute -top-1 h-[18px] w-[18px] -translate-x-1/2 transform rounded-full bg-gray-200 transition-colors",
-          isDragging ? "bg-white" : "bg-gray-300 hover:bg-white",
+          "absolute h-7 bg-primary/30 transition-colors duration-300 group-hover:bg-primary/50",
+          isDragging && "!bg-primary/50",
         )}
-        style={{ left: `${percentage}%` }}
-        onMouseDown={handleMouseDown}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      />
+        style={{ width: `${percentage}%` }}
+      >
+        {innerLabel && (
+          <span
+            className={twMerge(
+              "absolute top-1/2 ml-2.5 -translate-y-1/2 text-nowrap text-sm font-medium text-white/60 transition-colors duration-300 group-hover:text-white",
+              isDragging && "!text-white",
+            )}
+          >
+            {innerLabel}
+          </span>
+        )}
+        <div
+          className={twMerge(
+            "absolute right-0 top-1/2 mr-1.5 h-3.5 w-0.5 -translate-y-1/2",
+            isDragging ? "bg-white" : "bg-white/50",
+          )}
+          onMouseDown={handleMouseDown}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+      </div>
+
       {showTooltip && (
         <Transition
           as={"div"}

frontend/realtime/src/components/ui/TextArea.tsx

@@ -15,7 +15,7 @@ const resizeStyles = {
   horizontal: "resize-x",
   vertical: "resize-y",
   undefined: "",
-}
+};
 
 export interface TextareaInterface
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -27,7 +27,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
     { className, label, resize = "vertical", id, ...rest }: TextareaInterface,
     ref,
   ) => {
-
     const resizeStyle = resizeStyles[resize];
 
     return (
@@ -38,17 +37,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
           ref={ref}
           id={id ? id : label ? kebabCase(label) : undefined}
           className={twMerge(
-            "border-ui-panel-border bg-ui-controls rounded-lg border px-3 py-2",
+            "rounded-lg border border-ui-border px-4 py-2.5 text-white outline-none focus:outline-none",
             className,
             resizeStyle,
           )}
           style={{
             outline: "2px solid transparent",
-            transition: "outline-color 0.15s ease-in-out",
           }}
           onFocus={(e) => {
             // disableHotkeyInput(DomLevels.INPUT);
-            e.currentTarget.style.outlineColor = "#e66462";
+            e.currentTarget.style.outlineColor = "#2d81ff";
           }}
           onBlur={(e) => {
             // enableHotkeyInput(DomLevels.INPUT);

frontend/realtime/src/components/ui/TextEditor/ButtonsAlignment.tsx

@@ -1,6 +1,6 @@
 import {
   faAlignCenter,
-  faAlignJustify,
+  // faAlignJustify,
   faAlignLeft,
   faAlignRight,
 } from "@fortawesome/pro-solid-svg-icons";

frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx

@@ -1,6 +1,10 @@
 import { ChangeEvent, useState } from "react";
 import { twMerge } from "tailwind-merge";
-import { faFont, faHashtag, IconDefinition } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faFont,
+  faHashtag,
+  IconDefinition,
+} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { HexColorPicker } from "react-colorful";
@@ -13,7 +17,7 @@ export const ColorPicker = ({
   color: prevColor,
   onChange,
   faIcon = faFont,
-  borderStyle = "border",
+  borderStyle,
   showBar = true,
 }: {
   color: string;
@@ -53,12 +57,16 @@ export const ColorPicker = ({
 
   return (
     <Popover className="relative">
-      <PopoverButton className={twMerge(
-        "flex size-10 flex-col items-center gap-1 rounded-md p-2",
-        borderStyle
-      )}>
+      <PopoverButton
+        className={twMerge(
+          "bg-ui-controls flex size-10 flex-col items-center gap-1 rounded-md p-2",
+          borderStyle,
+        )}
+      >
         <FontAwesomeIcon icon={faIcon} color={prevColor} />
-        {showBar && <span className="h-1 w-full" style={{ backgroundColor: prevColor }} />}
+        {showBar && (
+          <span className="h-1 w-full" style={{ backgroundColor: prevColor }} />
+        )}
       </PopoverButton>
       <PopoverPanel
         anchor="bottom"

frontend/realtime/src/components/ui/TextEditor/TextEditor.tsx

@@ -151,7 +151,11 @@ export const TextEditor = ({
           onChangeTextDecoration={onChangeTextDecoration}
         />
       </div>
-      <Textarea {...unionedTextAreaProps} ref={textAreaRef} />
+      <Textarea
+        className="bg-white"
+        {...unionedTextAreaProps}
+        ref={textAreaRef}
+      />
     </div>
   );
 };

frontend/realtime/src/components/ui/TextEditor/styles.ts

@@ -1,4 +1,4 @@
 export const buttonGroupButton =
-  "size-10 rounded-none bg-white text-black hover:bg-gray-200 data-[selected=true]:text-primary-400 disabled:hover:bg-transparent disabled:text-gray-400";
+  "size-10 rounded-none bg-ui-controls text-white/80 hover:bg-white/30 data-[selected=true]:text-white data-[selected=true]:bg-primary/30 disabled:hover:bg-transparent disabled:text-gray-400 border border-ui-border";
 export const buttonGroupGrouper =
-  "flex divide-x overflow-hidden rounded-md border";
+  "flex divide-x overflow-hidden rounded-md border border-ui-border";

frontend/realtime/src/components/ui/Tooltip.tsx

@@ -7,15 +7,18 @@ export const Tooltip = ({
   tip,
   children,
   forceShow,
+  position = "top",
 }: {
   tip: string;
   children: ReactElement<any, string | JSXElementConstructor<any>>;
   forceShow?: boolean;
+  position?: "top" | "bottom" | "left" | "right";
 }) => {
   const clonedChildren = cloneElement(children, {
     "data-tooltip": tip,
     className: twMerge(
-      toolTipStyles,
+      toolTipStyles.base,
+      toolTipStyles[position],
       forceShow && "after:block before:block",
       children.props.className,
     ),

frontend/realtime/src/signals/uiAccess/toolbarMain/toolbarMain.ts

@@ -1,5 +1,6 @@
 import { signal } from "@preact/signals-react";
 import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
+import { isToolbarMode } from "~/signals/uiEvents/toolbarMain/toolbarMain";
 
 interface ToolbarMainSignalInterface {
   disabled: boolean;
@@ -42,6 +43,17 @@ export const toolbarMain = {
       },
     };
   },
+
+  setMode(mode: ToolbarMainButtonNames) {
+    if (!isToolbarMode(mode)) {
+      return;
+    }
+
+    this.changeButtonState(ToolbarMainButtonNames.SELECT, { active: false });
+    this.changeButtonState(ToolbarMainButtonNames.ERASER, { active: false });
+    this.changeButtonState(ToolbarMainButtonNames.PAINT, { active: false });
+    this.changeButtonState(mode, { active: true });
+  }
 };
 
 function initButtonStates() {

frontend/realtime/src/signals/uiEvents/toolbarMain/toolbarMain.ts

@@ -2,6 +2,7 @@ import { MouseEventHandler } from "react";
 import { signal, effect, Signal } from "@preact/signals-react";
 
 import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
+import { AppModes } from "~/KonvaApp/constants";
 
 const events = Object.values(ToolbarMainButtonNames).reduce(
   (acc, buttonName) => {
@@ -25,22 +26,35 @@ const effectsCleanups = Object.values(ToolbarMainButtonNames).reduce(
     [key in ToolbarMainButtonNames]: (() => void) | undefined;
   },
 );
+
+export const isToolbarMode = (buttonName: ToolbarMainButtonNames) => {
+  return appModeMap[buttonName] !== undefined;
+}
+
+export const appModeMap: Record<string, AppModes> = {
+  [ToolbarMainButtonNames.SELECT]: AppModes.SELECT,
+  [ToolbarMainButtonNames.ERASER]: AppModes.ERASER,
+  [ToolbarMainButtonNames.PAINT]: AppModes.PAINT,
+}
+
+const defaultHandler = (buttonName: ToolbarMainButtonNames, callback: MouseEventHandler<HTMLButtonElement>) => {
+  if (effectsCleanups[buttonName]) {
+    effectsCleanups[buttonName]();
+  }
+  effectsCleanups[buttonName] = effect(() => {
+    if (events[buttonName].value) {
+      callback(events[buttonName].value);
+      events[buttonName].value = undefined;
+    }
+  });
+}
+
 export const buttonEventsHandlers = Object.values(
   ToolbarMainButtonNames,
 ).reduce(
   (acc, buttonName) => {
     acc[buttonName] = {
-      onClick: (callback: MouseEventHandler<HTMLButtonElement>) => {
-        if (effectsCleanups[buttonName]) {
-          effectsCleanups[buttonName]();
-        }
-        effectsCleanups[buttonName] = effect(() => {
-          if (events[buttonName].value) {
-            callback(events[buttonName].value);
-            events[buttonName].value = undefined;
-          }
-        });
-      },
+      onClick: (callback: MouseEventHandler<HTMLButtonElement>) => { defaultHandler(buttonName, callback) },
     };
     return acc;
   },

frontend/realtime/tailwind.config.js

@@ -44,14 +44,15 @@ export default {
       info: colors.sky[500],
 
       // brand colors
-      primary: storytellerColors.sunglo,
+      primary: storytellerColors.azureRadiance,
       secondary: storytellerColors.gunpowder,
       tertiary: storytellerColors.aquamarineBlue,
 
       ui: {
-        background: colors.zinc[100],
-        panel: colors.white,
-        border: colors.zinc[200],
+        background: "#101014",
+        panel: "#3E3E41",
+        border: "#FFFFFF0D",
+        controls: "#3E3E41",
       },
     },
     backgroundImage: {

frontend/realtime/tailwind.stcolors.js

@@ -1,19 +1,19 @@
 export const storytellerColors = {
-  sunglo: {
-    //sunglo
-    DEFAULT: "#e66462", //=500
-    50: "#fdf3f3",
-    100: "#fce4e4",
-    200: "#facfce",
-    300: "#f6acab",
-    400: "#ef7c7a",
-    500: "#e66462",
-    600: "#cf3533",
-    700: "#ae2927",
-    800: "#902624",
-    900: "#782524",
-    950: "#410f0e",
+  azureRadiance: {
+    DEFAULT: "#2d81ff", //=500
+    50: "#eef6ff",
+    100: "#d9ebff",
+    200: "#bcdcff",
+    300: "#8ec7ff",
+    400: "#59a7ff",
+    500: "#2d81ff",
+    600: "#1b63f5",
+    700: "#144ee1",
+    800: "#173fb6",
+    900: "#19398f",
+    950: "#142457",
   },
+
   gunpowder: {
     DEFAULT: "#39394c", //=950
     50: "#f5f6f9",