[Issue #276] - fidgets tooltips (#285)

Co-authored-by: Vlad Nikolaev <[email protected]>
Nounspace · Jul 29, 2024 · b6e615f · b6e615f
1 parent cc027da
commit b6e615f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx
@@ -18,6 +18,12 @@ import GrabHandleIcon from "../components/atoms/icons/GrabHandle";
 import StashIcon from "../components/atoms/icons/Stash";
 import { FaX } from "react-icons/fa6";
 import BackArrowIcon from "../components/atoms/icons/BackArrow";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../components/atoms/tooltip";
 
 export type FidgetWrapperProps = {
   fidget: React.FC<FidgetArgs>;
@@ -125,15 +131,33 @@ export function FidgetWrapper({
         }
       >
         <Card className="h-full grabbable rounded-lg w-6 flex items-center justify-center bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2]">
-          <GrabHandleIcon />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-1">
+                  <GrabHandleIcon />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>Drag to Move</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </Card>
         <button
           onClick={() => {
             minimizeFidget(bundle.id);
           }}
         >
           <Card className="h-full rounded-lg ml-1 w-6 flex items-center justify-center bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2]">
-            <StashIcon />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center gap-1">
+                    <StashIcon />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>Stash in Fidget Tray</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </Card>
         </button>
         {!doubleCheck ? (
@@ -143,7 +167,14 @@ export function FidgetWrapper({
             }}
           >
             <Card className="h-full rounded-lg ml-1 w-6 flex items-center justify-center bg-[#F3F4F6] hover:bg-red-100 text-[#1C64F2]">
-              <FaX className="w-5/12" />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <FaX className="w-5/12" />
+                  </TooltipTrigger>
+                  <TooltipContent>Remove Fidget</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </Card>
           </button>
         ) : (
@@ -154,7 +185,16 @@ export function FidgetWrapper({
               }}
             >
               <Card className="h-full rounded-lg ml-1 w-6 flex items-center justify-center bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2]">
-                <BackArrowIcon />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex items-center gap-1">
+                        <BackArrowIcon />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent>Cancel</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </Card>
             </button>
             <button
@@ -163,7 +203,14 @@ export function FidgetWrapper({
               }}
             >
               <Card className="h-full rounded-lg ml-1 w-6 flex items-center justify-center bg-[#F3F4F6] hover:bg-red-100 text-[#1C64F2]">
-                <FaX className="w-5/12" />
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <FaX className="w-5/12" />
+                    </TooltipTrigger>
+                    <TooltipContent>Confirm Delete</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </Card>
             </button>
           </>

diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
@@ -37,11 +37,7 @@ export default function Explore({ posts }) {
       <div className="flex w-full h-full">
         {/* Sidebar */}
         <div className="flex mx-auto transition-all duration-100 ease-out z-10">
-          <Navigation
-            isEditable={false}
-            enterEditMode={() => {}}
-            theme={homebaseConfig?.theme}
-          />
+          <Navigation isEditable={false} enterEditMode={() => {}} />
         </div>
 
         {/* Main Content */}