Add round buttons constants classes (#609)

Improves code verbosity and organization of Tailwind classes.

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>

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}
               />

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,93 @@ 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
+  }
+  .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
+  }
+  .components-disclosure-title {
+    @apply flex items-center text-sm text-primary
+  }
+  .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
+  }
+  
+  .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
+  }
+
+  .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
+  }
 }

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>
               }

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-primary" />
+                <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>
         </>

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,7 +29,7 @@ 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>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>

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>