feat: larger buttons in menu

Signed-off-by: rare-magma <[email protected]>
rare-magma · Sep 14, 2024 · f89a91a · f89a91a
1 parent 2a3ee74
commit f89a91a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 49 deletions.
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -261,7 +261,7 @@ export function NavBar() {
           </Offcanvas.Header>
           <Offcanvas.Body className="justify-content-end">
             <Nav>
-              <Nav className="m-2">
+              <Nav className={expanded ? "p-2" : "m-2"}>
                 {hasMultipleBudgets && (
                   <AsyncTypeahead
                     id="search-budget-list"
@@ -273,7 +273,11 @@ export function NavBar() {
                     ref={searchRef}
                     style={expanded ? {} : { minWidth: "14ch" }}
                     onChange={(option: Option[]) => handleSelectAction(option)}
-                    className="w-100 budget-search"
+                    className={
+                      expanded
+                        ? "w-100 budget-search p-2"
+                        : "w-100 budget-search"
+                    }
                     options={options}
                     placeholder="Search..."
                     isLoading={false}
@@ -282,74 +286,80 @@ export function NavBar() {
                 )}
               </Nav>
             </Nav>
-            <Nav>
+            <Nav
+              className={
+                expanded
+                  ? "mt-4 flex-wrap flex-row row-cols-2 flex-grow-1 h-75"
+                  : ""
+              }
+            >
               {hasOneOrMoreBudgets && (
                 <>
                   <NavBarItem
                     disabled={!canUndo}
-                    itemClassName={"m-2"}
+                    itemClassName={expanded ? "p-4" : "m-2"}
                     onClick={undo}
                     tooltipID={"tooltip-undo-history"}
                     tooltipText={"undo"}
                     buttonAriaLabel={"undo change"}
-                    buttonClassName="w-100"
+                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
                     buttonVariant={"outline-info"}
                     buttonIcon={
-                      expanded ? (
-                        "undo"
-                      ) : (
-                        <BsArrowCounterclockwise aria-hidden={true} />
-                      )
+                      <BsArrowCounterclockwise
+                        size={expanded ? 50 : 0}
+                        aria-hidden={true}
+                      />
                     }
                   />
 
                   <NavBarItem
                     disabled={!canRedo}
-                    itemClassName={"m-2"}
+                    itemClassName={expanded ? "p-4" : "m-2"}
                     onClick={redo}
                     tooltipID={"tooltip-redo-history"}
                     tooltipText={"redo"}
                     buttonAriaLabel={"redo change"}
-                    buttonClassName="w-100"
+                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
                     buttonVariant={"outline-info"}
                     buttonIcon={
-                      expanded ? (
-                        "redo"
-                      ) : (
-                        <BsArrowClockwise aria-hidden={true} />
-                      )
+                      <BsArrowClockwise
+                        size={expanded ? 50 : 0}
+                        aria-hidden={true}
+                      />
                     }
                   />
                 </>
               )}
               <NavBarItem
-                itemClassName={"m-2"}
+                itemClassName={expanded ? "p-4" : "m-2"}
                 onClick={() => {
                   setExpanded(false);
                   createBudget();
                 }}
                 tooltipID={"tooltip-new-budget"}
                 tooltipText={"new budget"}
                 buttonAriaLabel={"new budget"}
-                buttonClassName="w-100"
+                buttonClassName={expanded ? "w-100 h-100" : "w-100"}
                 buttonVariant={"outline-success"}
-                buttonIcon={expanded ? "new" : <BsPlusLg aria-hidden={true} />}
+                buttonIcon={
+                  <BsPlusLg size={expanded ? 50 : 0} aria-hidden={true} />
+                }
               />
               {hasOneOrMoreBudgets && (
                 <>
                   <NavBarItem
-                    itemClassName={"m-2"}
+                    itemClassName={expanded ? "p-4" : "m-2"}
                     onClick={() => {
                       setExpanded(false);
                       cloneBudget();
                     }}
                     tooltipID={"tooltip-clone-budget"}
                     tooltipText={"clone budget"}
                     buttonAriaLabel={"clone budget"}
-                    buttonClassName="w-100"
+                    buttonClassName={expanded ? "w-100 h-100" : "w-100"}
                     buttonVariant={"outline-success"}
                     buttonIcon={
-                      expanded ? "clone" : <FaRegClone aria-hidden={true} />
+                      <FaRegClone size={expanded ? 50 : 0} aria-hidden={true} />
                     }
                   />
                   <NavBarDelete
@@ -365,22 +375,20 @@ export function NavBar() {
               {hasOneOrMoreBudgets && <NavBarSettings expanded={expanded} />}
 
               <NavBarItem
-                itemClassName={"m-2"}
-                onClick={() => undefined}
+                itemClassName={expanded ? "p-4" : "m-2"}
+                onClick={() =>
+                  window.open(
+                    "https://github.com/rare-magma/guitos#getting-started",
+                  )
+                }
                 tooltipID={"tooltip-guitos-instructions"}
                 tooltipText={"open instructions in new tab"}
                 buttonAriaLabel={"open instructions in new tab"}
-                buttonClassName="w-100"
+                buttonClassName={expanded ? "w-100 h-100" : "w-100"}
                 buttonVariant={"outline-info"}
-                buttonLink="https://github.com/rare-magma/guitos#getting-started"
                 buttonIcon={
-                  expanded ? (
-                    "instructions"
-                  ) : (
-                    <BsQuestionLg aria-hidden={true} />
-                  )
+                  <BsQuestionLg size={expanded ? 50 : 0} aria-hidden={true} />
                 }
-                target="_blank"
               />
             </Nav>
           </Offcanvas.Body>

diff --git a/src/components/NavBar/NavBarDelete.tsx b/src/components/NavBar/NavBarDelete.tsx
@@ -18,7 +18,7 @@ export function NavBarDelete({
   const { budget } = useBudget();
 
   return (
-    <Nav className="m-2">
+    <Nav className={expanded ? "p-4" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-deletion-overlay"
@@ -56,7 +56,7 @@ export function NavBarDelete({
         }
       >
         <Button
-          className="w-100"
+          className={expanded ? "w-100 h-100" : "w-100"}
           aria-label="delete budget"
           variant="outline-danger"
           onClick={() => {
@@ -65,7 +65,7 @@ export function NavBarDelete({
             }, 0);
           }}
         >
-          {expanded ? "delete" : <BsXLg aria-hidden={true} />}
+          {<BsXLg size={expanded ? 50 : 0} aria-hidden={true} />}
         </Button>
       </OverlayTrigger>
     </Nav>

diff --git a/src/components/NavBar/NavBarImpExp.tsx b/src/components/NavBar/NavBarImpExp.tsx
@@ -71,7 +71,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
   }
 
   return hasOneOrMoreBudgets ? (
-    <Nav className="m-2">
+    <Nav className={expanded ? "p-4" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-imp-exp-overlay"
@@ -145,7 +145,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
         }
       >
         <Button
-          className="w-100"
+          className={expanded ? "w-100 h-100" : "w-100"}
           aria-label="import or export budget"
           variant="outline-primary"
           ref={impExpButtonRef}
@@ -155,7 +155,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
             }, 0);
           }}
         >
-          {expanded ? "import/export" : <BsArrowDownUp aria-hidden={true} />}
+          {<BsArrowDownUp size={expanded ? 50 : 0} aria-hidden={true} />}
         </Button>
       </OverlayTrigger>
     </Nav>
@@ -177,7 +177,7 @@ export function NavBarImpExp({ expanded, setExpanded }: NavBarImpExpProps) {
             variant="outline-primary"
             onClick={() => importRef.current?.click()}
           >
-            {expanded ? "import" : <BsUpload aria-hidden={true} />}
+            {<BsUpload aria-hidden={true} />}
           </Button>
           <Form.Control
             data-testid="import-form-control"

diff --git a/src/components/NavBar/NavBarItem.tsx b/src/components/NavBar/NavBarItem.tsx
@@ -10,9 +10,7 @@ interface NavItemProps {
   buttonAriaLabel: string;
   buttonClassName?: string;
   buttonVariant: string;
-  buttonLink?: string;
   buttonIcon: ReactNode;
-  target?: string;
   disabled?: boolean;
 }
 
@@ -24,9 +22,7 @@ export function NavBarItem({
   buttonAriaLabel,
   buttonClassName,
   buttonVariant,
-  buttonLink,
   buttonIcon,
-  target,
   disabled,
 }: NavItemProps) {
   return (
@@ -44,8 +40,6 @@ export function NavBarItem({
           aria-label={buttonAriaLabel}
           className={buttonClassName}
           variant={buttonVariant}
-          href={buttonLink}
-          target={target}
           disabled={disabled}
         >
           {buttonIcon}

diff --git a/src/components/NavBar/NavBarSettings.tsx b/src/components/NavBar/NavBarSettings.tsx
@@ -29,7 +29,7 @@ export function NavBarSettings({ expanded }: NavBarSettingsProps) {
   });
 
   return (
-    <Nav className="m-2">
+    <Nav className={expanded ? "p-4" : "m-2"}>
       <OverlayTrigger
         trigger="click"
         key="nav-settings-overlay"
@@ -107,7 +107,7 @@ export function NavBarSettings({ expanded }: NavBarSettingsProps) {
         }
       >
         <Button
-          className="w-100"
+          className="w-100 h-100"
           aria-label="budget settings"
           variant="outline-info"
           ref={settingsButtonRef}
@@ -117,7 +117,7 @@ export function NavBarSettings({ expanded }: NavBarSettingsProps) {
             }, 0);
           }}
         >
-          {expanded ? "settings" : <BsGear aria-hidden={true} />}
+          {<BsGear size={expanded ? 50 : 0} aria-hidden={true} />}
         </Button>
       </OverlayTrigger>
     </Nav>