✨ (DropdownButtonComponent/index.tsx): add support for displaying a plus button and hiding dropdown options based on props

♻️ (inputComponent/index.tsx): refactor the logic for setting the paddingRight CSS property based on password and selectedOption values
✨ (MainPage/index.tsx): add support for displaying a plus button and hiding dropdown options in the DropdownButton component
♻️ (types/components/index.ts): add optional plusButton and dropdownOptions properties to the dropdownButtonPropsType type

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

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}

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>
       }

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 = {