fix: changed component colors name to not override existing colors, fixed responsiveness issues on main, playground and nav (#4482)

* Changed description color * Updated edge colors * updated color of output inspection * Updated handle position to work with every case * Open sidebar on filter * Fixed empty folder on top of the sidebar * Fix app header responsitivity * Changed mobile playground showing * Changed color name to datatype * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-08 18:10:18 -03:00 · 2024-11-08 18:10:18 -03:00 · f32360fea8
commit f32360fea8
parent 8681c56cdc
17 changed files with 251 additions and 317 deletions
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@ -133,27 +133,8 @@ body {
  outline: none;
 }

-:root {
-  --selected: #2196f3;
-}
-
-.dark {
-  --selected: #0369a1;
-}
-
-/* selected */
-:root {
-  --selected-light: var(--selected, #2196f3);
-  --selected-dark: var(--selected, #0369a1);
-}
-
 .react-flow__edge.selected .react-flow__edge-path {
-  stroke: var(--selected-light) !important;
-  stroke-width: 2px !important;
-}
-
-:root.dark .react-flow__edge.selected .react-flow__edge-path {
-  stroke: var(--selected-dark) !important;
+  stroke: var(--selected) !important;
  stroke-width: 2px !important;
 }

--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
@ -134,7 +134,7 @@ export default function NodeDescription({
          data-testid="generic-node-desc"
          ref={overflowRef}
          className={cn(
-            "nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] word-break-break-word",
+            "nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] text-muted-foreground word-break-break-word",
            description === "" || !description ? "font-light italic" : "",
            placeholderClassName,
          )}
@ -149,7 +149,7 @@ export default function NodeDescription({
            <Markdown
              linkTarget="_blank"
              className={cn(
-                "markdown prose flex h-full w-full flex-col text-[13px] leading-5 text-foreground word-break-break-word",
+                "markdown prose flex h-full w-full flex-col text-[13px] leading-5 word-break-break-word",
                mdClassName,
              )}
            >
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@ -216,7 +216,7 @@ export default function NodeOutputField({
                        className={cn(
                          "icon-size",
                          displayOutputPreview && !unknownOutput
-                            ? "text-placeholder-foreground hover:text-foreground"
+                            ? "text-foreground hover:text-primary-hover"
                            : "cursor-not-allowed text-placeholder-foreground opacity-60",
                          errorOutput ? "text-destructive" : "",
                        )}
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@ -218,7 +218,7 @@ export default function NodeStatus({
                <div className="max-h-100 p-2">
                  <div className="max-h-80 overflow-auto">
                    {validationString && (
-                      <div className="ml-1 pb-2 text-accent-red-foreground">
+                      <div className="text-accent-red-foreground ml-1 pb-2">
                        {validationString}
                      </div>
                    )}
--- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@ -43,7 +43,7 @@ export default function HandleRenderComponent({
 }) {
  const handleColorName = colorName?.[0] ?? "";

-  const accentColorName = `accent-${handleColorName}`;
+  const accentColorName = `datatype-${handleColorName}`;
  const accentForegroundColorName = `${accentColorName}-foreground`;

  const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
@ -181,7 +181,7 @@ export default function HandleRenderComponent({
            .concat(colorName![0])
            .map(
              (color, index) =>
-                `hsl(var(--accent-${color}))` +
+                `hsl(var(--datatype-${color}))` +
                " " +
                ((360 / colors.length) * index - 360 / (colors.length * 4)) +
                "deg " +
@ -204,33 +204,33 @@ export default function HandleRenderComponent({
        @keyframes pulseNeon {
          0% {
            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
-                        0 0 2px hsl(var(--accent-${colorName![0]})),
-                        0 0 4px hsl(var(--accent-${colorName![0]})),
-                        0 0 6px hsl(var(--accent-${colorName![0]})),
-                        0 0 8px hsl(var(--accent-${colorName![0]})),
-                        0 0 10px hsl(var(--accent-${colorName![0]})),
-                        0 0 15px hsl(var(--accent-${colorName![0]})),
-                        0 0 20px hsl(var(--accent-${colorName![0]}));
+                        0 0 2px hsl(var(--datatype-${colorName![0]})),
+                        0 0 4px hsl(var(--datatype-${colorName![0]})),
+                        0 0 6px hsl(var(--datatype-${colorName![0]})),
+                        0 0 8px hsl(var(--datatype-${colorName![0]})),
+                        0 0 10px hsl(var(--datatype-${colorName![0]})),
+                        0 0 15px hsl(var(--datatype-${colorName![0]})),
+                        0 0 20px hsl(var(--datatype-${colorName![0]}));
          }
          50% {
            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
-                        0 0 4px hsl(var(--accent-${colorName![0]})),
-                        0 0 8px hsl(var(--accent-${colorName![0]})),
-                        0 0 12px hsl(var(--accent-${colorName![0]})),
-                        0 0 16px hsl(var(--accent-${colorName![0]})),
-                        0 0 20px hsl(var(--accent-${colorName![0]})),
-                        0 0 25px hsl(var(--accent-${colorName![0]})),
-                        0 0 30px hsl(var(--accent-${colorName![0]}));
+                        0 0 4px hsl(var(--datatype-${colorName![0]})),
+                        0 0 8px hsl(var(--datatype-${colorName![0]})),
+                        0 0 12px hsl(var(--datatype-${colorName![0]})),
+                        0 0 16px hsl(var(--datatype-${colorName![0]})),
+                        0 0 20px hsl(var(--datatype-${colorName![0]})),
+                        0 0 25px hsl(var(--datatype-${colorName![0]})),
+                        0 0 30px hsl(var(--datatype-${colorName![0]}));
          }
          100% {
            box-shadow: 0 0 0 2px hsl(var(--node-ring)),
-                        0 0 2px hsl(var(--accent-${colorName![0]})),
-                        0 0 4px hsl(var(--accent-${colorName![0]})),
-                        0 0 6px hsl(var(--accent-${colorName![0]})),
-                        0 0 8px hsl(var(--accent-${colorName![0]})),
-                        0 0 10px hsl(var(--accent-${colorName![0]})),
-                        0 0 15px hsl(var(--accent-${colorName![0]})),
-                        0 0 20px hsl(var(--accent-${colorName![0]}));
+                        0 0 2px hsl(var(--datatype-${colorName![0]})),
+                        0 0 4px hsl(var(--datatype-${colorName![0]})),
+                        0 0 6px hsl(var(--datatype-${colorName![0]})),
+                        0 0 8px hsl(var(--datatype-${colorName![0]})),
+                        0 0 10px hsl(var(--datatype-${colorName![0]})),
+                        0 0 15px hsl(var(--datatype-${colorName![0]})),
+                        0 0 20px hsl(var(--datatype-${colorName![0]}));
          }
        }
      `;
@ -264,21 +264,6 @@ export default function HandleRenderComponent({
  const handleRef = useRef<HTMLDivElement>(null);
  const invisibleDivRef = useRef<HTMLDivElement>(null);

-  const getHandleClasses = ({
-    left,
-    showNode,
-  }: {
-    left: boolean;
-    showNode: boolean;
-  }) => {
-    return cn(
-      "noflow nowheel nopan noselect absolute left-3.5 -translate-y-1/2 translate-x-1/3 cursor-crosshair rounded-full",
-      left && "-left-5 -translate-x-1/2",
-      left && !showNode && "-translate-y-5 translate-x-4",
-      !left && !showNode && "-translate-y-5 translate-x-[10.8rem]",
-    );
-  };
-
  const handleClick = () => {
    setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
    setFilterType(currentFilter);
@ -291,104 +276,95 @@ export default function HandleRenderComponent({

  return (
    <div>
-      <div className={`${!showNode ? "" : "relative"}`}>
-        <ShadTooltip
-          open={openTooltip}
-          setOpen={setOpenTooltip}
-          styleClasses={cn(
-            "tooltip-fixed-width custom-scroll nowheel bottom-2 ",
-          )}
-          delayDuration={1000}
-          content={
-            <HandleTooltipComponent
-              isInput={left}
-              tooltipTitle={tooltipTitle}
-              isConnecting={!!filterPresent && !ownHandle}
-              isCompatible={openHandle}
-              isSameNode={sameNode && !ownHandle}
-              accentColorName={accentColorName}
-              accentForegroundColorName={accentForegroundColorName}
-              left={left}
-            />
-          }
-          side={left ? "left" : "right"}
-        >
-          <Handle
-            ref={handleRef}
-            data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
-              !showNode ? (left ? "target" : "source") : left ? "left" : "right"
-            }`}
-            type={left ? "target" : "source"}
-            position={left ? Position.Left : Position.Right}
-            key={myId}
-            id={myId}
-            isValidConnection={(connection) =>
-              isValidConnection(connection, nodes, edges)
-            }
-            className={cn(
-              `group/handle z-50 transition-all`,
-              !showNode && "no-show",
-            )}
-            onClick={handleClick}
-            onMouseUp={() => {
-              setOpenTooltip(false);
-            }}
-            onContextMenu={(event) => {
-              event.preventDefault();
-            }}
-            onMouseDown={(event) => {
-              if (event.button === 0) {
-                setHandleDragging(currentFilter);
-                document.addEventListener("mouseup", handleMouseUp);
-              }
-            }}
-            style={{
-              width: "32px",
-              height: "32px",
-              top: "50%",
-              position: "absolute",
-              zIndex: 30,
-              background: "transparent",
-              border: "none",
-            }}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
+      <ShadTooltip
+        open={openTooltip}
+        setOpen={setOpenTooltip}
+        styleClasses={cn("tooltip-fixed-width custom-scroll nowheel bottom-2 ")}
+        delayDuration={1000}
+        content={
+          <HandleTooltipComponent
+            isInput={left}
+            tooltipTitle={tooltipTitle}
+            isConnecting={!!filterPresent && !ownHandle}
+            isCompatible={openHandle}
+            isSameNode={sameNode && !ownHandle}
+            accentColorName={accentColorName}
+            accentForegroundColorName={accentForegroundColorName}
+            left={left}
          />
-        </ShadTooltip>
-
-        <div
-          data-testid={`div-handle-${testIdComplement}-${title.toLowerCase()}-${
+        }
+        side={left ? "left" : "right"}
+      >
+        <Handle
+          ref={handleRef}
+          data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
            !showNode ? (left ? "target" : "source") : left ? "left" : "right"
          }`}
-          ref={invisibleDivRef}
-          className={getHandleClasses({ left, showNode })}
-          style={{
-            background: isNullHandle ? "hsl(var(--border))" : handleColor,
-            width: "10px",
-            height: "10px",
-            transition: "all 0.2s",
-            boxShadow: getNeonShadow(
-              accentForegroundColorName,
-              isHovered || openHandle,
-            ),
-            animation:
-              (isHovered || openHandle) && !isNullHandle
-                ? "pulseNeon 1.1s ease-in-out infinite"
-                : "none",
-            border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
+          type={left ? "target" : "source"}
+          position={left ? Position.Left : Position.Right}
+          key={myId}
+          id={myId}
+          isValidConnection={(connection) =>
+            isValidConnection(connection, nodes, edges)
+          }
+          className={cn(
+            `group/handle z-50 transition-all`,
+            !showNode && "no-show",
+          )}
+          onClick={handleClick}
+          onMouseUp={() => {
+            setOpenTooltip(false);
          }}
-          onClick={(e) => {
-            handleRef.current?.dispatchEvent(
-              new MouseEvent("mousedown", { bubbles: true }),
-            );
-          }}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
          onContextMenu={(event) => {
            event.preventDefault();
          }}
-        />
-      </div>
+          onMouseDown={(event) => {
+            if (event.button === 0) {
+              setHandleDragging(currentFilter);
+              document.addEventListener("mouseup", handleMouseUp);
+            }
+          }}
+          style={{
+            width: "32px",
+            height: "32px",
+            top: "50%",
+            position: "absolute",
+            zIndex: 30,
+            background: "transparent",
+            border: "none",
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <div
+            data-testid={`div-handle-${testIdComplement}-${title.toLowerCase()}-${
+              !showNode ? (left ? "target" : "source") : left ? "left" : "right"
+            }`}
+            ref={invisibleDivRef}
+            className="noflow nowheel nopan noselect pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 cursor-crosshair rounded-full"
+            style={{
+              background: isNullHandle ? "hsl(var(--border))" : handleColor,
+              width: "10px",
+              height: "10px",
+              transition: "all 0.2s",
+              boxShadow: getNeonShadow(
+                accentForegroundColorName,
+                isHovered || openHandle,
+              ),
+              animation:
+                (isHovered || openHandle) && !isNullHandle
+                  ? "pulseNeon 1.1s ease-in-out infinite"
+                  : "none",
+              border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onContextMenu={(event) => {
+              event.preventDefault();
+            }}
+          />
+        </Handle>
+      </ShadTooltip>
    </div>
  );
 }
--- a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx
@ -63,17 +63,6 @@ export const MenuBar = ({}: {}): JSX.Element => {
  const changesNotSaved =
    customStringify(currentFlow) !== customStringify(currentSavedFlow);

-  const savedText =
-    updatedAt && changesNotSaved ? (
-      SAVED_HOVER +
-      new Date(updatedAt).toLocaleString("en-US", {
-        hour: "numeric",
-        minute: "numeric",
-      })
-    ) : (
-      <div className="text-[#059669]">Saved</div>
-    );
-
  function handleAddFlow() {
    try {
      addFlow().then((id) => {
@ -122,7 +111,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
            <div
              className="cursor-pointer truncate text-muted-foreground hover:text-primary"
              onClick={() => {
-                navigate("/");
+                navigate(
+                  currentFolder?.id
+                    ? "/all/folder/" + currentFolder.id
+                    : "/all",
+                );
              }}
            >
              {currentFolder?.name}
@ -283,7 +276,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
        ></FlowSettingsModal>
        <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
      </div>
-      <div className="hidden shrink-0 items-center sm:flex">
+      <div
+        className={cn(
+          "hidden shrink-0 items-center sm:flex",
+          isBuilding ? "w-30" : "w-[3.2rem]",
+        )}
+      >
        {!autoSaving && (
          <Button
            variant="primary"
@ -326,8 +324,8 @@ export const MenuBar = ({}: {}): JSX.Element => {
          side="bottom"
          styleClasses="cursor-default z-10"
        >
-          <div className="mr-3 flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
-            <div className="flex cursor-default items-center gap-2 truncate text-sm text-zinc-500">
+          <div className="flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
+            <div className="flex cursor-default items-center gap-2 truncate text-sm">
              <div className="w-full truncate text-xs">
                {printByBuildStatus()}
              </div>
@ -342,7 +340,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
              }}
              className={
                isBuilding
-                  ? "flex hidden items-center gap-1.5 text-xs text-status-red sm:flex"
+                  ? "hidden items-center gap-1.5 text-xs text-status-red sm:flex"
                  : "hidden"
              }
            >
--- a/src/frontend/src/components/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/appHeaderComponent/index.tsx
@ -114,12 +114,12 @@ export default function AppHeader(): JSX.Element {
              <span
                className={
                  notificationCenter
-                    ? `absolute left-[31px] top-[10px] block h-1 w-1 rounded-full bg-destructive`
+                    ? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
                    : "hidden"
                }
              />
              <ForwardedIconComponent
-                name="bell"
+                name="Bell"
                className="side-bar-button-size h-[18px] w-[18px]"
                aria-hidden="true"
              />
--- a/src/frontend/src/modals/IOModal/newModal.tsx
+++ b/src/frontend/src/modals/IOModal/newModal.tsx
@ -1,15 +1,13 @@
+import { Separator } from "@/components/ui/separator";
 import {
  useDeleteMessages,
  useGetMessagesQuery,
 } from "@/controllers/API/queries/messages";
 import { useUtilityStore } from "@/stores/utilityStore";
 import { useEffect, useState } from "react";
-import AccordionComponent from "../../components/accordionComponent";
 import IconComponent from "../../components/genericIconComponent";
 import ShadTooltip from "../../components/shadTooltipComponent";
-import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import { InputOutput } from "../../constants/enums";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
@ -424,7 +422,7 @@ export default function IOModal({
                  </div>
                )}
                <div className={cn(sidebarOpen ? "lg:hidden" : "")}>
-                  <div className="-ml-4 -mt-4 flex items-center gap-2">
+                  <div className="flex items-center gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
@ -442,12 +440,12 @@ export default function IOModal({
                <div
                  className={cn(
                    sidebarOpen ? "pointer-events-none opacity-0" : "",
-                    "absolute right-10 top-2 flex h-8 w-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "absolute right-12 top-2 flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                  )}
                >
                  <ShadTooltip styleClasses="z-50" content="New Chat">
                    <Button
-                      className="h-[32px] w-[32px] hover:bg-secondary-hover"
+                      className="mr-2 h-[32px] w-[32px] hover:bg-secondary-hover"
                      variant="ghost"
                      size="icon"
                      onClick={(_) => {
@ -457,10 +455,11 @@ export default function IOModal({
                    >
                      <IconComponent
                        name="Plus"
-                        className="h-[18px] w-[18px] text-ring"
+                        className="!h-[18px] !w-[18px] text-ring"
                      />
                    </Button>
                  </ShadTooltip>
+                  <Separator orientation="vertical" />
                </div>
              </div>
              {haveChat ? (
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@ -10,7 +10,7 @@ const ConnectionLineComponent = ({
 }: ConnectionLineComponentProps): JSX.Element => {
  const handleDragging = useFlowStore((state) => state.handleDragging);
  const color = handleDragging?.color;
-  const accentColor = `hsl(var(--accent-${color}))`;
+  const accentColor = `hsl(var(--datatype-${color}))`;

  return (
    <g>
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@ -38,8 +38,6 @@ import ReactFlow, {
  Panel,
  SelectionDragHandler,
  updateEdge,
-  useReactFlow,
-  useViewport,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import {
@ -565,11 +563,10 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {

  const handleEdgeClick = (event, edge) => {
    const color =
-      nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] ||
-      "hsl(var(--foreground))";
+      nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] || "cyan";

-    const accentColor = `hsl(var(--accent-${color}-foreground))`;
-    document.documentElement.style.setProperty("--selected", accentColor);
+    const accentColor = `hsl(var(--datatype-${color}))`;
+    reactFlowWrapper.current?.style.setProperty("--selected", accentColor);
  };

  const { open } = useSidebar();
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
@ -17,7 +17,7 @@ export function SidebarFilterComponent({
    <div
      className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`}
      style={{
-        backgroundColor: `hsl(var(--accent-${color}-foreground))`,
+        backgroundColor: `hsl(var(--datatype-${color}-foreground))`,
      }}
    >
      <div className="flex flex-1 items-center gap-1.5">
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@ -102,6 +102,12 @@ export function FlowSidebarComponent() {
    },
  );

+  useEffect(() => {
+    if (filterType) {
+      setOpen(true);
+    }
+  }, [filterType]);
+
  useEffect(() => {
    filterComponents();
  }, [data, search, filterType, getFilterEdge, showBeta, showLegacy]);
--- a/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/emptyFolder/index.tsx
@ -11,32 +11,30 @@ export const EmptyFolder = ({ setOpenModal }: EmptyFolderProps) => {

  return (
    <div className="m-0 h-full w-full bg-secondary p-0">
-      <div className="text-container">
-        <div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
-          <h3
-            className="pt-5 font-chivo text-2xl font-semibold"
-            data-testid="mainpage_title"
-          >
-            {folders?.length > 1 ? "Empty folder" : "Start building"}
-          </h3>
-          <p className="pb-5 text-sm text-secondary-foreground">
-            Begin with a template, or start from scratch.
-          </p>
-          <Button
-            variant="default"
-            onClick={() => setOpenModal(true)}
-            id="new-project-btn"
-          >
-            <ForwardedIconComponent
-              name="plus"
-              aria-hidden="true"
-              className="h-4 w-4"
-            />
-            <span className="hidden whitespace-nowrap font-semibold md:inline">
-              New Flow
-            </span>
-          </Button>
-        </div>
+      <div className="absolute top-1/2 flex w-full -translate-y-1/2 flex-col items-center justify-center gap-2">
+        <h3
+          className="pt-5 font-chivo text-2xl font-semibold"
+          data-testid="mainpage_title"
+        >
+          {folders?.length > 1 ? "Empty folder" : "Start building"}
+        </h3>
+        <p className="pb-5 text-sm text-secondary-foreground">
+          Begin with a template, or start from scratch.
+        </p>
+        <Button
+          variant="default"
+          onClick={() => setOpenModal(true)}
+          id="new-project-btn"
+        >
+          <ForwardedIconComponent
+            name="plus"
+            aria-hidden="true"
+            className="h-4 w-4"
+          />
+          <span className="hidden whitespace-nowrap font-semibold md:inline">
+            New Flow
+          </span>
+        </Button>
      </div>
    </div>
  );
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@ -1272,7 +1272,6 @@

 /* Gradient background */
 .text-container {
-  z-index: 50;
  width: 100%;
  height: 100%;
  display: flex;
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@ -190,31 +190,15 @@ textarea[class^="ag-"]:focus {
 }

 .react-flow__handle-right {
-  right: -1.25rem !important;
+  right: 0 !important;
  transform: translate(50%, -50%) !important;
 }

 .react-flow__handle-left {
-  left: 1.25rem !important;
+  left: 0 !important;
  transform: translate(-50%, -50%) !important;
 }

-.react-flow__handle-right {
-  right: -1.25rem !important;
-  transform: translate(50%, -50%) !important;
-}
-
-.react-flow__handle-left {
-  left: -1.25rem !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-/* Modified transform when showNode is false */
-.react-flow__handle-right.no-show,
-.react-flow__handle-left.no-show {
-  transform: translate(0%, -50%) !important;
-}
-
 .react-flow__node-noteNode:not(.selected) {
  z-index: -1 !important;
 }
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@ -105,41 +105,41 @@
    --smooth-red: 0 93.3% 94.1%;
    --radius: 0.5rem;

-    --accent-pink: 327.3 73.3% 97.1%;
-    --accent-pink-foreground: 333.3 71.4% 50.6%;
+    --datatype-pink: 327.3 73.3% 97.1%;
+    --datatype-pink-foreground: 333.3 71.4% 50.6%;

-    --accent-yellow: 40.6 96.1% 40.4%;
-    --accent-yellow-foreground: 54.9 96.7% 88%;
+    --datatype-yellow: 40.6 96.1% 40.4%;
+    --datatype-yellow-foreground: 54.9 96.7% 88%;

-    --accent-blue: 221.2 83.2% 53.3%;
-    --accent-blue-foreground: 214.3 94.6% 92.7%;
+    --datatype-blue: 221.2 83.2% 53.3%;
+    --datatype-blue-foreground: 214.3 94.6% 92.7%;

-    --accent-gray: 215 13.8% 34.1%;
-    --accent-gray-foreground: 220 14.3% 95.9%;
+    --datatype-gray: 215 13.8% 34.1%;
+    --datatype-gray-foreground: 220 14.3% 95.9%;

-    --accent-lime: 84.8 85.2% 34.5%;
-    --accent-lime-foreground: 79.6 89.1% 89.2%;
+    --datatype-lime: 84.8 85.2% 34.5%;
+    --datatype-lime-foreground: 79.6 89.1% 89.2%;

-    --accent-red: 0 72.2% 50.6%;
-    --accent-red-foreground: 0 93.3% 94.1%;
+    --datatype-red: 0 72.2% 50.6%;
+    --datatype-red-foreground: 0 93.3% 94.1%;

-    --accent-violet: 262.1 83.3% 57.8%;
-    --accent-violet-foreground: 251.4 91.3% 95.5%;
+    --datatype-violet: 262.1 83.3% 57.8%;
+    --datatype-violet-foreground: 251.4 91.3% 95.5%;

-    --accent-emerald: 161.4 93.5% 30.4%;
-    --accent-emerald-foreground: 149.3 80.4% 90%;
+    --datatype-emerald: 161.4 93.5% 30.4%;
+    --datatype-emerald-foreground: 149.3 80.4% 90%;

-    --accent-fuchsia: 293.4 69.5% 48.8%;
-    --accent-fuchsia-foreground: 287 100% 95.5%;
+    --datatype-fuchsia: 293.4 69.5% 48.8%;
+    --datatype-fuchsia-foreground: 287 100% 95.5%;

-    --accent-purple: 271.5 81.3% 55.9%;
-    --accent-purple-foreground: 268.7 100% 95.5%;
+    --datatype-purple: 271.5 81.3% 55.9%;
+    --datatype-purple-foreground: 268.7 100% 95.5%;

-    --accent-cyan: 191.6 91.4% 36.5%;
-    --accent-cyan-foreground: 185.1 95.9% 90.4%;
+    --datatype-cyan: 191.6 91.4% 36.5%;
+    --datatype-cyan-foreground: 185.1 95.9% 90.4%;

-    --accent-indigo: 243.4 75.4% 58.6%;
-    --accent-indigo-foreground: 226.5 100% 93.9%;
+    --datatype-indigo: 243.4 75.4% 58.6%;
+    --datatype-indigo-foreground: 226.5 100% 93.9%;

    --node-ring: 240 6% 90%;
  }
@ -247,41 +247,41 @@
    --hard-zinc: 240 5.2% 33.9%;
    --smooth-red: 0 93.3% 94.1%;

-    --accent-pink: 327.4 87.1% 81.8%;
-    --accent-pink-foreground: 333.3 71.4% 50.6%;
+    --datatype-pink: 327.4 87.1% 81.8%;
+    --datatype-pink-foreground: 333.3 71.4% 50.6%;

-    --accent-yellow: 50.4 97.8% 63.5%;
-    --accent-yellow-foreground: 40.6 96.1% 40.4%;
+    --datatype-yellow: 50.4 97.8% 63.5%;
+    --datatype-yellow-foreground: 40.6 96.1% 40.4%;

-    --accent-blue: 211.7 96.4% 78.4%;
-    --accent-blue-foreground: 221.2 83.2% 53.3%;
+    --datatype-blue: 211.7 96.4% 78.4%;
+    --datatype-blue-foreground: 221.2 83.2% 53.3%;

-    --accent-gray: 216 12.2% 83.9%;
-    --accent-gray-foreground: 215 13.8% 34.1%;
+    --datatype-gray: 216 12.2% 83.9%;
+    --datatype-gray-foreground: 215 13.8% 34.1%;

-    --accent-lime: 82 84.5% 67.1%;
-    --accent-lime-foreground: 84.8 85.2% 34.5%;
+    --datatype-lime: 82 84.5% 67.1%;
+    --datatype-lime-foreground: 84.8 85.2% 34.5%;

-    --accent-red: 0 93.5% 81.8%;
-    --accent-red-foreground: 0 72.2% 50.6%;
+    --datatype-red: 0 93.5% 81.8%;
+    --datatype-red-foreground: 0 72.2% 50.6%;

-    --accent-violet: 252.5 94.7% 85.1%;
-    --accent-violet-foreground: 262.1 83.3% 57.8%;
+    --datatype-violet: 252.5 94.7% 85.1%;
+    --datatype-violet-foreground: 262.1 83.3% 57.8%;

-    --accent-emerald: 156.2 71.6% 66.9%;
-    --accent-emerald-foreground: 161.4 93.5% 30.4%;
+    --datatype-emerald: 156.2 71.6% 66.9%;
+    --datatype-emerald-foreground: 161.4 93.5% 30.4%;

-    --accent-fuchsia: 291.1 93.1% 82.9%;
-    --accent-fuchsia-foreground: 293.4 69.5% 48.8%;
+    --datatype-fuchsia: 291.1 93.1% 82.9%;
+    --datatype-fuchsia-foreground: 293.4 69.5% 48.8%;

-    --accent-purple: 269.2 97.4% 85.1%;
-    --accent-purple-foreground: 293.4 69.5% 48.8%;
+    --datatype-purple: 269.2 97.4% 85.1%;
+    --datatype-purple-foreground: 293.4 69.5% 48.8%;

-    --accent-cyan: 187 92.4% 69%;
-    --accent-cyan-foreground: 191.6 91.4% 36.5%;
+    --datatype-cyan: 187 92.4% 69%;
+    --datatype-cyan-foreground: 191.6 91.4% 36.5%;

-    --accent-indigo: 229.7 93.5% 81.8%;
-    --accent-indigo-foreground: 243.4 75.4% 58.6%;
+    --datatype-indigo: 229.7 93.5% 81.8%;
+    --datatype-indigo-foreground: 243.4 75.4% 58.6%;
    --node-ring: 240 6% 90%;
  }
 }
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@ -139,10 +139,6 @@ const config = {
        "node-selected": "hsl(var(--node-selected))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
-        "accent-emerald": {
-          DEFAULT: "hsl(var(--accent-emerald))",
-          foreground: "hsl(var(--accent-emerald-foreground))",
-        },
        "emerald-smooth": "hsl(var(--emaral-smooth))",
        "emerald-hard": "hsl(var(--emeral-hard))",
        placeholder: "hsl(var(--placeholder))",
@ -200,49 +196,49 @@ const config = {
          DEFAULT: "#18181B",
          muted: "#27272A",
        },
-        "accent-yellow": {
-          DEFAULT: "hsl(var(--accent-yellow))",
-          foreground: "hsl(var(--accent-yellow-foreground))",
+        "datatype-yellow": {
+          DEFAULT: "hsl(var(--datatype-yellow))",
+          foreground: "hsl(var(--datatype-yellow-foreground))",
        },
-        "accent-blue": {
-          DEFAULT: "hsl(var(--accent-blue))",
-          foreground: "hsl(var(--accent-blue-foreground))",
+        "datatype-blue": {
+          DEFAULT: "hsl(var(--datatype-blue))",
+          foreground: "hsl(var(--datatype-blue-foreground))",
        },
-        "accent-gray": {
-          DEFAULT: "hsl(var(--accent-gray))",
-          foreground: "hsl(var(--accent-gray-foreground))",
+        "datatype-gray": {
+          DEFAULT: "hsl(var(--datatype-gray))",
+          foreground: "hsl(var(--datatype-gray-foreground))",
        },
-        "accent-lime": {
-          DEFAULT: "hsl(var(--accent-lime))",
-          foreground: "hsl(var(--accent-lime-foreground))",
+        "datatype-lime": {
+          DEFAULT: "hsl(var(--datatype-lime))",
+          foreground: "hsl(var(--datatype-lime-foreground))",
        },
-        "accent-red": {
-          DEFAULT: "hsl(var(--accent-red))",
-          foreground: "hsl(var(--accent-red-foreground))",
+        "datatype-red": {
+          DEFAULT: "hsl(var(--datatype-red))",
+          foreground: "hsl(var(--datatype-red-foreground))",
        },
-        "accent-violet": {
-          DEFAULT: "hsl(var(--accent-violet))",
-          foreground: "hsl(var(--accent-violet-foreground))",
+        "datatype-violet": {
+          DEFAULT: "hsl(var(--datatype-violet))",
+          foreground: "hsl(var(--datatype-violet-foreground))",
        },
-        "accent-emerald": {
-          DEFAULT: "hsl(var(--accent-emerald))",
-          foreground: "hsl(var(--accent-emerald-foreground))",
+        "datatype-emerald": {
+          DEFAULT: "hsl(var(--datatype-emerald))",
+          foreground: "hsl(var(--datatype-emerald-foreground))",
        },
-        "accent-fuchsia": {
-          DEFAULT: "hsl(var(--accent-fuchsia))",
-          foreground: "hsl(var(--accent-fuchsia-foreground))",
+        "datatype-fuchsia": {
+          DEFAULT: "hsl(var(--datatype-fuchsia))",
+          foreground: "hsl(var(--datatype-fuchsia-foreground))",
        },
-        "accent-purple": {
-          DEFAULT: "hsl(var(--accent-purple))",
-          foreground: "hsl(var(--accent-purple-foreground))",
+        "datatype-purple": {
+          DEFAULT: "hsl(var(--datatype-purple))",
+          foreground: "hsl(var(--datatype-purple-foreground))",
        },
-        "accent-cyan": {
-          DEFAULT: "hsl(var(--accent-cyan))",
-          foreground: "hsl(var(--accent-cyan-foreground))",
+        "datatype-cyan": {
+          DEFAULT: "hsl(var(--datatype-cyan))",
+          foreground: "hsl(var(--datatype-cyan-foreground))",
        },
-        "accent-indigo": {
-          DEFAULT: "hsl(var(--accent-indigo))",
-          foreground: "hsl(var(--accent-indigo-foreground))",
+        "datatype-indigo": {
+          DEFAULT: "hsl(var(--datatype-indigo))",
+          foreground: "hsl(var(--datatype-indigo-foreground))",
        },
        "node-ring": "hsl(var(--node-ring))",
      },
@ -308,7 +304,7 @@ const config = {
          wordBreak: "break-word",
        },
        ".arrow-hide": {
-          "&::-webkit-inner-spin-button": {
+          "&::-webkit-datatype-spin-button": {
            "-webkit-appearance": "none",
            margin: 0,
          },