From 805ee582548dae7636bee1a139f266f9d25b7cf8 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 Nov 2023 17:24:35 -0300
Subject: [PATCH] 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
---
 .../tagsSelectorComponent/index.tsx           |  2 +-
 .../src/modals/ConfirmationModal/index.tsx    |  3 +-
 .../extraSidebarComponent/index.tsx           | 85 +++++++++++--------
 src/frontend/src/pages/StorePage/index.tsx    |  2 -
 src/frontend/src/style/applies.css            |  6 +-
 5 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/frontend/src/components/tagsSelectorComponent/index.tsx b/src/frontend/src/components/tagsSelectorComponent/index.tsx
index ed9ad6684..c371816be 100644
--- a/src/frontend/src/components/tagsSelectorComponent/index.tsx
+++ b/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
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index 667245264..7a164660d 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/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);
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8e583b920..00c7da547 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/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 justify-start align-middle">
+          <div className="flex h-full w-full flex-col gap-3">
+            <div className="flex justify-start pt-4 align-middle">
               <ToggleShadComponent
                 disabled={false}
                 size="medium"
                 setEnabled={setSharePublic}
                 enabled={sharePublic}
               />
-              <div>
-                {sharePublic
-                  ? "This flow will be avaliable for everyone"
-                  : "This flow will be avaliable just for you"}
+              <div
+                className="cursor-pointer pl-1"
+                onClick={() => {
+                  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">
-          <div className={classNames("extra-side-bar-buttons")}>
-            <IconComponent name="FileUp" className="side-bar-button-size" />
-          </div>
+        <ShadTooltip content="Import" side="top">
+          <button
+            className="extra-side-bar-buttons"
+            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">
-            <button
-              className="extra-side-bar-buttons"
-              onClick={() => {
-                uploadFlow(false);
-              }}
+          <ShadTooltip content="Export" side="top">
+            <div
+              className={classNames("extra-side-bar-buttons cursor-pointer")}
             >
-              <IconComponent
-                name="FileDown"
-                className="side-bar-button-size "
-              />
-            </button>
+              <IconComponent name="FileUp" className="side-bar-button-size" />
+            </div>
           </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
-              className={
-                "extra-side-bar-buttons " + (isPending ? "" : "button-disable")
-              }
-              onClick={(event) => {
-                saveFlow(flow!);
-              }}
-            >
-              <IconComponent
-                name="Save"
+            <div>
+              <button
                 className={
-                  "side-bar-button-size" +
-                  (isPending ? " " : " extra-side-bar-save-disable")
+                  "extra-side-bar-buttons " +
+                  (isPending ? "" : "button-disable")
                 }
-              />
-            </button>
+                onClick={(event) => {
+                  saveFlow(flow!);
+                }}
+              >
+                <IconComponent
+                  name="Save"
+                  className={
+                    "side-bar-button-size" +
+                    (isPending ? " " : " extra-side-bar-save-disable")
+                  }
+                />
+              </button>
+            </div>
           </ShadTooltip>
         </div>
 
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 0671f8b35..3a237bd0f 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/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} />
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 98cc101a7..a11a1c072 100644
--- a/src/frontend/src/style/applies.css
+++ b/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;