feat: Enhance UI Consistency and Refactor Color Naming Conventions for Improved UX (#4424)
* 📝 (tailwind.config.mjs): refactor color classes from "inner-" to "accent-" for better clarity and consistency in naming conventions * 🔧 (GenericNode/index.tsx): Remove unused imports and constants to clean up the code and improve maintainability ♻️ (GenericNode/index.tsx): Refactor GenericNode component by removing unnecessary code related to BuildStatus and BorderBeam to simplify the component and improve readability * 🔧 (handleRenderComponent/index.tsx): rename innerColorName and innerForegroundColorName variables to accentColorName and accentForegroundColorName for better clarity and consistency 🔧 (handleRenderComponent/index.tsx): update CSS variables to use accent prefix instead of inner for better naming convention and readability 🔧 (handleRenderComponent/index.tsx): pass accentColorName and accentForegroundColorName props to HandleTooltipComponent for improved customization and styling * 📝 (HandleTooltipComponent/index.tsx): Refactor HandleTooltipComponent to use Badge component for tooltip styling and add support for custom accent colors and foreground colors based on left alignment. Update styles and data-testid attributes accordingly. * 📝 (NodeStatus/index.tsx): update border and text color classes for better visual consistency and clarity * 🐛 (get-class-from-build-status.ts): fix incorrect condition to return class based on build status, now correctly returns class for BUILDING status * ✨ (nodeToolbarComponent/index.tsx): Add zoom functionality to NodeToolbarComponent using ReactFlow's store selector to dynamically adjust scale based on zoom level. * 📝 (applies.css): add a new CSS class .toolbar-wrapper to style the toolbar with flex layout, spacing, border, background color, padding, and shadow for better visual appearance * 📝 (index.css): Update accent color variables to improve consistency and readability in the stylesheet. * [autofix.ci] apply automated fixes * Update src/frontend/src/style/applies.css Co-authored-by: Mike Fortman <michael.fortman@datastax.com> * Update src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx Co-authored-by: Mike Fortman <michael.fortman@datastax.com> * ✨ (NodeStatus/index.tsx): Improve border styling for selected and unselected nodes for better visual consistency 🔧 (applies.css): Remove unnecessary border width specification in various CSS classes to simplify styling and improve maintainability * 🔧 (PageComponent/index.tsx): Update innerColor variable to accentColor for better clarity and consistency in styling 🔧 (sidebarFilterComponent/index.tsx): Update backgroundColor style to use accent color instead of inner color for better visual consistency 🔧 (nodeToolbarComponent/index.tsx): Add relative positioning to the buttons in the NodeToolbarComponent for better alignment on the page * ✨ (nodeToolbarComponent/index.tsx): Add styleClasses property to ShadTooltip component to apply custom styling for positioning ♻️ (applies.css): Refactor CSS classes to use shorthand notation for height and width properties, and update class names for better readability and maintainability * 🔧 (nodeToolbarComponent/index.tsx): update button height class to improve consistency and readability --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
This commit is contained in:
Cristhian Zanforlin Lousa
GitHub
parent
0c049deee3
commit
9394fe1ca6
12 changed files with 208 additions and 226 deletions
|
|
@ -1,28 +1,34 @@
|
||||||
import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
|
import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
|
||||||
export default function HandleTooltipComponent({
|
export default function HandleTooltipComponent({
|
||||||
isInput,
|
isInput,
|
||||||
tooltipTitle,
|
tooltipTitle,
|
||||||
colors,
|
|
||||||
isConnecting,
|
isConnecting,
|
||||||
isCompatible,
|
isCompatible,
|
||||||
isSameNode,
|
isSameNode,
|
||||||
|
accentColorName,
|
||||||
|
accentForegroundColorName,
|
||||||
|
left,
|
||||||
}: {
|
}: {
|
||||||
isInput: boolean;
|
isInput: boolean;
|
||||||
colors: string[];
|
|
||||||
tooltipTitle: string;
|
tooltipTitle: string;
|
||||||
isConnecting: boolean;
|
isConnecting: boolean;
|
||||||
isCompatible: boolean;
|
isCompatible: boolean;
|
||||||
isSameNode: boolean;
|
isSameNode: boolean;
|
||||||
|
accentColorName: string;
|
||||||
|
accentForegroundColorName: string;
|
||||||
|
left: boolean;
|
||||||
}) {
|
}) {
|
||||||
const tooltips = tooltipTitle.split("\n");
|
const tooltips = tooltipTitle.split("\n");
|
||||||
const plural = tooltips.length > 1 ? "s" : "";
|
const plural = tooltips.length > 1 ? "s" : "";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="font-medium">
|
<div className="font-medium">
|
||||||
{isSameNode ? (
|
{isSameNode ? (
|
||||||
"Can't connect to the same node"
|
"Can't connect to the same node"
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-start gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
{isConnecting ? (
|
{isConnecting ? (
|
||||||
isCompatible ? (
|
isCompatible ? (
|
||||||
<span>
|
<span>
|
||||||
|
|
@ -40,22 +46,26 @@ export default function HandleTooltipComponent({
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{tooltips.map((word, index) => (
|
{tooltips.map((word, index) => (
|
||||||
<div
|
<Badge
|
||||||
className="rounded-sm px-1.5 text-xs font-medium"
|
className="h-6 rounded-md p-1"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: `${colors[index]}40`, // Add 40 (25%) opacity to background
|
backgroundColor: left
|
||||||
color: colors[index], // Keep text the same color but solid
|
? `hsl(var(--${accentColorName}))`
|
||||||
|
: `hsl(var(--${accentColorName}-foreground))`,
|
||||||
|
color: left
|
||||||
|
? `hsl(var(--${accentForegroundColorName}))`
|
||||||
|
: `hsl(var(--${accentColorName}))`,
|
||||||
}}
|
}}
|
||||||
data-testid={`${isInput ? "input" : "output"}-tooltip-${convertTestName(word)}`}
|
data-testid={`${isInput ? "input" : "output"}-tooltip-${convertTestName(word)}`}
|
||||||
>
|
>
|
||||||
{word}
|
{word}
|
||||||
</div>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
{isConnecting && <span>{isInput ? `input` : `output`}</span>}
|
{isConnecting && <span>{isInput ? `input` : `output`}</span>}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!isConnecting && (
|
{!isConnecting && (
|
||||||
<div className="mt-2 flex flex-col gap-0.5 text-xs">
|
<div className="mt-2 flex flex-col gap-0.5 text-xs leading-6">
|
||||||
<div>
|
<div>
|
||||||
<b>Drag</b> to connect compatible {!isInput ? "inputs" : "outputs"}
|
<b>Drag</b> to connect compatible {!isInput ? "inputs" : "outputs"}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -99,8 +99,8 @@ export default function NodeStatus({
|
||||||
const getBaseBorderClass = (selected) => {
|
const getBaseBorderClass = (selected) => {
|
||||||
let className =
|
let className =
|
||||||
selected && !isBuilding
|
selected && !isBuilding
|
||||||
? " border-[1px] ring-[0.75px] ring-foreground border-foreground hover:shadow-node"
|
? " border ring-[0.75px] ring-muted-foreground border-muted-foreground hover:shadow-node"
|
||||||
: "border-[1px] ring-[0.5px] hover:shadow-node ring-border";
|
: "border ring-[0.5px] hover:shadow-node ring-border";
|
||||||
let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
|
let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
|
||||||
return frozen ? frozenClass : className;
|
return frozen ? frozenClass : className;
|
||||||
};
|
};
|
||||||
|
|
@ -218,7 +218,7 @@ export default function NodeStatus({
|
||||||
<div className="max-h-100 p-2">
|
<div className="max-h-100 p-2">
|
||||||
<div className="max-h-80 overflow-auto">
|
<div className="max-h-80 overflow-auto">
|
||||||
{validationString && (
|
{validationString && (
|
||||||
<div className="ml-1 pb-2 text-status-red">
|
<div className="ml-1 pb-2 text-accent-red-foreground">
|
||||||
{validationString}
|
{validationString}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,8 @@ export default function HandleRenderComponent({
|
||||||
}) {
|
}) {
|
||||||
const handleColorName = colorName?.[0] ?? "";
|
const handleColorName = colorName?.[0] ?? "";
|
||||||
|
|
||||||
const innerColorName = `inner-${handleColorName}`;
|
const accentColorName = `accent-${handleColorName}`;
|
||||||
const innerForegroundColorName = `${innerColorName}-foreground`;
|
const accentForegroundColorName = `${accentColorName}-foreground`;
|
||||||
|
|
||||||
const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
|
const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
|
||||||
const setFilterType = useFlowStore((state) => state.setFilterType);
|
const setFilterType = useFlowStore((state) => state.setFilterType);
|
||||||
|
|
@ -174,14 +174,14 @@ export default function HandleRenderComponent({
|
||||||
() =>
|
() =>
|
||||||
isNullHandle
|
isNullHandle
|
||||||
? dark
|
? dark
|
||||||
? "conic-gradient(hsl(var(--inner-gray)) 0deg 360deg)"
|
? "conic-gradient(hsl(var(--accent-gray)) 0deg 360deg)"
|
||||||
: "conic-gradient(hsl(var(--inner-gray-foreground)) 0deg 360deg)"
|
: "conic-gradient(hsl(var(--accent-gray-foreground)) 0deg 360deg)"
|
||||||
: "conic-gradient(" +
|
: "conic-gradient(" +
|
||||||
colorName!
|
colorName!
|
||||||
.concat(colorName![0])
|
.concat(colorName![0])
|
||||||
.map(
|
.map(
|
||||||
(color, index) =>
|
(color, index) =>
|
||||||
`hsl(var(--inner-${color}))` +
|
`hsl(var(--accent-${color}))` +
|
||||||
" " +
|
" " +
|
||||||
((360 / colors.length) * index - 360 / (colors.length * 4)) +
|
((360 / colors.length) * index - 360 / (colors.length * 4)) +
|
||||||
"deg " +
|
"deg " +
|
||||||
|
|
@ -203,34 +203,34 @@ export default function HandleRenderComponent({
|
||||||
styleSheet.textContent = `
|
styleSheet.textContent = `
|
||||||
@keyframes pulseNeon {
|
@keyframes pulseNeon {
|
||||||
0% {
|
0% {
|
||||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
box-shadow: 0 0 0 2px hsl(var(--node-ring)),
|
||||||
0 0 2px hsl(var(--inner-${colorName![0]})),
|
0 0 2px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
0 0 4px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 6px hsl(var(--inner-${colorName![0]})),
|
0 0 6px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
0 0 8px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 10px hsl(var(--inner-${colorName![0]})),
|
0 0 10px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 15px hsl(var(--inner-${colorName![0]})),
|
0 0 15px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 20px hsl(var(--inner-${colorName![0]}));
|
0 0 20px hsl(var(--accent-${colorName![0]}));
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
box-shadow: 0 0 0 2px hsl(var(--node-ring)),
|
||||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
0 0 4px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
0 0 8px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 12px hsl(var(--inner-${colorName![0]})),
|
0 0 12px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 16px hsl(var(--inner-${colorName![0]})),
|
0 0 16px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 20px hsl(var(--inner-${colorName![0]})),
|
0 0 20px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 25px hsl(var(--inner-${colorName![0]})),
|
0 0 25px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 30px hsl(var(--inner-${colorName![0]}));
|
0 0 30px hsl(var(--accent-${colorName![0]}));
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
box-shadow: 0 0 0 2px hsl(var(--node-ring)),
|
||||||
0 0 2px hsl(var(--inner-${colorName![0]})),
|
0 0 2px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
0 0 4px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 6px hsl(var(--inner-${colorName![0]})),
|
0 0 6px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
0 0 8px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 10px hsl(var(--inner-${colorName![0]})),
|
0 0 10px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 15px hsl(var(--inner-${colorName![0]})),
|
0 0 15px hsl(var(--accent-${colorName![0]})),
|
||||||
0 0 20px hsl(var(--inner-${colorName![0]}));
|
0 0 20px hsl(var(--accent-${colorName![0]}));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -302,11 +302,13 @@ export default function HandleRenderComponent({
|
||||||
content={
|
content={
|
||||||
<HandleTooltipComponent
|
<HandleTooltipComponent
|
||||||
isInput={left}
|
isInput={left}
|
||||||
colors={colors}
|
|
||||||
tooltipTitle={tooltipTitle}
|
tooltipTitle={tooltipTitle}
|
||||||
isConnecting={!!filterPresent && !ownHandle}
|
isConnecting={!!filterPresent && !ownHandle}
|
||||||
isCompatible={openHandle}
|
isCompatible={openHandle}
|
||||||
isSameNode={sameNode && !ownHandle}
|
isSameNode={sameNode && !ownHandle}
|
||||||
|
accentColorName={accentColorName}
|
||||||
|
accentForegroundColorName={accentForegroundColorName}
|
||||||
|
left={left}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
side={left ? "left" : "right"}
|
side={left ? "left" : "right"}
|
||||||
|
|
@ -366,12 +368,12 @@ export default function HandleRenderComponent({
|
||||||
height: "10px",
|
height: "10px",
|
||||||
transition: "all 0.2s",
|
transition: "all 0.2s",
|
||||||
boxShadow: getNeonShadow(
|
boxShadow: getNeonShadow(
|
||||||
innerForegroundColorName,
|
accentForegroundColorName,
|
||||||
isHovered || openHandle,
|
isHovered || openHandle,
|
||||||
),
|
),
|
||||||
animation:
|
animation:
|
||||||
(isHovered || openHandle) && !isNullHandle
|
(isHovered || openHandle) && !isNullHandle
|
||||||
? "pulseNeon 0.7s ease-in-out infinite"
|
? "pulseNeon 1.1s ease-in-out infinite"
|
||||||
: "none",
|
: "none",
|
||||||
border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
|
border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { BorderBeam } from "@/components/ui/border-beams";
|
|
||||||
import { BuildStatus } from "@/constants/enums";
|
|
||||||
import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
|
import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { useHotkeys } from "react-hotkeys-hook";
|
import { useHotkeys } from "react-hotkeys-hook";
|
||||||
|
|
@ -291,16 +288,6 @@ export default function GenericNode({
|
||||||
!hasOutputs && "pb-4",
|
!hasOutputs && "pb-4",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{BuildStatus.BUILDING === buildStatus && (
|
|
||||||
<BorderBeam
|
|
||||||
colorFrom="hsl(var(--foreground))"
|
|
||||||
colorTo="hsl(var(--muted-foreground))"
|
|
||||||
className="z-10"
|
|
||||||
borderWidth={1.75}
|
|
||||||
size={300}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
data-testid={`${data.id}-main-node`}
|
data-testid={`${data.id}-main-node`}
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,9 @@ export const getSpecificClassFromBuildStatus = (
|
||||||
): string => {
|
): string => {
|
||||||
let isInvalid = validationStatus && !validationStatus.valid;
|
let isInvalid = validationStatus && !validationStatus.valid;
|
||||||
|
|
||||||
if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) {
|
if (BuildStatus.BUILDING === buildStatus) {
|
||||||
|
return "border-foreground border-[1px] ring-[0.75px] ring-foreground";
|
||||||
|
} else if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) {
|
||||||
return "border-destructive border-[1px] ring-[0.75px] ring-destructive";
|
return "border-destructive border-[1px] ring-[0.75px] ring-destructive";
|
||||||
} else {
|
} else {
|
||||||
return "";
|
return "";
|
||||||
|
|
|
||||||
|
|
@ -570,10 +570,8 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
||||||
nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] ||
|
nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] ||
|
||||||
"hsl(var(--foreground))";
|
"hsl(var(--foreground))";
|
||||||
|
|
||||||
console.log(edge?.data?.targetHandle);
|
const accentColor = `hsl(var(--accent-${color}-foreground))`;
|
||||||
|
document.documentElement.style.setProperty("--selected", accentColor);
|
||||||
const innerColor = `hsl(var(--inner-${color}-muted-foreground))`;
|
|
||||||
document.documentElement.style.setProperty("--selected", innerColor);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const { open } = useSidebar();
|
const { open } = useSidebar();
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ export function SidebarFilterComponent({
|
||||||
<div
|
<div
|
||||||
className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`}
|
className={`mb-0.5 flex w-full items-center justify-between rounded border p-2 text-sm text-foreground`}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: `hsl(var(--inner-${color}-foreground))`,
|
backgroundColor: `hsl(var(--accent-${color}-foreground))`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex flex-1 items-center gap-1.5">
|
<div className="flex flex-1 items-center gap-1.5">
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import CodeAreaModal from "@/modals/codeAreaModal";
|
||||||
import { APIClassType } from "@/types/api";
|
import { APIClassType } from "@/types/api";
|
||||||
import _, { cloneDeep } from "lodash";
|
import _, { cloneDeep } from "lodash";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useUpdateNodeInternals } from "reactflow";
|
import { useReactFlow, useStore, useUpdateNodeInternals } from "reactflow";
|
||||||
import IconComponent from "../../../../components/genericIconComponent";
|
import IconComponent from "../../../../components/genericIconComponent";
|
||||||
import ShadTooltip from "../../../../components/shadTooltipComponent";
|
import ShadTooltip from "../../../../components/shadTooltipComponent";
|
||||||
import {
|
import {
|
||||||
|
|
@ -322,10 +322,31 @@ export default function NodeToolbarComponent({
|
||||||
(selectTriggerRef.current! as HTMLElement)?.click();
|
(selectTriggerRef.current! as HTMLElement)?.click();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Use ReactFlow's store selector to get zoom updates
|
||||||
|
const zoom = useStore((state) => state.transform[2]);
|
||||||
|
const [scale, setScale] = useState<number | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!zoom) return;
|
||||||
|
if (zoom < 0.65) {
|
||||||
|
const newScale = Math.max(zoom * 1.2, 0.4);
|
||||||
|
setScale(newScale);
|
||||||
|
} else {
|
||||||
|
setScale(1);
|
||||||
|
}
|
||||||
|
}, [zoom]);
|
||||||
|
|
||||||
|
if (scale === null) return <></>;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="noflow nowheel nopan nodelete nodrag">
|
<div
|
||||||
<div className="flex items-center gap-1 rounded-lg border-[1px] border-border bg-background p-1 shadow-sm">
|
className="noflow nowheel nopan nodelete nodrag"
|
||||||
|
style={{
|
||||||
|
transform: `scale(${scale})`,
|
||||||
|
transformOrigin: "bottom",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="toolbar-wrapper">
|
||||||
{hasCode && (
|
{hasCode && (
|
||||||
<ShadTooltip
|
<ShadTooltip
|
||||||
content={
|
content={
|
||||||
|
|
@ -336,6 +357,7 @@ export default function NodeToolbarComponent({
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
side="top"
|
side="top"
|
||||||
|
styleClasses="relative bottom-2"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
className="node-toolbar-buttons"
|
className="node-toolbar-buttons"
|
||||||
|
|
@ -364,6 +386,7 @@ export default function NodeToolbarComponent({
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
side="top"
|
side="top"
|
||||||
|
styleClasses="relative bottom-2"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
className="node-toolbar-buttons"
|
className="node-toolbar-buttons"
|
||||||
|
|
@ -379,39 +402,7 @@ export default function NodeToolbarComponent({
|
||||||
</Button>
|
</Button>
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
)}
|
)}
|
||||||
<ShadTooltip
|
|
||||||
content={
|
|
||||||
<ShortcutDisplay
|
|
||||||
{...shortcuts.find(
|
|
||||||
({ name }) => name.toLowerCase() === "freeze path",
|
|
||||||
)!}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
side="top"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
|
|
||||||
variant="ghost"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
takeSnapshot();
|
|
||||||
FreezeAllVertices({
|
|
||||||
flowId: currentFlowId,
|
|
||||||
stopNodeId: data.id,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
size="node-toolbar"
|
|
||||||
>
|
|
||||||
<IconComponent
|
|
||||||
name="FreezeAll"
|
|
||||||
className={cn(
|
|
||||||
"h-4 w-4 transition-all",
|
|
||||||
frozen ? "animate-wiggle text-ice" : "",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<span className="text-[13px] font-medium">Freeze Path</span>
|
|
||||||
</Button>
|
|
||||||
</ShadTooltip>
|
|
||||||
<ShadTooltip
|
<ShadTooltip
|
||||||
content={
|
content={
|
||||||
<ShortcutDisplay
|
<ShortcutDisplay
|
||||||
|
|
@ -421,6 +412,7 @@ export default function NodeToolbarComponent({
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
side="top"
|
side="top"
|
||||||
|
styleClasses="relative bottom-2"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
className="node-toolbar-buttons h-[2.125rem]"
|
className="node-toolbar-buttons h-[2.125rem]"
|
||||||
|
|
@ -434,9 +426,13 @@ export default function NodeToolbarComponent({
|
||||||
<IconComponent name="Copy" className="h-4 w-4" />
|
<IconComponent name="Copy" className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</ShadTooltip>
|
</ShadTooltip>
|
||||||
<ShadTooltip content="All" side="top">
|
<ShadTooltip
|
||||||
|
content="Show More"
|
||||||
|
side="top"
|
||||||
|
styleClasses="relative bottom-2"
|
||||||
|
>
|
||||||
<Button
|
<Button
|
||||||
className="node-toolbar-buttons h-[2.125rem]"
|
className="node-toolbar-buttons h-[2rem]"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={handleButtonClick}
|
onClick={handleButtonClick}
|
||||||
size="node-toolbar"
|
size="node-toolbar"
|
||||||
|
|
@ -448,12 +444,13 @@ export default function NodeToolbarComponent({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Select onValueChange={handleSelectChange} value={selectedValue!}>
|
<Select onValueChange={handleSelectChange} value={selectedValue!}>
|
||||||
<ShadTooltip content="All" side="bottom">
|
<SelectTrigger ref={selectTriggerRef}>
|
||||||
<SelectTrigger ref={selectTriggerRef}>
|
<></>
|
||||||
<></>
|
</SelectTrigger>
|
||||||
</SelectTrigger>
|
<SelectContent
|
||||||
</ShadTooltip>
|
className="relative min-w-[14rem] bg-background"
|
||||||
<SelectContent className="relative -left-10 min-w-[14rem]">
|
style={{ transform: `scale(${scale})`, transformOrigin: "top" }}
|
||||||
|
>
|
||||||
{hasCode && (
|
{hasCode && (
|
||||||
<SelectItem value={"code"}>
|
<SelectItem value={"code"}>
|
||||||
<ToolbarSelectItem
|
<ToolbarSelectItem
|
||||||
|
|
|
||||||
|
|
@ -174,7 +174,7 @@
|
||||||
@apply flex gap-2;
|
@apply flex gap-2;
|
||||||
}
|
}
|
||||||
.primary-input {
|
.primary-input {
|
||||||
@apply form-input block w-full truncate rounded-md border-[1px] border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
|
@apply form-input block w-full truncate rounded-md border border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-card {
|
.skeleton-card {
|
||||||
|
|
@ -191,7 +191,7 @@
|
||||||
|
|
||||||
/* The same as primary-input but no-truncate */
|
/* The same as primary-input but no-truncate */
|
||||||
.textarea-primary {
|
.textarea-primary {
|
||||||
@apply form-input block w-full rounded-md border-[1px] border-border bg-background px-3 text-left shadow-sm placeholder:text-placeholder-foreground hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
|
@apply form-input block w-full rounded-md border border-border bg-background px-3 text-left shadow-sm placeholder:text-placeholder-foreground hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-edit-node {
|
.input-edit-node {
|
||||||
|
|
@ -777,7 +777,7 @@
|
||||||
@apply flex-max-width mt-2 h-full;
|
@apply flex-max-width mt-2 h-full;
|
||||||
}
|
}
|
||||||
.code-area-modal-editor-box {
|
.code-area-modal-editor-box {
|
||||||
@apply h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll;
|
@apply h-[300px] w-full rounded-lg border border-ring custom-scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-node-modal-variable {
|
.edit-node-modal-variable {
|
||||||
|
|
@ -790,7 +790,7 @@
|
||||||
@apply flex-max-width h-fit max-h-[400px];
|
@apply flex-max-width h-fit max-h-[400px];
|
||||||
}
|
}
|
||||||
.edit-node-modal-box {
|
.edit-node-modal-box {
|
||||||
@apply w-full rounded-lg border-[1px] border-input bg-background;
|
@apply w-full rounded-lg border border-input bg-background;
|
||||||
}
|
}
|
||||||
.edit-node-modal-table {
|
.edit-node-modal-table {
|
||||||
@apply flex h-fit flex-col gap-5;
|
@apply flex h-fit flex-col gap-5;
|
||||||
|
|
@ -1099,7 +1099,7 @@
|
||||||
@apply flex-max-width h-full flex-col transition-all;
|
@apply flex-max-width h-full flex-col transition-all;
|
||||||
}
|
}
|
||||||
.ace-editor {
|
.ace-editor {
|
||||||
@apply h-full w-full rounded-lg border-[1px] border-border custom-scroll;
|
@apply h-full w-full rounded-lg border border-border custom-scroll;
|
||||||
}
|
}
|
||||||
.ace-editor-save-btn {
|
.ace-editor-save-btn {
|
||||||
@apply flex-max-width h-fit justify-end;
|
@apply flex-max-width h-fit justify-end;
|
||||||
|
|
@ -1207,7 +1207,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-lucide-icon {
|
.bg-lucide-icon {
|
||||||
@apply flex h-8 w-8 items-center justify-center rounded-[6px] bg-muted p-[6px];
|
@apply flex h-8 w-8 items-center justify-center rounded-md bg-muted p-[6px];
|
||||||
}
|
}
|
||||||
|
|
||||||
.integration-icon {
|
.integration-icon {
|
||||||
|
|
@ -1260,7 +1260,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hit-area-icon {
|
.hit-area-icon {
|
||||||
@apply h-[32px] w-[32px] rounded-md;
|
@apply h-8 w-8 rounded-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-toolbar-buttons {
|
.node-toolbar-buttons {
|
||||||
|
|
@ -1268,7 +1268,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-output-border {
|
.last-output-border {
|
||||||
@apply rounded-b-[12px];
|
@apply rounded-b-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-wrapper {
|
||||||
|
@apply flex items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm h-10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -104,49 +104,43 @@
|
||||||
--smooth-red: 0 93.3% 94.1%;
|
--smooth-red: 0 93.3% 94.1%;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
|
|
||||||
--inner-yellow: 40.6 96.1% 40.4%;
|
--accent-pink: 327.3 73.3% 97.1%;
|
||||||
--inner-yellow-foreground: 50.4 97.8% 63.5%;
|
--accent-pink-foreground: 333.3 71.4% 50.6%;
|
||||||
--inner-yellow-muted-foreground: 35.5 91.7% 32.9%;
|
|
||||||
|
|
||||||
--inner-blue: 221.2 83.2% 53.3%;
|
--accent-yellow: 40.6 96.1% 40.4%;
|
||||||
--inner-blue-foreground: 211.7 96.4% 78.4%;
|
--accent-yellow-foreground: 54.9 96.7% 88%;
|
||||||
--inner-blue-muted-foreground: 224.3 76.3% 48%;
|
|
||||||
|
|
||||||
--inner-gray: 215 13.8% 34.1%;
|
--accent-blue: 221.2 83.2% 53.3%;
|
||||||
--inner-gray-foreground: 216 12.2% 83.9%;
|
--accent-blue-foreground: 214.3 94.6% 92.7%;
|
||||||
--inner-gray-muted-foreground: 216.9 19.1% 26.7%;
|
|
||||||
|
|
||||||
--inner-lime: 84.8 85.2% 34.5%;
|
--accent-gray: 215 13.8% 34.1%;
|
||||||
--inner-lime-foreground: 82 84.5% 67.1%;
|
--accent-gray-foreground: 220 14.3% 95.9%;
|
||||||
--inner-lime-muted-foreground: 85.9 78.4% 27.3%;
|
|
||||||
|
|
||||||
--inner-red: 0 72.2% 50.6%;
|
--accent-lime: 84.8 85.2% 34.5%;
|
||||||
--inner-red-foreground: 0 93.5% 81.8%;
|
--accent-lime-foreground: 79.6 89.1% 89.2%;
|
||||||
--inner-red-muted-foreground: 345.3 82.7% 40.8%;
|
|
||||||
|
|
||||||
--inner-violet: 262.1 83.3% 57.8%;
|
--accent-red: 0 72.2% 50.6%;
|
||||||
--inner-violet-foreground: 252.5 94.7% 85.1%;
|
--accent-red-foreground: 0 93.3% 94.1%;
|
||||||
--inner-violet-muted-foreground: 263.4 70% 50.4%;
|
|
||||||
|
|
||||||
--inner-emerald: 161.4 93.5% 30.4%;
|
--accent-violet: 262.1 83.3% 57.8%;
|
||||||
--inner-emerald-foreground: 156.2 71.6% 66.9%;
|
--accent-violet-foreground: 251.4 91.3% 95.5%;
|
||||||
--inner-emerald-muted-foreground: 162.9 93.5% 24.3%;
|
|
||||||
|
|
||||||
--inner-fuchsia: 293.4 69.5% 48.8%;
|
--accent-emerald: 161.4 93.5% 30.4%;
|
||||||
--inner-fuchsia-foreground: 291.1 93.1% 82.9%;
|
--accent-emerald-foreground: 149.3 80.4% 90%;
|
||||||
--inner-fuchsia-muted-foreground: 294.7 72.4% 39.8%;
|
|
||||||
|
|
||||||
--inner-purple: 271.5 81.3% 55.9%;
|
--accent-fuchsia: 293.4 69.5% 48.8%;
|
||||||
--inner-purple-foreground: 269.2 97.4% 85.1%;
|
--accent-fuchsia-foreground: 287 100% 95.5%;
|
||||||
--inner-purple-muted-foreground: 272.1 71.7% 47.1%;
|
|
||||||
|
|
||||||
--inner-cyan: 191.6 91.4% 36.5%;
|
--accent-purple: 271.5 81.3% 55.9%;
|
||||||
--inner-cyan-foreground: 187 92.4% 69%;
|
--accent-purple-foreground: 268.7 100% 95.5%;
|
||||||
--inner-cyan-muted-foreground: 192.9 82.3% 31%;
|
|
||||||
|
|
||||||
--inner-indigo: 243.4 75.4% 58.6%;
|
--accent-cyan: 191.6 91.4% 36.5%;
|
||||||
--inner-indigo-foreground: 229.7 93.5% 81.8%;
|
--accent-cyan-foreground: 185.1 95.9% 90.4%;
|
||||||
--inner-indigo-muted-foreground: 244.5 57.9% 50.6%;
|
|
||||||
|
--accent-indigo: 243.4 75.4% 58.6%;
|
||||||
|
--accent-indigo-foreground: 226.5 100% 93.9%;
|
||||||
|
|
||||||
|
--node-ring: 240 6% 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
@ -252,48 +246,42 @@
|
||||||
--hard-zinc: 240 5.2% 33.9%;
|
--hard-zinc: 240 5.2% 33.9%;
|
||||||
--smooth-red: 0 93.3% 94.1%;
|
--smooth-red: 0 93.3% 94.1%;
|
||||||
|
|
||||||
--inner-yellow: 47.9 95.8% 53.1%;
|
--accent-pink: 327.4 87.1% 81.8%;
|
||||||
--inner-yellow-foreground: 35.5 91.7% 32.9%;
|
--accent-pink-foreground: 333.3 71.4% 50.6%;
|
||||||
--inner-yellow-muted-foreground: 50.4 97.8% 63.5%;
|
|
||||||
|
|
||||||
--inner-blue: 213.1 93.9% 67.8%;
|
--accent-yellow: 50.4 97.8% 63.5%;
|
||||||
--inner-blue-foreground: 224.3 76.3% 48%;
|
--accent-yellow-foreground: 40.6 96.1% 40.4%;
|
||||||
--inner-blue-muted-foreground: 211.7 96.4% 78.4%;
|
|
||||||
|
|
||||||
--inner-gray: 217.9 10.6% 64.9%;
|
--accent-blue: 211.7 96.4% 78.4%;
|
||||||
--inner-gray-foreground: 216.9 19.1% 26.7%;
|
--accent-blue-foreground: 221.2 83.2% 53.3%;
|
||||||
--inner-gray-muted-foreground: 216 12.2% 83.9%;
|
|
||||||
|
|
||||||
--inner-lime: 82.7 78% 55.5%;
|
--accent-gray: 216 12.2% 83.9%;
|
||||||
--inner-lime-foreground: 85.9 78.4% 27.3%;
|
--accent-gray-foreground: 215 13.8% 34.1%;
|
||||||
--inner-lime-muted-foreground: 82 84.5% 67.1%;
|
|
||||||
|
|
||||||
--inner-red: 0 90.6% 70.8%;
|
--accent-lime: 82 84.5% 67.1%;
|
||||||
--inner-red-foreground: 0 73.7% 41.8%;
|
--accent-lime-foreground: 84.8 85.2% 34.5%;
|
||||||
--inner-red-muted-foreground: 0 93.5% 81.8%;
|
|
||||||
|
|
||||||
--inner-violet: 255.1 91.7% 76.3%;
|
--accent-red: 0 93.5% 81.8%;
|
||||||
--inner-violet-foreground: 263.4 70% 50.4%;
|
--accent-red-foreground: 0 72.2% 50.6%;
|
||||||
--inner-violet-muted-foreground: 252.5 94.7% 85.1%;
|
|
||||||
|
|
||||||
--inner-emerald: 158.1 64.4% 51.6%;
|
--accent-violet: 252.5 94.7% 85.1%;
|
||||||
--inner-emerald-foreground: 162.9 93.5% 24.3%;
|
--accent-violet-foreground: 262.1 83.3% 57.8%;
|
||||||
--inner-emerald-muted-foreground: 156.2 71.6% 66.9%;
|
|
||||||
|
|
||||||
--inner-fuchsia: 292 91.4% 72.5%;
|
--accent-emerald: 156.2 71.6% 66.9%;
|
||||||
--inner-fuchsia-foreground: 294.7 72.4% 39.8%;
|
--accent-emerald-foreground: 161.4 93.5% 30.4%;
|
||||||
--inner-fuchsia-muted-foreground: 291.1 93.1% 82.9%;
|
|
||||||
|
|
||||||
--inner-purple: 270 95.2% 75.3%;
|
--accent-fuchsia: 291.1 93.1% 82.9%;
|
||||||
--inner-purple-foreground: 272.1 71.7% 47.1%;
|
--accent-fuchsia-foreground: 293.4 69.5% 48.8%;
|
||||||
--inner-purple-muted-foreground: 269.2 97.4% 85.1%;
|
|
||||||
|
|
||||||
--inner-cyan: 187.9 85.7% 53.3%;
|
--accent-purple: 269.2 97.4% 85.1%;
|
||||||
--inner-cyan-foreground: 192.9 82.3% 31%;
|
--accent-purple-foreground: 293.4 69.5% 48.8%;
|
||||||
--inner-cyan-muted-foreground: 187 92.4% 69%;
|
|
||||||
|
--accent-cyan: 187 92.4% 69%;
|
||||||
|
--accent-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%;
|
||||||
|
--node-ring: 240 6% 90%;
|
||||||
|
|
||||||
--inner-indigo: 234.5 89.5% 73.9%;
|
|
||||||
--inner-indigo-foreground: 244.5 57.9% 50.6%;
|
|
||||||
--inner-indigo-muted-foreground: 229.7 93.5% 81.8%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -196,61 +196,51 @@ const config = {
|
||||||
DEFAULT: "#18181B",
|
DEFAULT: "#18181B",
|
||||||
muted: "#27272A",
|
muted: "#27272A",
|
||||||
},
|
},
|
||||||
"inner-yellow": {
|
"accent-yellow": {
|
||||||
DEFAULT: "hsl(var(--inner-yellow))",
|
DEFAULT: "hsl(var(--accent-yellow))",
|
||||||
foreground: "hsl(var(--inner-foreground-yellow))",
|
foreground: "hsl(var(--accent-yellow-foreground))",
|
||||||
muted: "hsl(var(--inner-yellow-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-blue": {
|
"accent-blue": {
|
||||||
DEFAULT: "hsl(var(--inner-blue))",
|
DEFAULT: "hsl(var(--accent-blue))",
|
||||||
foreground: "hsl(var(--inner-foreground-blue))",
|
foreground: "hsl(var(--accent-blue-foreground))",
|
||||||
muted: "hsl(var(--inner-blue-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-gray": {
|
"accent-gray": {
|
||||||
DEFAULT: "hsl(var(--inner-gray))",
|
DEFAULT: "hsl(var(--accent-gray))",
|
||||||
foreground: "hsl(var(--inner-foreground-gray))",
|
foreground: "hsl(var(--accent-gray-foreground))",
|
||||||
muted: "hsl(var(--inner-gray-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-lime": {
|
"accent-lime": {
|
||||||
DEFAULT: "hsl(var(--inner-lime))",
|
DEFAULT: "hsl(var(--accent-lime))",
|
||||||
foreground: "hsl(var(--inner-foreground-lime))",
|
foreground: "hsl(var(--accent-lime-foreground))",
|
||||||
muted: "hsl(var(--inner-lime-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-red": {
|
"accent-red": {
|
||||||
DEFAULT: "hsl(var(--inner-red))",
|
DEFAULT: "hsl(var(--accent-red))",
|
||||||
foreground: "hsl(var(--inner-foreground-red))",
|
foreground: "hsl(var(--accent-red-foreground))",
|
||||||
muted: "hsl(var(--inner-red-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-violet": {
|
"accent-violet": {
|
||||||
DEFAULT: "hsl(var(--inner-violet))",
|
DEFAULT: "hsl(var(--accent-violet))",
|
||||||
foreground: "hsl(var(--inner-foreground-violet))",
|
foreground: "hsl(var(--accent-violet-foreground))",
|
||||||
muted: "hsl(var(--inner-violet-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-emerald": {
|
"accent-emerald": {
|
||||||
DEFAULT: "hsl(var(--inner-emerald))",
|
DEFAULT: "hsl(var(--accent-emerald))",
|
||||||
foreground: "hsl(var(--inner-foreground-emerald))",
|
foreground: "hsl(var(--accent-emerald-foreground))",
|
||||||
muted: "hsl(var(--inner-emerald-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-fuchsia": {
|
"accent-fuchsia": {
|
||||||
DEFAULT: "hsl(var(--inner-fuchsia))",
|
DEFAULT: "hsl(var(--accent-fuchsia))",
|
||||||
foreground: "hsl(var(--inner-foreground-fuchsia))",
|
foreground: "hsl(var(--accent-fuchsia-foreground))",
|
||||||
muted: "hsl(var(--inner-fuchsia-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-purple": {
|
"accent-purple": {
|
||||||
DEFAULT: "hsl(var(--inner-purple))",
|
DEFAULT: "hsl(var(--accent-purple))",
|
||||||
foreground: "hsl(var(--inner-foreground-purple))",
|
foreground: "hsl(var(--accent-purple-foreground))",
|
||||||
muted: "hsl(var(--inner-purple-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-cyan": {
|
"accent-cyan": {
|
||||||
DEFAULT: "hsl(var(--inner-cyan))",
|
DEFAULT: "hsl(var(--accent-cyan))",
|
||||||
foreground: "hsl(var(--inner-foreground-cyan))",
|
foreground: "hsl(var(--accent-cyan-foreground))",
|
||||||
muted: "hsl(var(--inner-cyan-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
"inner-indigo": {
|
"accent-indigo": {
|
||||||
DEFAULT: "hsl(var(--inner-indigo))",
|
DEFAULT: "hsl(var(--accent-indigo))",
|
||||||
foreground: "hsl(var(--inner-foreground-indigo))",
|
foreground: "hsl(var(--accent-indigo-foreground))",
|
||||||
muted: "hsl(var(--inner-indigo-muted-foreground))",
|
|
||||||
},
|
},
|
||||||
|
"node-ring": "hsl(var(--node-ring))",
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
lg: `var(--radius)`,
|
lg: `var(--radius)`,
|
||||||
|
|
|
||||||
|
|
@ -133,7 +133,11 @@ test("user must be able to freeze a path", async ({ page }) => {
|
||||||
|
|
||||||
await page.waitForTimeout(1000);
|
await page.waitForTimeout(1000);
|
||||||
|
|
||||||
await page.getByTestId("icon-FreezeAll").click();
|
await page.getByTestId("more-options-modal").click();
|
||||||
|
|
||||||
|
await page.waitForTimeout(1000);
|
||||||
|
|
||||||
|
await page.getByTestId("freeze-path-button").click();
|
||||||
|
|
||||||
await page.waitForTimeout(1000);
|
await page.waitForTimeout(1000);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue