diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
index 3c6e08b1c21..0c127ad39bc 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
@@ -8,10 +8,14 @@ export default function NodeName({
display_name,
selected,
nodeId,
+ showNode,
+ beta,
}: {
display_name?: string;
selected: boolean;
nodeId: string;
+ showNode: boolean;
+ beta: boolean;
}) {
const [inputName, setInputName] = useState(false);
const [nodeName, setNodeName] = useState(display_name);
@@ -69,7 +73,11 @@ export default function NodeName({
data-testid={"title-" + display_name}
className="nodoubleclick w-full cursor-text truncate font-medium text-primary"
>
- {display_name}
+
+
{display_name}
+
+ {beta && showNode &&
BETA
}
+
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index fa500042a39..3a2e483b5e0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -271,11 +271,6 @@ export default function GenericNode({
"generic-node-div group/node",
)}
>
- {data.node?.beta && showNode && (
-
- )}
+
{isOutdated && !isUserEdited && (
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index dd909a1c2cc..dc35e180c25 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1206,7 +1206,7 @@
}
.bg-lucide-icon {
- @apply flex h-8 w-8 items-center justify-center rounded-sm bg-secondary p-[6px];
+ @apply flex h-8 w-8 items-center justify-center rounded-sm bg-muted p-[6px];
}
.integration-icon {
@@ -1218,11 +1218,11 @@
}
.disabled-state {
- @apply pointer-events-none bg-secondary text-hard-zinc;
+ @apply text-hard-zinc pointer-events-none bg-secondary;
}
.background-fade-input {
- @apply absolute right-[0.9px] h-6 w-7 bg-background
+ @apply absolute right-[0.9px] h-6 w-7 bg-background;
}
.gradient-fade-input {
@@ -1230,7 +1230,7 @@
}
.background-fade-input-edit-node {
- @apply absolute right-[0.9px] h-4 w-7 bg-background
+ @apply absolute right-[0.9px] h-4 w-7 bg-background;
}
.gradient-fade-input-edit-node {
@@ -1247,6 +1247,10 @@
@apply top-[-23px];
}
.popover-input {
- @apply h-fit w-fit flex-1 border-none bg-transparent p-0 shadow-none outline-none ring-0 ring-offset-0 placeholder:text-muted-foreground focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50
+ @apply h-fit w-fit flex-1 border-none bg-transparent p-0 shadow-none outline-none ring-0 ring-offset-0 placeholder:text-muted-foreground focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50;
+ }
+
+ .beta-badge {
+ @apply bg-accent-pink text-accent-pink-foreground flex h-6 w-11 items-center justify-center rounded-lg p-2 text-center text-xs font-medium;
}
}
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 63bf5028805..a691e3917db 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -101,6 +101,9 @@
--hard-zinc: 240 5.2% 33.9%;
--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%;
}
.dark {
@@ -201,5 +204,8 @@
--accent-emerald-foreground: 161.4 93.5% 30.4%;
--placeholder: 240 5% 64.9%;
--hard-zinc: 240 5.2% 33.9% --smooth-red: 0 93.3% 94.1%;
+
+ --accent-pink: 327.3 73.3% 97.1%;
+ --accent-pink-foreground: 333.3 71.4% 50.6%;
}
}
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index b21c31a61df..53f3446d86e 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -99,6 +99,8 @@ const config = {
"status-gray": "var(--status-gray)",
"success-background": "var(--success-background)",
"success-foreground": "var(--success-foreground)",
+ "accent-pink": "hsl(var(--accent-pink))",
+ "accent-pink-foreground": "hsl(var(--accent-pink-foreground))",
filter: {
foreground: "var(--filter-foreground)",
background: "var(--filter-background)",