touching up toolbar main with tooltips

src/components/features/ToolbarButton.tsx

@@ -14,12 +14,14 @@ export interface ToolbarButtonProps
 }
 
 export const ToolbarButton = ({
+  children,
   icon,
   tooltip,
   onClick,
   buttonProps = {},
   iconProps,
 }: {
+  children?: React.ReactNode;
   icon: IconDefinition;
   tooltip?: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -34,7 +36,8 @@ export const ToolbarButton = ({
     ...restButtonProps
   } = buttonProps;
   const mergedButtonClasses = twMerge(
-    "size-10 rounded-2xl p-2 hover:bg-secondary-500 hover:text-white",
+    "rounded-2xl p-2 hover:bg-secondary-500 hover:text-white",
+    children ? "w-fit flex items-center gap-2 text-nowrap" : "size-10",
     disabled && "pointer-events-none text-secondary-300",
     active && "pointer-events-none text-primary ",
     customButtonClassNames,
@@ -45,9 +48,18 @@ export const ToolbarButton = ({
       className={mergedButtonClasses}
       disabled={disabled}
       {...restButtonProps}
-      onClick={onClick ? onClick : customOnClick}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onClick) {
+          onClick(e);
+        } else if (customOnClick) {
+          customOnClick(e);
+        }
+      }}
     >
       <FontAwesomeIcon icon={icon} {...iconProps} />
+      {children}
     </button>
   );
   if (tooltip) {

src/components/features/ToolbarMain/index.tsx

@@ -89,10 +89,12 @@ export const ToolbarMain = ({
             icon={faLocationArrow}
             iconProps={{ className: "fa-flip-horizontal" }}
             buttonProps={buttonProps.SELECT_ONE}
+            tooltip="Select"
           />
           <ToolbarButton
             icon={faSquareDashed}
             buttonProps={buttonProps.SELECT_AREA}
+            tooltip="Select Area"
           />
           <div className="relative">
             <ToolbarButton
@@ -104,7 +106,7 @@ export const ToolbarMain = ({
             {state.isUploadSubmenuOpen && (
               <div
                 className={twMerge(
-                  "absolute -left-2 bottom-11 z-10",
+                  "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2",
                   paperWrapperStyles,
                 )}
               >
@@ -117,7 +119,9 @@ export const ToolbarMain = ({
                       isUploadVideoOpen: false,
                     })
                   }
-                />
+                >
+                  Add Image
+                </ToolbarButton>
                 <ToolbarButton
                   icon={faFilm}
                   onClick={() =>
@@ -127,30 +131,44 @@ export const ToolbarMain = ({
                       isUploadImageOpen: false,
                     })
                   }
-                />
+                >
+                  Add Video
+                </ToolbarButton>
               </div>
             )}
           </div>
           <ToolbarButton
             icon={faCameraRotate}
             buttonProps={buttonProps.CHANGE_CAMERA_ORIENTATION}
+            tooltip="Change Orientation"
           />
           <ToolbarButton
             icon={faHatWizard}
             buttonProps={buttonProps.AI_STYLIZE}
+            tooltip="AI Stylize"
           />
         </div>
         <div className="flex items-center gap-2 px-2">
           <ToolbarButton
             icon={faArrowRotateLeft}
             buttonProps={buttonProps.UNDO}
+            tooltip="Undo"
           />
           <ToolbarButton
             icon={faArrowRotateRight}
             buttonProps={buttonProps.REDO}
+            tooltip="Redo"
+          />
+          <ToolbarButton
+            icon={faFloppyDisk}
+            buttonProps={buttonProps.SAVE}
+            tooltip="Save"
+          />
+          <ToolbarButton
+            icon={faDownload}
+            buttonProps={buttonProps.DOWNLOAD}
+            tooltip="Download"
           />
-          <ToolbarButton icon={faFloppyDisk} buttonProps={buttonProps.SAVE} />
-          <ToolbarButton icon={faDownload} buttonProps={buttonProps.DOWNLOAD} />
         </div>
       </div>