From c2fdc823c184f9d7da63bb47b294fd586d38a9c6 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 24 Apr 2025 16:07:44 -0300
Subject: [PATCH] fix: Reduce spacing in EmptyPageCommunity component from
 gap-12 to gap-7 (#7783)

---
 .../appHeaderComponent/components/FlowMenu/index.tsx | 12 ++++++------
 .../components/langflow-counts.tsx                   | 11 +++++++++--
 .../src/components/core/appHeaderComponent/index.tsx |  3 ---
 .../src/pages/MainPage/components/header/index.tsx   |  4 ++--
 src/frontend/src/pages/MainPage/pages/empty-page.tsx |  2 +-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 42c812459..6745d4d86 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -143,7 +143,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
       <div
         data-testid="menu_status_saved_flow_button"
         id="menu_status_saved_flow_button"
-        className="shrink-0 text-xs font-medium text-accent-emerald-foreground"
+        className="shrink-0 text-sm font-medium text-accent-emerald-foreground"
       >
         Saved
       </div>
@@ -269,7 +269,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
         {currentFolder?.name && (
           <div className="hidden truncate md:flex">
             <div
-              className="cursor-pointer truncate pr-1 text-xs text-muted-foreground hover:text-primary"
+              className="cursor-pointer truncate pr-1 text-sm text-muted-foreground hover:text-primary"
               onClick={() => {
                 navigate(
                   currentFolder?.id
@@ -314,7 +314,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
             >
               <Input
                 className={cn(
-                  "h-6 w-full shrink-0 cursor-text text-xs font-semibold",
+                  "text- h-6 w-full shrink-0 cursor-text font-semibold",
                   "bg-transparent pl-1 pr-0 transition-colors duration-200",
                   "border-0 outline-none focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
                   !editingName && "text-primary hover:opacity-80",
@@ -335,7 +335,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               />
               <span
                 ref={measureRef}
-                className="invisible absolute left-0 top-0 -z-10 w-fit whitespace-pre text-xs font-semibold"
+                className="invisible absolute left-0 top-0 -z-10 w-fit whitespace-pre text-sm font-semibold"
                 aria-hidden="true"
                 data-testid="flow_name"
               >
@@ -550,7 +550,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
         >
           <div className="flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
             <div className="flex cursor-default items-center gap-2 truncate text-sm">
-              <div className="w-full truncate text-xs">
+              <div className="w-full truncate text-sm">
                 {printByBuildStatus()}
               </div>
             </div>
@@ -564,7 +564,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               }}
               className={
                 isBuilding
-                  ? "hidden items-center gap-1.5 text-xs text-status-red sm:flex"
+                  ? "hidden items-center gap-1.5 text-sm text-status-red sm:flex"
                   : "hidden"
               }
             >
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx b/src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
index 3870740f3..432dae925 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx
@@ -1,4 +1,5 @@
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { DISCORD_URL, GITHUB_URL } from "@/constants/constants";
 import { useDarkStore } from "@/stores/darkStore";
 import { formatNumber } from "@/utils/utils";
 import { FaDiscord, FaGithub } from "react-icons/fa";
@@ -8,7 +9,10 @@ export const LangflowCounts = () => {
   const discordCount: number = useDarkStore((state) => state.discordCount);
 
   return (
-    <div className="flex items-center gap-3">
+    <div
+      className="flex items-center gap-3"
+      onClick={() => window.open(GITHUB_URL, "_blank")}
+    >
       <ShadTooltip
         content="Go to GitHub repo"
         side="bottom"
@@ -25,7 +29,10 @@ export const LangflowCounts = () => {
         side="bottom"
         styleClasses="z-10"
       >
-        <div className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground">
+        <div
+          onClick={() => window.open(DISCORD_URL, "_blank")}
+          className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground"
+        >
           <FaDiscord className="h-4 w-4" />
           <span className="text-xs font-semibold">
             {formatNumber(discordCount)}
diff --git a/src/frontend/src/components/core/appHeaderComponent/index.tsx b/src/frontend/src/components/core/appHeaderComponent/index.tsx
index 46cd36da9..3b3cf10cb 100644
--- a/src/frontend/src/components/core/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/index.tsx
@@ -107,9 +107,6 @@ export default function AppHeader(): JSX.Element {
           <Button
             unstyled
             className="hidden items-center whitespace-nowrap pr-2 lg:inline"
-            onClick={() =>
-              window.open("https://github.com/langflow-ai/langflow", "_blank")
-            }
           >
             <LangflowCounts />
           </Button>
diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index 7e360e758..3e1a3446a 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -119,7 +119,7 @@ const HeaderComponent = ({
                     key={viewType}
                     unstyled
                     size="icon"
-                    className={`group relative z-10 mx-[2px] my-[2px] flex-1 rounded-lg p-2 ${
+                    className={`group relative z-10 mx-[2px] my-[3px] flex-1 rounded-lg p-2 ${
                       view === viewType
                         ? "text-foreground"
                         : "text-muted-foreground hover:bg-muted"
@@ -129,7 +129,7 @@ const HeaderComponent = ({
                     <ForwardedIconComponent
                       name={viewType === "list" ? "Menu" : "LayoutGrid"}
                       aria-hidden="true"
-                      className="relative bottom-[1px] h-4 w-4 group-hover:text-foreground"
+                      className="h-4 w-4 group-hover:text-foreground"
                     />
                   </Button>
                 ))}
diff --git a/src/frontend/src/pages/MainPage/pages/empty-page.tsx b/src/frontend/src/pages/MainPage/pages/empty-page.tsx
index 50ded8458..66e57cd0d 100644
--- a/src/frontend/src/pages/MainPage/pages/empty-page.tsx
+++ b/src/frontend/src/pages/MainPage/pages/empty-page.tsx
@@ -100,7 +100,7 @@ export const EmptyPageCommunity = ({
               </span>
             </div>
 
-            <div className="flex w-full max-w-[510px] flex-col gap-12 sm:gap-[29px]">
+            <div className="flex w-full max-w-[510px] flex-col gap-7 sm:gap-[29px]">
               <Button
                 unstyled
                 className="group mx-3 h-[84px] sm:mx-0"