fix: changed component colors name to not override existing colors, f…

…ixed responsiveness issues on main, playground and nav (langflow-ai#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>
headlinevc · Nov 26, 2024 · eb945b5 · eb945b5
1 parent 7c3f4cd
commit eb945b5
Show file tree

Hide file tree

Showing 17 changed files with 249 additions and 315 deletions.
diff --git 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;
 }
 

diff --git 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,
               )}
             >

diff --git 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" : "",
                         )}

diff --git 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>
                     )}

diff --git 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}
-            />
+      <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)
           }
-          side={left ? "left" : "right"}
+          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)}
         >
-          <Handle
-            ref={handleRef}
-            data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
+          <div
+            data-testid={`div-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);
-              }
-            }}
+            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={{
-              width: "32px",
-              height: "32px",
-              top: "50%",
-              position: "absolute",
-              zIndex: 30,
-              background: "transparent",
-              border: "none",
+              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();
+            }}
           />
-        </ShadTooltip>
-
-        <div
-          data-testid={`div-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",
-          }}
-          onClick={(e) => {
-            handleRef.current?.dispatchEvent(
-              new MouseEvent("mousedown", { bubbles: true }),
-            );
-          }}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          onContextMenu={(event) => {
-            event.preventDefault();
-          }}
-        />
-      </div>
+        </Handle>
+      </ShadTooltip>
     </div>
   );
 }