From 51a405d0cc858aa49c5f4026d8226887a192d321 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 29 Mar 2024 00:55:31 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(DropdownButtonComponent/index.tsx)?=
 =?UTF-8?q?:=20add=20support=20for=20displaying=20a=20plus=20button=20and?=
 =?UTF-8?q?=20hiding=20dropdown=20options=20based=20on=20props=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(inputComponent/index.tsx):=20refactor=20the=20logi?=
 =?UTF-8?q?c=20for=20setting=20the=20paddingRight=20CSS=20property=20based?=
 =?UTF-8?q?=20on=20password=20and=20selectedOption=20values=20=E2=9C=A8=20?=
 =?UTF-8?q?(MainPage/index.tsx):=20add=20support=20for=20displaying=20a=20?=
 =?UTF-8?q?plus=20button=20and=20hiding=20dropdown=20options=20in=20the=20?=
 =?UTF-8?q?DropdownButton=20component=20=E2=99=BB=EF=B8=8F=20(types/compon?=
 =?UTF-8?q?ents/index.ts):=20add=20optional=20plusButton=20and=20dropdownO?=
 =?UTF-8?q?ptions=20properties=20to=20the=20dropdownButtonPropsType=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DropdownButtonComponent/index.tsx         | 37 +++++++++++--------
 .../src/components/inputComponent/index.tsx   |  5 ++-
 src/frontend/src/pages/MainPage/index.tsx     |  2 +
 src/frontend/src/types/components/index.ts    |  2 +
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/DropdownButtonComponent/index.tsx
index 9491336d6..7bd62a3ae 100644
--- a/src/frontend/src/components/DropdownButtonComponent/index.tsx
+++ b/src/frontend/src/components/DropdownButtonComponent/index.tsx
@@ -13,6 +13,8 @@ export default function DropdownButton({
   firstButtonName,
   onFirstBtnClick,
   options,
+  plusButton = false,
+  dropdownOptions = true,
 }: dropdownButtonPropsType): JSX.Element {
   const [showOptions, setShowOptions] = useState<boolean>(false);
 
@@ -23,28 +25,33 @@ export default function DropdownButton({
           <Button
             id="new-project-btn"
             variant="primary"
-            className="relative pr-10"
+            className={"relative" + dropdownOptions ? "" : " pr-10"}
             onClick={(event) => {
               event.stopPropagation();
               event.preventDefault();
               onFirstBtnClick();
             }}
           >
+            {plusButton && (
+              <IconComponent name="Plus" className="main-page-nav-button" />
+            )}
             {firstButtonName}
-            <div
-              className="absolute right-2 items-center text-muted-foreground"
-              onClick={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-                setShowOptions(!showOptions);
-              }}
-            >
-              {!showOptions ? (
-                <IconComponent name="ChevronDown" />
-              ) : (
-                <IconComponent name="ChevronUp" />
-              )}
-            </div>
+            {dropdownOptions && (
+              <div
+                className="absolute right-2 items-center text-muted-foreground"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                  setShowOptions(!showOptions);
+                }}
+              >
+                {!showOptions ? (
+                  <IconComponent name="ChevronDown" />
+                ) : (
+                  <IconComponent name="ChevronUp" />
+                )}
+              </div>
+            )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 934618d09..16e609ab8 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -119,8 +119,9 @@ export default function InputComponent({
                     ? " text-clip password "
                     : "",
                   editNode ? " input-edit-node " : "",
-                  password && selectedOption === "" && editNode ? "pr-8" : "",
-                  password && selectedOption === "" && !editNode ? "pr-10" : "",
+                  password && selectedOption === "" && editNode ? "pr-16" : "",
+                  password && selectedOption === "" && !editNode ? "pr-16" : "",
+                  !password && selectedOption === "" ? "pr-8" : "",
                   className!
                 )}
                 placeholder={password && editNode ? "Key" : placeholder}
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index ac23a22f3..796067bb6 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -105,6 +105,8 @@ export default function HomePage(): JSX.Element {
             firstButtonName="New Project"
             onFirstBtnClick={() => setOpenModal(true)}
             options={dropdownOptions}
+            plusButton={true}
+            dropdownOptions={false}
           />
         </div>
       }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index fe3c1e74b..d33b908c2 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -688,6 +688,8 @@ export type dropdownButtonPropsType = {
   firstButtonName: string;
   onFirstBtnClick: () => void;
   options: Array<{ name: string; onBtnClick: () => void }>;
+  plusButton?: boolean;
+  dropdownOptions?: boolean;
 };
 
 export type IOInputProps = {