✨ (NodeName/index.tsx): Add support for displaying a beta badge next …

…to the node name if the node is in beta and showNode is true ✨ (GenericNode/index.tsx): Update to show beta badge based on data.node.beta and showNode values 📝 (applies.css): Add styling for the beta badge component 📝 (index.css): Define custom CSS variables for accent pink color and foreground color 📝 (tailwind.config.mjs): Add custom Tailwind CSS variables for accent pink color and foreground color
langflow-ai · Oct 24, 2024 · 8c172dc · 8c172dc
1 parent e12fc1f
commit 8c172dc
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git 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}
+          <div className="flex items-center gap-1">
+            <span className="max-w-36 truncate">{display_name}</span>
+
+            {beta && showNode && <div className="beta-badge">BETA</div>}
+          </div>
         </div>
       </ShadTooltip>
     </div>

diff --git 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 && (
-          <div className="beta-badge-wrapper">
-            <div className="beta-badge-content">BETA</div>
-          </div>
-        )}
         <div className="grid gap-3 truncate text-wrap border-b p-4 leading-5">
           <div
             data-testid={"div-generic-node"}
@@ -305,7 +300,10 @@ export default function GenericNode({
                     display_name={data.node?.display_name}
                     nodeId={data.id}
                     selected={selected}
+                    showNode={showNode}
+                    beta={data.node?.beta ?? false}
                   />
+
                   {isOutdated && !isUserEdited && (
                     <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
                       <Button
@@ -428,7 +426,7 @@ export default function GenericNode({
                       <ForwardedIconComponent
                         name={showHiddenOutputs ? "EyeOff" : "Eye"}
                         strokeWidth={1.5}
-                        className="h-4 w-4 text-placeholder group-hover:text-foreground"
+                        className="text-placeholder h-4 w-4 group-hover:text-foreground"
                       />
                     </Button>
                   </div>

diff --git 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,19 +1218,19 @@
   }
 
   .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 {
     @apply absolute right-7 h-6 w-12 rounded-l-xl;
   }
 
   .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
@@ -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
@@ -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)",