Added tooltips in various places

YARC-Official · Dec 13, 2024 · e209f38 · e209f38
1 parent 24bb1a7
commit e209f38
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 36 deletions.
diff --git a/src/components/Sidebar/Profiles/List.tsx b/src/components/Sidebar/Profiles/List.tsx
@@ -6,6 +6,7 @@ import { Link, NavLink } from "react-router-dom";
 import { Localized, localize } from "@app/utils/localized";
 import { Metadata } from "@app/profiles/types";
 import Selector from "./Selector";
+import TooltipWrapper from "@app/components/TooltipWrapper";
 
 interface Props {
     isOffline: boolean;
@@ -43,18 +44,22 @@ const ProfilesList: React.FC<Props> = ({ isOffline }: Props) => {
     return <div className={styles.list}>
         <Separator name="Applications">
             {!isOffline &&
-                <Link to="/marketplace" className={styles.add}>
-                    <AddIcon />
-                </Link>
+                <TooltipWrapper text="Look for Applications on the Marketplace" sideOffset={3}>
+                    <Link to="/marketplace" className={styles.add}>
+                        <AddIcon />
+                    </Link>
+                </TooltipWrapper>
             }
         </Separator>
         {activeProfileList("application")}
 
         <Separator name="Setlists">
             {!isOffline &&
-                <Link to="/marketplace" className={styles.add}>
-                    <AddIcon />
-                </Link>
+                <TooltipWrapper text="Look for Setlists on the Marketplace" sideOffset={3}>
+                    <Link to="/marketplace" className={styles.add}>
+                        <AddIcon />
+                    </Link>
+                </TooltipWrapper>
             }
         </Separator>
         {activeProfileList("setlist")}

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -7,6 +7,7 @@ import { useOfflineStatus } from "@app/hooks/useOfflineStatus";
 import useMarketIndex from "@app/hooks/useMarketIndex";
 import { settingsManager } from "@app/settings";
 import { HomeIcon, QueueIcon, MarketplaceIcon, SettingsIcon } from "@app/assets/Icons";
+import TooltipWrapper from "../TooltipWrapper";
 
 const Sidebar: React.FC = () => {
     const offlineStatus = useOfflineStatus();
@@ -54,9 +55,11 @@ const Sidebar: React.FC = () => {
         <ProfilesList isOffline={offlineStatus.isOffline} />
 
         <div className={styles.footer}>
-            <NavLink to="/settings" className={styles.footerButton}>
-                <SettingsIcon />
-            </NavLink>
+            <TooltipWrapper text="Launcher Settings" side="right" sideOffset={3}>
+                <NavLink to="/settings" className={styles.footerButton}>
+                    <SettingsIcon />
+                </NavLink>
+            </TooltipWrapper>
         </div>
     </div>;
 };

diff --git a/src/components/TitleBar/TitleBar.module.css b/src/components/TitleBar/TitleBar.module.css
@@ -29,6 +29,7 @@
 
     transition: color 0.1s;
     color: #858BB5;
+    cursor: pointer;
 }
 
 .refreshButton:hover {
@@ -70,6 +71,7 @@
 
     transition: background 0.1s, color 0.1s;
     color: #858BB5;
+    cursor: pointer;
 }
 
 .control > * {

diff --git a/src/components/TitleBar/index.tsx b/src/components/TitleBar/index.tsx
@@ -7,6 +7,8 @@ import { createAndShowDialog } from "@app/dialogs";
 import YARCLogo from "@app/assets/YARCLong.svg?react";
 import { useEffect, useState } from "react";
 import { getVersion } from "@tauri-apps/api/app";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import TooltipWrapper from "../TooltipWrapper";
 
 const TitleBar: React.FC = () => {
     const [launcherVersion, setLauncherVersion] = useState("");
@@ -43,9 +45,11 @@ const TitleBar: React.FC = () => {
             }
         </div>
 
-        <div onClick={() => window.location.reload()} className={styles.refreshButton}>
-            <RefreshIcon />
-        </div>
+        <TooltipWrapper text="Check for App Updates (Reload Launcher)">
+            <div onClick={() => window.location.reload()} className={styles.refreshButton}>
+                <RefreshIcon />
+            </div>
+        </TooltipWrapper>
 
         <div className={styles.controls}>
             <div onClick={() => appWindow.minimize()} className={styles.control}>

diff --git a/src/components/TooltipWrapper/TooltipWrapper.module.css b/src/components/TooltipWrapper/TooltipWrapper.module.css
@@ -1,29 +1,29 @@
-.TooltipContent {
+.content {
     border-radius: 6px;
-    padding: 8px;
+    padding: 5px 7px;
     font-size: 15px;
     line-height: 1;
     user-select: none;
     animation-duration: 400ms;
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
     will-change: transform, opacity;
 
-    background-color: black;
-    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    background-color: white;
+    box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.4);
 
-    color: white;
+    color: #41475F;
     font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     line-height: normal;
 }
 
-.TooltipArrow {
-    fill: black;
+.content[data-state="delayed-open"] {
+    animation-name: fade;
 }
 
-.TooltipContent[data-state="delayed-open"] {
-    animation-name: fade;
+.arrow {
+    fill: white;
 }
 
 @keyframes fade {
@@ -34,4 +34,4 @@
     to {
         opacity: 1;
     }
-}
+}
diff --git a/src/components/TooltipWrapper/index.tsx b/src/components/TooltipWrapper/index.tsx
@@ -4,25 +4,24 @@ import React from "react";
 
 type Props = React.PropsWithChildren<{
     text: string,
-    className?: string,
+    side?: "left" | "right" | "top" | "bottom",
+    sideOffset?: number
 }>;
 
-const TooltipWrapper: React.FC<Props> = ({ children, text, className }: Props) => {
-    return <Tooltip.Provider delayDuration={200}>
+const TooltipWrapper: React.FC<Props> = ({ children, text, side, sideOffset }: Props) => {
+    return <Tooltip.Provider delayDuration={600}>
         <Tooltip.Root>
             <Tooltip.Trigger asChild>
-                <div className={className}>
-                    {children}
-                </div>
+                {children}
             </Tooltip.Trigger>
             <Tooltip.Portal>
-                <Tooltip.Content className={styles.TooltipContent}>
+                <Tooltip.Content className={styles.content} side={side} sideOffset={sideOffset}>
                     {text}
-                    <Tooltip.Arrow className={styles.TooltipArrow} />
+                    <Tooltip.Arrow className={styles.arrow} />
                 </Tooltip.Content>
             </Tooltip.Portal>
         </Tooltip.Root>
     </Tooltip.Provider>;
 };
 
-export default TooltipWrapper;
+export default TooltipWrapper;
diff --git a/src/routes/AppProfile/index.tsx b/src/routes/AppProfile/index.tsx
@@ -15,6 +15,7 @@ import { askOpenUrl } from "@app/utils/safeUrl";
 import AppSettings from "./AppSettings";
 import { useEffect, useState } from "react";
 import Setlist from "../../components/Setlist";
+import TooltipWrapper from "@app/components/TooltipWrapper";
 
 function AppProfile() {
     const { uuid } = useParams();
@@ -98,14 +99,17 @@ function AppProfile() {
                 </div>
                 <div className={styles.bannerOptionsMain}>
                     {profile.type === "application" &&
-                        <Button color={ButtonColor.DARK} rounded border
-                            style={{padding: "15px"}} onClick={() => setSettingsOption(true)}>
+                        <TooltipWrapper text="Profile Settings" sideOffset={3}>
+                            <Button color={ButtonColor.DARK} rounded border
+                                style={{padding: "15px"}} onClick={() => setSettingsOption(true)}>
 
-                            <SettingsIcon width={24} height={24} />
-                        </Button>
+                                <SettingsIcon width={24} height={24} />
+                            </Button>
+                        </TooltipWrapper>
                     }
 
                     <LaunchButton profileState={profileState} />
+
                     <MoreDropdown profileState={profileState} />
                 </div>
             </div>