fix: Improve spacing, alignment and consistency across components with icon enhancement (#7792)

* ✨ (AccountMenu/index.tsx): Adjust height of AccountMenu items for better UI consistency
✨ (ThemeButtons/index.tsx): Remove unnecessary padding from ThemeButtons component
✨ (appHeaderComponent/index.tsx): Update position of notification badge for improved alignment
✨ (empty-page.tsx): Refactor create first flow button text and add icon for better user experience

* [autofix.ci] apply automated fixes

* ✨ (get-started-progress.tsx): Adjust height of elements for better visual alignment and spacing
✨ (get-started-progress.tsx): Add margin top to the inner container for improved layout
✨ (get-started-progress.tsx): Adjust padding values for better visual appearance
✨ (input-edit-folder-name.tsx): Add text size class to input element for better readability
✨ (index.tsx): Adjust text size class for better consistency and readability
✨ (index.tsx): Adjust icon size for better visual consistency and alignment
✨ (index.tsx): Adjust text size class for better consistency and readability

* 📝 (sideBarFolderButtons): remove unnecessary class from span element to improve code readability and maintainability

* 🔧 (select-options.tsx): Add 'text-xs' class to select options for consistent styling across components.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx

@@ -56,7 +56,7 @@ export const AccountMenu = () => {
         <HeaderMenuItems position="right" classNameSize="w-[272px]">
           <div className="divide-y divide-foreground/10">
             <div>
-              <div className="h-[46px] items-center px-4 pt-3">
+              <div className="h-[44px] items-center px-4 pt-3">
                 <div className="flex items-center justify-between">
                   <span
                     data-testid="menu_version_button"
@@ -156,7 +156,7 @@ export const AccountMenu = () => {
               </HeaderMenuItemLink>
             </div>
 
-            <div className="flex items-center justify-between px-4 py-1 text-sm">
+            <div className="flex items-center justify-between px-4 py-[6.5px] text-sm">
               <span className="">Theme</span>
               <div className="relative top-[1px] float-right">
                 <ThemeButtons />

src/frontend/src/components/core/appHeaderComponent/components/ThemeButtons/index.tsx

@@ -30,7 +30,7 @@ export const ThemeButtons = () => {
   };
 
   return (
-    <div className="relative ml-auto inline-flex rounded-full border border-border p-0.5">
+    <div className="relative ml-auto inline-flex rounded-full border border-border">
       {/* Sliding Indicator - Behind the Buttons */}
       <div
         className={`absolute bottom-0.5 left-[1px] top-0.5 w-[30%] rounded-full bg-amber-400 ${

src/frontend/src/components/core/appHeaderComponent/index.tsx

@@ -57,7 +57,7 @@ export default function AppHeader(): JSX.Element {
   const getNotificationBadge = () => {
     const baseClasses = "absolute h-1 w-1 rounded-full bg-destructive";
     return notificationCenter
-      ? `${baseClasses} right-[5.1rem] top-[10px]`
+      ? `${baseClasses} right-[5.1rem] top-[5px]`
       : "hidden";
   };
 

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/get-started-progress.tsx

@@ -82,7 +82,7 @@ export const GetStartedProgress: FC<{
   };
 
   return (
-    <div className="mt-3 h-[180px] w-full">
+    <div className="mt-3 h-[168px] w-full">
       <div className="mb-2 flex items-center justify-between">
         <span className="text-sm font-semibold">
           {percentageGetStarted >= 100 ? (
@@ -117,7 +117,7 @@ export const GetStartedProgress: FC<{
         </span>
       </div>
 
-      <div className="space-y-1">
+      <div className="mt-2 space-y-1">
         <Button
           data-testid="github_starred_btn_get_started"
           unstyled
@@ -135,7 +135,7 @@ export const GetStartedProgress: FC<{
         >
           <div
             className={cn(
-              "flex items-center gap-2 rounded-md p-2 hover:bg-muted",
+              "flex items-center gap-2 rounded-md px-2 py-[10px] hover:bg-muted",
               isGithubStarredChild && "pointer-events-none",
             )}
           >
@@ -177,7 +177,7 @@ export const GetStartedProgress: FC<{
         >
           <div
             className={cn(
-              "flex items-center gap-2 rounded-md p-2 hover:bg-muted",
+              "flex items-center gap-2 rounded-md p-2 py-[10px] hover:bg-muted",
               isDiscordJoinedChild && "pointer-events-none",
             )}
           >
@@ -209,7 +209,7 @@ export const GetStartedProgress: FC<{
         >
           <div
             className={cn(
-              "flex items-center gap-2 rounded-md p-2 hover:bg-muted",
+              "flex items-center gap-2 rounded-md p-2 py-[10px] hover:bg-muted",
               hasFlows && "pointer-events-none text-muted-foreground",
             )}
             data-testid="create_flow_btn_get_started"

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/input-edit-folder-name.tsx

@@ -33,7 +33,7 @@ export const InputEditFolderName = ({
   return (
     <>
       <Input
-        className="h-6 flex-1 focus:border-0"
+        className="h-6 flex-1 text-xs focus:border-0"
         onChange={(e) => {
           handleEditFolderName(e, item.name);
         }}

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx

@@ -61,15 +61,24 @@ export const SelectOptions = ({
               id="rename-button"
               value="rename"
               data-testid="btn-rename-folder"
+              className="text-xs"
             >
               <FolderSelectItem name="Rename" iconName="SquarePen" />
             </SelectItem>
           )}
-          <SelectItem value="download" data-testid="btn-download-folder">
+          <SelectItem
+            value="download"
+            data-testid="btn-download-folder"
+            className="text-xs"
+          >
             <FolderSelectItem name="Download" iconName="Download" />
           </SelectItem>
           {index > 0 && (
-            <SelectItem value="delete" data-testid="btn-delete-folder">
+            <SelectItem
+              value="delete"
+              data-testid="btn-delete-folder"
+              className="text-xs"
+            >
               <FolderSelectItem name="Delete" iconName="Trash2" />
             </SelectItem>
           )}

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -413,7 +413,7 @@ const SideBarFoldersButtonsComponent = ({
                                   handleKeyDown={handleKeyDown}
                                 />
                               ) : (
-                                <span className="block w-0 grow truncate text-mmd opacity-100">
+                                <span className="block w-0 grow truncate text-xs opacity-100">
                                   {item.name}
                                 </span>
                               )}
@@ -459,12 +459,12 @@ const SideBarFoldersButtonsComponent = ({
               >
                 <SidebarMenuButton
                   size="md"
-                  className="text-mmd"
+                  className="text-xs"
                   onClick={() => {
                     window.open("/store", "_blank");
                   }}
                 >
-                  <ForwardedIconComponent name="Store" />
+                  <ForwardedIconComponent name="Store" className="h-4 w-4" />
                   Store
                 </SidebarMenuButton>
               </div>
@@ -473,9 +473,9 @@ const SideBarFoldersButtonsComponent = ({
               isActive={checkPathFiles}
               onClick={() => handleFilesClick?.()}
               size="md"
-              className="text-mmd"
+              className="text-xs"
             >
-              <ForwardedIconComponent name="File" />
+              <ForwardedIconComponent name="File" className="h-4 w-4" />
               My Files
             </SidebarMenuButton>
           </div>

src/frontend/src/pages/MainPage/pages/empty-page.tsx

@@ -1,5 +1,6 @@
 import logoDarkPng from "@/assets/logo_dark.png";
 import logoLightPng from "@/assets/logo_light.png";
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
 import CardsWrapComponent from "@/components/core/cardsWrapComponent";
 import { Button } from "@/components/ui/button";
 import { DotBackgroundDemo } from "@/components/ui/dot-background";
@@ -24,7 +25,7 @@ const EMPTY_PAGE_DISCORD_DESCRIPTION =
 const EMPTY_PAGE_DRAG_AND_DROP_TEXT =
   "Already have a flow? Drag and drop to upload.";
 const EMPTY_PAGE_FOLDER_DESCRIPTION = "Empty folder";
-const EMPTY_PAGE_CREATE_FIRST_FLOW_BUTTON_TEXT = <>+&nbsp; Create first flow</>;
+const EMPTY_PAGE_CREATE_FIRST_FLOW_BUTTON_TEXT = "Create first flow";
 
 const EXTERNAL_LINK_ICON_CLASS =
   "absolute right-6 top-[35px] h-4 w-4 shrink-0 translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:opacity-100";
@@ -168,6 +169,11 @@ export const EmptyPageCommunity = ({
                 id="new-project-btn"
                 data-testid="new_project_btn_empty_page"
               >
+                <ForwardedIconComponent
+                  name="Plus"
+                  aria-hidden="true"
+                  className="relative left-1 h-4 w-4"
+                />
                 <span>{EMPTY_PAGE_CREATE_FIRST_FLOW_BUTTON_TEXT}</span>
               </Button>
             </div>