From 03be55a1bae1f37c6364a90d41069d0b36e1ce5d Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 13 Dec 2023 20:14:34 -0300
Subject: [PATCH] feat(pageLayout): add support for displaying a beta icon in
 the page title feat(StorePage): enable beta icon in the PageLayout component
 style(applies.css): adjust styles for the beta icon in the page title

---
 src/frontend/src/components/pageLayout/index.tsx | 7 ++++++-
 src/frontend/src/pages/StorePage/index.tsx       | 1 +
 src/frontend/src/style/applies.css               | 8 ++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/pageLayout/index.tsx b/src/frontend/src/components/pageLayout/index.tsx
index c6bc9de47..9af894730 100644
--- a/src/frontend/src/components/pageLayout/index.tsx
+++ b/src/frontend/src/components/pageLayout/index.tsx
@@ -6,11 +6,13 @@ export default function PageLayout({
   description,
   children,
   button,
+  betaIcon,
 }: {
   title: string;
   description: string;
   children: React.ReactNode;
   button?: React.ReactNode;
+  betaIcon: boolean;
 }) {
   return (
     <div className="flex h-screen w-full flex-col">
@@ -18,7 +20,10 @@ export default function PageLayout({
       <div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16">
         <div className="flex w-full items-center justify-between gap-4 space-y-0.5 py-8 pb-2">
           <div className="flex w-full flex-col">
-            <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+            <h2 className="text-2xl font-bold tracking-tight">
+              {title}
+              {betaIcon && <span className="store-beta-icon">BETA</span>}
+            </h2>
             <p className="text-muted-foreground">{description}</p>
           </div>
           <div className="flex-shrink-0">{button && button}</div>
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 43067c7e3..dc2e4db37 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -164,6 +164,7 @@ export default function StorePage(): JSX.Element {
 
   return (
     <PageLayout
+      betaIcon
       title="Langflow Store"
       description="Search flows and components from the community."
       button={
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index c7afc1ec7..e2bcdb7d9 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -311,7 +311,7 @@
     @apply hover:text-accent-foreground hover:transition-all;
   }
   .generic-node-desc {
-    @apply h-full px-5 mb-4 w-full text-foreground;
+    @apply mb-4 h-full w-full px-5 text-foreground;
   }
   .generic-node-desc-text {
     @apply w-full text-sm text-muted-foreground;
@@ -1040,7 +1040,7 @@
 
   .fade-container::before,
   .fade-container::after {
-    @apply pointer-events-none absolute bottom-0 top-0 bg-gradient-to-r to-transparent from-background;
+    @apply pointer-events-none absolute bottom-0 top-0 bg-gradient-to-r from-background to-transparent;
     content: "";
     width: 50px;
     opacity: 0;
@@ -1084,4 +1084,8 @@
   .scroll-container {
     @apply flex overflow-x-scroll scrollbar-hide;
   }
+
+  .store-beta-icon {
+    @apply relative bottom-3 left-1 ml-2 rounded-full bg-beta-background px-2 py-1 text-center text-xs font-semibold text-beta-foreground;
+  }
 }