From f545b9cf9b803d12968fd0a6196abb0ee33a65e7 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:04:01 -0300
Subject: [PATCH 1/6] feat: add round buttons constants classes

---
 .../chatComponent/buildTrigger/index.tsx      | 10 ++++-----
 .../chatComponent/chatTrigger/index.tsx       |  9 ++++----
 src/frontend/src/index.css                    | 22 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 41a9f4164..e31303a68 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -156,9 +156,9 @@ export default function BuildTrigger({
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
+      <div className={'round-buttons-position' + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
+          className={`${eventClick} round-button-form`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -166,7 +166,7 @@ export default function BuildTrigger({
           onMouseLeave={handleMouseLeave}
         >
           <button>
-            <div className="flex items-center gap-3">
+            <div className="round-button-div">
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
@@ -175,9 +175,9 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="stroke-build-trigger" />
+                <Loading strokeWidth={1.5} className="build-trigger-loading-icon" />
               ) : (
-                <Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
+                <Zap strokeWidth={1.5} className="build-trigger-icon" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 67ec52b99..8d1d3f42b 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -30,16 +30,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-      <div className="absolute bottom-4 right-3">
+      <div className="message-button-position">
         <div
-          className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
-          py-1 shadow-md"
+          className="round-button-form"
           onClick={handleClick}
         >
           <button>
-            <div className="flex gap-3">
+            <div className="round-button-div">
               <MessagesSquare
-                className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
+                className="message-button-icon"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index dec62c95b..eb77f2c01 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -143,6 +143,9 @@ The cursor: default; property value restores the browser's default cursor style
 
 
 @layer components {
+  .round-buttons-position {
+    @apply fixed right-4
+  }
   .side-bar-arrangement {
     @apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide
   }
@@ -206,5 +209,22 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
-
+  .round-button-form {
+    @apply flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md
+  }
+  .round-button-div {
+    @apply flex items-center gap-3
+  }
+  .build-trigger-loading-icon {
+    @apply stroke-build-trigger
+  }
+  .build-trigger-icon {
+    @apply w-6 fill-build-trigger stroke-1 stroke-build-trigger
+  }
+  .message-button-position {
+    @apply absolute bottom-4 right-3
+  }
+  .message-button-icon {
+    @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
+  }
 }
\ No newline at end of file

From b6192162b0c7ee8d29485ae0b996618141857694 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:17:09 -0300
Subject: [PATCH 2/6] feat: add side bar components disclosure constants
 classes

---
 src/frontend/src/index.css                           | 12 ++++++++++++
 .../components/DisclosureComponent/index.tsx         | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index eb77f2c01..c80ff50ec 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -227,4 +227,16 @@ The cursor: default; property value restores the browser's default cursor style
   .message-button-icon {
     @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
   }
+  .components-disclosure-arrangement {
+    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
+  }
+  .text-color {
+    @apply text-primary
+  }
+  .components-disclosure-title {
+    @apply flex items-center text-sm text-color
+  }
+  .components-disclosure-div {
+    @apply flex gap-2
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 60e086715..aa6da9f96 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,14 +12,14 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
+            <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
-                <Icon strokeWidth={1.5} size={22} className="text-primary " />
-                <span className="flex items-center text-sm text-primary">
+                <Icon strokeWidth={1.5} size={22} className="text-color" />
+                <span className="components-disclosure-title">
                   {title}
                 </span>
               </div>
-              <div className="flex gap-2">
+              <div className="components-disclosure-div">
                 {buttons.map((x, index) => (
                   <button key={index} onClick={x.onClick}>
                     {x.Icon}
@@ -35,7 +35,7 @@ export default function DisclosureComponent({
               </div>
             </Disclosure.Button>
           </div>
-          <Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
+          <Disclosure.Panel as="div" static={openDisc}>
             {children}
           </Disclosure.Panel>
         </>

From 04c3cb2d4ecfca8a621e4be73e13f0af81a163c5 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:30:03 -0300
Subject: [PATCH 3/6] feat: add flowpage constants classes

---
 src/frontend/src/index.css                | 14 ++++++++++++++
 src/frontend/src/pages/FlowPage/index.tsx |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index c80ff50ec..2c8b1c893 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -239,4 +239,18 @@ The cursor: default; property value restores the browser's default cursor style
   .components-disclosure-div {
     @apply flex gap-2
   }
+  .flow-page-positioning {
+    @apply h-full w-full overflow-hidden
+  }
+  .logspace-page-icon {
+    @apply absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out
+  }
+
+  .logspace-page-icon:hover {
+    @apply hover:h-12
+  }
+
+  .logspace-icon-text {
+    @apply mt-1
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 27846f794..8ff6c708a 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -20,7 +20,7 @@ export default function FlowPage() {
   }, []);
 
   return (
-    <div className="h-full w-full overflow-hidden">
+    <div className="flow-page-positioning">
       {flows.length > 0 &&
         tabId !== "" &&
         flows.findIndex((flow) => flow.id === tabId) !== -1 && (
@@ -29,9 +29,9 @@ export default function FlowPage() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
+        className="logspace-page-icon"
       >
-        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        {version && <div className="logspace-icon-text">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>

From fdad5e7da3e4c9e98d94526c9e4514e58024f25f Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 20:44:38 -0300
Subject: [PATCH 4/6] feat: add main page constants classes

---
 src/frontend/src/index.css                | 28 +++++++++++++++++++++++
 src/frontend/src/pages/MainPage/index.tsx | 18 +++++++--------
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 2c8b1c893..9f6796447 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -253,4 +253,32 @@ The cursor: default; property value restores the browser's default cursor style
   .logspace-icon-text {
     @apply mt-1
   }
+
+  .flex-max-width {
+    @apply flex w-full
+  }
+
+  .main-page-panel {
+    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
+  }
+
+  .main-page-nav-arrangement {
+    @apply flex-max-width justify-between px-6 py-12 pb-2
+  }
+
+  .main-page-nav-title {
+    @apply flex items-center justify-center gap-2 text-2xl font-semibold
+  }
+
+  .main-page-nav-button {
+    @apply mr-2 w-4
+  }
+
+  .main-page-description-text {
+    @apply flex w-[60%] px-6 pb-14 text-muted-foreground
+  }
+
+  .main-page-flows-display {
+    @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 0b45a94ae..99df6a8a8 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -13,9 +13,9 @@ export default function HomePage() {
   }, []);
   const navigate = useNavigate();
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
-      <div className="flex w-full justify-between px-6 py-12 pb-2">
-        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
+    <div className="main-page-panel">
+      <div className="main-page-nav-arrangement">
+        <span className="main-page-nav-title">
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
@@ -26,7 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <Download className="mr-2 w-4" />
+            <Download className="main-page-nav-button" />
             Download Collection
           </Button>
           <Button
@@ -35,7 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <Upload className="mr-2 w-4" />
+            <Upload className="main-page-nav-button" />
             Upload Collection
           </Button>
           <Button
@@ -46,15 +46,15 @@ export default function HomePage() {
               });
             }}
           >
-            <Plus className="mr-2 w-4" />
+            <Plus className="main-page-nav-button" />
             New Project
           </Button>
         </div>
       </div>
-      <span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
+      <span className="main-page-description-text">
         Manage your personal projects. Download or upload your collection.
       </span>
-      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="main-page-flows-display">
         {flows.map((flow, idx) => (
           <CardComponent
             key={idx}
@@ -67,7 +67,7 @@ export default function HomePage() {
                   size="sm"
                   className="whitespace-nowrap "
                 >
-                  <ExternalLink className="mr-2 w-4" />
+                  <ExternalLink className="main-page-nav-button" />
                   Edit Flow
                 </Button>
               </Link>

From 84aa84cc08d4f168b48dd30ecee36e3ce3171969 Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 4 Jul 2023 21:02:43 -0300
Subject: [PATCH 5/6] feat: Add community page constants classes

---
 src/frontend/src/index.css                    | 24 +++++++++++++++++++
 .../src/pages/CommunityPage/index.tsx         | 16 ++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 9f6796447..3018b40c0 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -281,4 +281,28 @@ The cursor: default; property value restores the browser's default cursor style
   .main-page-flows-display {
     @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
   }
+
+  .community-page-arrangement {
+    @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16
+  }
+
+  .community-page-nav-arrangement {
+    @apply flex-max-width justify-between px-6 py-12 pb-2
+  }
+
+  .community-page-nav-title {
+    @apply flex items-center justify-center gap-2 text-2xl font-semibold
+  }
+
+  .community-page-nav-button {
+    @apply flex gap-2
+  }
+
+  .community-page-description-text {
+    @apply flex w-[70%] px-6 pb-8 text-muted-foreground 
+  }
+
+  .community-pages-flows-panel {
+    @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 175198c79..fb39a42e8 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -37,31 +37,31 @@ export default function CommunityPage() {
     handleExamples();
   }, []);
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
-      <div className="flex w-full justify-between px-6 py-12 pb-2">
-        <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
+    <div className="community-page-arrangement">
+      <div className="community-page-nav-arrangement">
+        <span className="community-page-nav-title">
           <Users2 className="w-6" />
           Community Examples
         </span>
-        <div className="flex gap-2">
+        <div className="community-page-nav-button">
           <a
             href="https://github.com/logspace-ai/langflow_examples"
             target="_blank"
             rel="noreferrer"
           >
             <Button variant="primary">
-              <GithubIcon className="mr-2 w-4" />
+              <GithubIcon className="main-page-nav-button" />
               Add Your Example
             </Button>
           </a>
         </div>
       </div>
-      <span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
+      <span className="community-page-description-text">
         Discover and learn from shared examples by the LangFlow community. We
         welcome new example contributions that can help our community explore
         new and powerful features.
       </span>
-      <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+      <div className="community-pages-flows-panel">
         {!loadingExamples &&
           examples.map((flow, idx) => (
             <CardComponent
@@ -79,7 +79,7 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <GitFork className="mr-2 w-4" />
+                  <GitFork className="main-page-nav-button" />
                   Fork Example
                 </Button>
               }

From d93dbef31b3cd57716fe183e20063617b6f88846 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 5 Jul 2023 11:51:06 -0300
Subject: [PATCH 6/6] style(index.css): remove unused text-color class and
 update components-disclosure-title class to use text-primary class for
 consistent styling style(DisclosureComponent): update Icon class to use
 text-primary class for consistent styling style(FlowPage): remove
 logspace-icon-text class and update the structure of the icon and text
 elements for better alignment and spacing

---
 src/frontend/src/index.css                            | 11 ++---------
 .../FlowPage/components/DisclosureComponent/index.tsx |  2 +-
 src/frontend/src/pages/FlowPage/index.tsx             |  2 +-
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 3018b40c0..a9dfc0c1a 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -230,11 +230,8 @@ The cursor: default; property value restores the browser's default cursor style
   .components-disclosure-arrangement {
     @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
   }
-  .text-color {
-    @apply text-primary
-  }
   .components-disclosure-title {
-    @apply flex items-center text-sm text-color
+    @apply flex items-center text-sm text-primary
   }
   .components-disclosure-div {
     @apply flex gap-2
@@ -249,11 +246,7 @@ The cursor: default; property value restores the browser's default cursor style
   .logspace-page-icon:hover {
     @apply hover:h-12
   }
-
-  .logspace-icon-text {
-    @apply mt-1
-  }
-
+  
   .flex-max-width {
     @apply flex w-full
   }
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index aa6da9f96..a35b8163e 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,7 +14,7 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
-                <Icon strokeWidth={1.5} size={22} className="text-color" />
+                <Icon strokeWidth={1.5} size={22} className="text-primary" />
                 <span className="components-disclosure-title">
                   {title}
                 </span>
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 8ff6c708a..7f9f2a214 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -31,7 +31,7 @@ export default function FlowPage() {
         href="https://logspace.ai/"
         className="logspace-page-icon"
       >
-        {version && <div className="logspace-icon-text">⛓️ LangFlow v{version}</div>}
+        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>