changed icons timer / added tooltips to buttons

bryanlundberg · Sep 15, 2024 · 76dcfa2 · 76dcfa2
1 parent 5b10166
commit 76dcfa2
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 34 deletions.
diff --git a/src/components/timer/FullscreenOption.tsx b/src/components/timer/FullscreenOption.tsx
@@ -1,7 +1,4 @@
-import {
-  ArrowDownCircleIcon,
-  ArrowDownLeftIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowDownLeftIcon } from "@heroicons/react/24/outline";
 import { InteractiveIcon } from "./InteractiveIcon";
 import { useFullScreen } from "@/hooks/useFullScreen";
 import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
@@ -12,6 +9,7 @@ export default function FullscreenOption() {
     <>
       <div className="absolute hidden sm:block right-4 top-4">
         <InteractiveIcon
+          message={!isFullScreen ? "Go full screen" : "Disable fullscreen"}
           icon={
             isFullScreen ? (
               <ArrowDownLeftIcon className="w-6 h-6 hover:opacity-85 transition duration-200" />

diff --git a/src/components/timer/HeaderTimer.tsx b/src/components/timer/HeaderTimer.tsx
@@ -5,7 +5,7 @@ import { InteractiveIcon } from "./InteractiveIcon";
 import { ScrambleZone } from "./ScrambleZone";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
-import { ArrowPathIcon, Cog6ToothIcon } from "@heroicons/react/24/solid";
+import { GearIcon, ReloadIcon } from "@radix-ui/react-icons";
 
 export default function HeaderTimer() {
   const { selectedCube, setNewScramble, isSolving, timerStatus } =
@@ -28,14 +28,16 @@ export default function HeaderTimer() {
           }}
         >
           <InteractiveIcon
-            icon={<Cog6ToothIcon className="w-6 h-6" />}
+            icon={<GearIcon className="size-5" />}
             animation={true}
+            message="Settings"
           />
         </Link>
 
         <MainCubeSelector />
         <InteractiveIcon
-          icon={<ArrowPathIcon className="w-6 h-6" />}
+          message="Change scramble"
+          icon={<ReloadIcon className="size-5" />}
           onClick={() => {
             if (selectedCube) {
               setNewScramble(selectedCube);

diff --git a/src/components/timer/HintPanel.tsx b/src/components/timer/HintPanel.tsx
@@ -1,7 +1,7 @@
 import useClickOutside from "@/hooks/useClickOutside";
 import genId from "@/lib/genId";
 import { useTimerStore } from "@/store/timerStore";
-import { LightBulbIcon } from "@heroicons/react/24/solid";
+import { RocketIcon } from "@radix-ui/react-icons";
 import { AnimatePresence, motion } from "framer-motion";
 import { useTranslations } from "next-intl";
 import { useRef } from "react";
@@ -24,16 +24,16 @@ export default function HintPanel() {
               exit={{ y: 400, opacity: 0.8 }}
               transition={{ type: "lineal" }}
               ref={componentRef}
-              className="bg-yellow-100 bottom-0 rounded-t-lg w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-sm mx-auto h-full"
+              className="bg-yellow-100 bottom-0 rounded-t-lg w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-sm mx-auto h-full border"
             >
-              <div className="p-2 border-b text-2xl border-gray-300 flex justify-between items-center">
-                <div>{t("hint")}</div>
+              <div className="p-2 text-2xl flex justify-between items-center">
+                <div className="font-black">{t("hint")}</div>
                 <div className="text-black">
-                  <LightBulbIcon className="w-6 h-6" />
+                  <RocketIcon className="size-5" />
                 </div>
               </div>
               <div className="p-3 max-h-full overflow-auto">
-                <div>{t("optimal-yellow-layer")}</div>
+                <div className="font-semibold">{t("optimal-yellow-layer")}</div>
                 {hint?.cross.map((i) => (
                   <OptimalCrossLayer key={genId()} solution={i} type="cross" />
                 ))}

diff --git a/src/components/timer/InteractiveIcon.tsx b/src/components/timer/InteractiveIcon.tsx
@@ -1,21 +1,41 @@
-interface InteractiveIcon extends React.HTMLAttributes<HTMLDivElement> {
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface InteractiveIconProps extends React.HTMLAttributes<HTMLDivElement> {
   icon: React.ReactNode;
   animation?: boolean;
+  message?: string;
 }
 
 export function InteractiveIcon({
   icon,
   animation = false,
+  message,
   ...props
-}: InteractiveIcon) {
+}: InteractiveIconProps) {
   return (
-    <div
-      {...props}
-      className={`light:text-neutral-800 light:hover:text-neutral-600 dark:text-neutral-100 dark:hover:text-neutral-200 hover:cursor-pointer duration-300 transition ${
-        animation ? "hover:rotate-45" : ""
-      }`}
-    >
-      {icon}
-    </div>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            {...props}
+            className={`light:text-neutral-800 light:hover:text-neutral-600 dark:text-neutral-100 dark:hover:text-neutral-200 hover:cursor-pointer duration-300 transition ${
+              animation ? "hover:rotate-45" : ""
+            }`}
+          >
+            {icon}
+          </div>
+        </TooltipTrigger>
+        {message && (
+          <TooltipContent>
+            <p>{message}</p>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    </TooltipProvider>
   );
 }
diff --git a/src/components/timer/ScrambleZone.tsx b/src/components/timer/ScrambleZone.tsx
@@ -5,7 +5,8 @@ import Loading from "../Loading";
 import { AnimatePresence, motion } from "framer-motion";
 import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
 import { useTranslations } from "next-intl";
-import { LightBulbIcon, PencilIcon } from "@heroicons/react/24/solid";
+import { InteractiveIcon } from "./InteractiveIcon";
+import { Component1Icon, Pencil2Icon } from "@radix-ui/react-icons";
 
 export function ScrambleZone() {
   const {
@@ -53,7 +54,9 @@ export function ScrambleZone() {
               exit={{ opacity: 0.1 }}
               className="absolute bottom-0 right-0 cursor-pointer duration-300 transition translate-y-10 flex gap-3"
             >
-              <div
+              <InteractiveIcon
+                message={t("enter-custom-scramble")}
+                icon={<Pencil2Icon className="size-5" />}
                 onClick={() => {
                   const newScramble = window.prompt(
                     `${t("enter-custom-scramble")}`
@@ -62,16 +65,15 @@ export function ScrambleZone() {
                     setCustomScramble(newScramble);
                   }
                 }}
-                className="hover:scale-105 light:hover:text-neutral-500 dark:hover:text-neutral-200 duration-200 transition"
-              >
-                <PencilIcon className="w-6 h-6" />
-              </div>
+              />
 
               {selectedCube?.category &&
                 ["3x3", "3x3 OH"].includes(selectedCube.category) &&
                 !displayHint &&
                 !isSolving && (
-                  <div
+                  <InteractiveIcon
+                    message="Hints"
+                    icon={<Component1Icon className="size-5" />}
                     onClick={() => {
                       setDisplayHint(true);
                       genSolution(
@@ -80,10 +82,7 @@ export function ScrambleZone() {
                         "yellow"
                       ).then((res: CrossSolutions) => setHints(res));
                     }}
-                    className="hover:scale-105 hover:text-yellow-600 duration-200 transition"
-                  >
-                    <LightBulbIcon className="w-6 h-6" />
-                  </div>
+                  />
                 )}
             </motion.div>
           )}