fix(tagsSelectorComponent): reduce the gap between tags in the TagsSelector component for better visual alignment

fix(ConfirmationModal): add top margin to the confirmation button in the ConfirmationModal component to improve spacing

fix(extraSidebarComponent): change the size prop value of the ShareFlowButton component to "small-h-full" for better visual alignment

fix(extraSidebarComponent): add cursor pointer and click event to the text indicating the sharing status in the ShareFlowButton component to toggle the sharePublic state

fix(extraSidebarComponent): reduce the gap between elements in the ConfirmationModal content for better visual alignment

fix(extraSidebarComponent): change the className of the ExportModal button to "extra-side-bar-buttons" and add an onClick event to trigger the uploadFlow function

fix(extraSidebarComponent): change the className of the ExportModal button to "extra-side-bar-buttons" and add an onClick event to trigger the uploadFlow function

fix(extraSidebarComponent): change the className of the Save button in the ExtraSidebar component to "extra-side-bar-buttons" and add an onClick event to trigger the saveFlow function

fix(StorePage): remove console.log statement in the StorePage component

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

fix(applies.css): remove unnecessary padding-bottom from the .main-page-flows-display class

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -10,7 +10,7 @@ export function TagsSelector({
   setSelectedTags: (tag: string) => void;
 }) {
   return (
-    <div className=" flex h-full w-full flex-row flex-wrap gap-3 align-middle">
+    <div className=" flex h-full w-full flex-row flex-wrap gap-1 align-middle">
       {tags.map((tag, index) => {
         return (
           <TagComponent

src/frontend/src/modals/ConfirmationModal/index.tsx

@@ -73,7 +73,7 @@ function ConfirmationModal({
 
       <BaseModal.Footer>
         <Button
-          className="ml-3"
+          className="ml-3 mt-5"
           onClick={() => {
             setModalOpen(false);
             onConfirm(index, data);
@@ -83,6 +83,7 @@ function ConfirmationModal({
         </Button>
 
         <Button
+          className="mt-5"
           variant="outline"
           onClick={() => {
             setModalOpen(false);

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -208,7 +208,7 @@ export default function ExtraSidebar(): JSX.Element {
         title="Share Flow"
         confirmationText="Share"
         icon="Share2"
-        size="smaller"
+        size="small-h-full"
         onConfirm={() => {
           handleShareFlow();
         }}
@@ -216,18 +216,29 @@ export default function ExtraSidebar(): JSX.Element {
         cancelText="Cancel"
       >
         <ConfirmationModal.Content>
-          <div className="flex h-full w-full flex-col gap-7">
+          <div className="flex h-full w-full flex-col gap-3">
-            <div className="flex justify-start align-middle">
+            <div className="flex justify-start pt-4 align-middle">
               <ToggleShadComponent
                 disabled={false}
                 size="medium"
                 setEnabled={setSharePublic}
                 enabled={sharePublic}
               />
-              <div>
+              <div
-                {sharePublic
+                className="cursor-pointer pl-1"
-                  ? "This flow will be avaliable for everyone"
+                onClick={() => {
-                  : "This flow will be avaliable just for you"}
+                  setSharePublic(!sharePublic);
+                }}
+              >
+                {sharePublic ? (
+                  <span>
+                    This flow will be avaliable <b>for everyone</b>
+                  </span>
+                ) : (
+                  <span>
+                    This flow will be avaliable <b>just for you</b>
+                  </span>
+                )}
               </div>
             </div>
             <div className="w-full pt-2">
@@ -253,10 +264,15 @@ export default function ExtraSidebar(): JSX.Element {
   const ExportMemo = useMemo(
     () => (
       <ExportModal>
-        <ShadTooltip content="Export" side="top">
+        <ShadTooltip content="Import" side="top">
-          <div className={classNames("extra-side-bar-buttons")}>
+          <button
-            <IconComponent name="FileUp" className="side-bar-button-size" />
+            className="extra-side-bar-buttons"
-          </div>
+            onClick={() => {
+              uploadFlow(false);
+            }}
+          >
+            <IconComponent name="FileDown" className="side-bar-button-size " />
+          </button>
         </ShadTooltip>
       </ExportModal>
     ),
@@ -267,18 +283,12 @@ export default function ExtraSidebar(): JSX.Element {
     <div className="side-bar-arrangement">
       <div className="side-bar-buttons-arrangement">
         <div className="side-bar-button">
-          <ShadTooltip content="Import" side="top">
+          <ShadTooltip content="Export" side="top">
-            <button
+            <div
-              className="extra-side-bar-buttons"
+              className={classNames("extra-side-bar-buttons cursor-pointer")}
-              onClick={() => {
-                uploadFlow(false);
-              }}
             >
-              <IconComponent
+              <IconComponent name="FileUp" className="side-bar-button-size" />
-                name="FileDown"
+            </div>
-                className="side-bar-button-size "
-              />
-            </button>
           </ShadTooltip>
         </div>
         <div className="side-bar-button">{ExportMemo}</div>
@@ -305,22 +315,25 @@ export default function ExtraSidebar(): JSX.Element {
         </ShadTooltip>
         <div className="side-bar-button">
           <ShadTooltip content="Save" side="top">
-            <button
+            <div>
-              className={
+              <button
-                "extra-side-bar-buttons " + (isPending ? "" : "button-disable")
-              }
-              onClick={(event) => {
-                saveFlow(flow!);
-              }}
-            >
-              <IconComponent
-                name="Save"
                 className={
-                  "side-bar-button-size" +
+                  "extra-side-bar-buttons " +
-                  (isPending ? " " : " extra-side-bar-save-disable")
+                  (isPending ? "" : "button-disable")
                 }
-              />
+                onClick={(event) => {
-            </button>
+                  saveFlow(flow!);
+                }}
+              >
+                <IconComponent
+                  name="Save"
+                  className={
+                    "side-bar-button-size" +
+                    (isPending ? " " : " extra-side-bar-save-disable")
+                  }
+                />
+              </button>
+            </div>
           </ShadTooltip>
         </div>
 

src/frontend/src/pages/StorePage/index.tsx

@@ -355,8 +355,6 @@ export default function StorePage(): JSX.Element {
               </>
             ) : (
               searchData.map((item, idx) => {
-                console.log(item);
-
                 return (
                   <>
                     <MarketCardComponent key={idx} data={item} />

src/frontend/src/style/applies.css

@@ -123,7 +123,7 @@
     @apply flex gap-2;
   }
   .primary-input {
-    @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 text-sm;
+    @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left text-sm shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .skeleton-card {
@@ -237,7 +237,7 @@
   }
 
   .main-page-flows-display {
-    @apply grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3;
+    @apply grid w-full gap-4 pb-7 md:grid-cols-2 lg:grid-cols-3;
   }
 
   .community-page-arrangement {
@@ -495,7 +495,7 @@
     @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium;
   }
   .header-menu-bar-display {
-    @apply flex max-w-[120px] lg:max-w-[200px] cursor-pointer items-center gap-2;
+    @apply flex max-w-[120px] cursor-pointer items-center gap-2 lg:max-w-[200px];
   }
   .header-menu-flow-name {
     @apply flex-1 truncate;