added tooltip for track selection

Author: Yooooomi

apps/client/src/components/History/History.tsx

@@ -43,6 +43,7 @@ export default function History() {
     <>
       <TitleCard
         title="Your history"
+        info="You can select tracks by clicking them, ctrl-clicking them to add to the selection. You can also use shift-click to expand your selection"
         right={
           <CheckboxWithText
             checked={followInterval}

apps/client/src/components/TitleCard/TitleCard.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import Text from "../Text";
 import s from "./index.module.css";
+import { ITooltip } from "../iTooltip/iTooltip";
 
 interface TitleCardProps {
   className?: string;
@@ -11,6 +12,7 @@ interface TitleCardProps {
   right?: React.ReactNode;
   noPadding?: boolean;
   noBorder?: boolean;
+  info?: string;
 }
 
 export default function TitleCard({
@@ -22,12 +24,16 @@ export default function TitleCard({
   right,
   noPadding,
   noBorder,
+  info,
 }: TitleCardProps) {
   return (
     <div className={clsx(s.root, className, { [s.noborder]: noBorder })}>
       <div className={clsx(s.container, { [s.nopadding]: noPadding })}>
         <div className={s.title}>
-          <Text element="h3" size='big'>{title}</Text>
+          <div className={s.left}>
+            <Text element="h3" size='big'>{title}</Text>
+            <ITooltip content={info} />
+          </div>
           <div>{right}</div>
         </div>
         <div className={clsx(s.content, { fade }, contentClassName)}>

apps/client/src/components/TitleCard/index.module.css

@@ -34,3 +34,11 @@
   position: relative;
   flex-grow: 1;
 }
+
+.left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+}

apps/client/src/components/iTooltip/iTooltip.tsx

@@ -0,0 +1,20 @@
+import { InfoOutline } from "@mui/icons-material";
+import { Tooltip } from "@mui/material";
+import s from './index.module.css'
+import { ReactNode } from "react";
+
+interface ITooltipProps {
+  content?: ReactNode;
+}
+
+export function ITooltip({ content }: ITooltipProps) {
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={content}>
+      <InfoOutline fontSize="small" className={s.icon} />
+    </Tooltip>
+  );
+}

apps/client/src/components/iTooltip/index.module.css

@@ -0,0 +1,3 @@
+.icon {
+  color: var(--text-grey);
+}

apps/client/src/scenes/Collaborative/Affinity/Affinity.tsx

@@ -1,7 +1,6 @@
-import { Button, Checkbox, MenuItem, Select, Tooltip } from "@mui/material";
+import { Button, Checkbox, MenuItem, Select } from "@mui/material";
 import { useState } from "react";
 import { useSelector } from "react-redux";
-import { HelpOutline } from "@mui/icons-material";
 import { AdminAccount } from "../../../services/redux/modules/admin/reducer";
 import { selectAccounts } from "../../../services/redux/modules/admin/selector";
 import { CollaborativeMode } from "../../../services/types";
@@ -17,6 +16,7 @@ import { useNavigateAndSearch } from "../../../services/hooks/hooks";
 import Header from "../../../components/Header";
 import { AFFINITY_PREFIX } from "./types";
 import s from "./index.module.css";
+import { ITooltip } from "../../../components/iTooltip/iTooltip";
 
 export default function Affinity() {
   const navigate = useNavigateAndSearch();
@@ -30,14 +30,14 @@ export default function Affinity() {
   const accounts = useSelector(selectAccounts);
 
   const add = (account: AdminAccount) => {
-      const newSet = new Set(ids);
-      if (newSet.has(account.id)) {
-        newSet.delete(account.id);
-      } else {
-        newSet.add(account.id);
-      }
-      setIds(newSet);
-    };
+    const newSet = new Set(ids);
+    if (newSet.has(account.id)) {
+      newSet.delete(account.id);
+    } else {
+      newSet.add(account.id);
+    }
+    setIds(newSet);
+  };
 
   const compute = () => {
     navigate(`/collaborative/top/${statType}/${mode}`, {
@@ -46,44 +46,39 @@ export default function Affinity() {
     });
   };
 
-  const tooltip = (
-    <Tooltip
-      title={
-        <div>
-          <p>
-            The affinity represents the probability the user like the same
-            songs. The affinity feature comes with two <strong>modes</strong>:
-          </p>
-          <ul>
-            <li>
-              <strong>Average</strong>: bases the ranking on the average of the
-              proportion each people listening to a specific element. If A
-              listens to a song 50% of his time, B 25% and C 0%, the average
-              will be 25%, thus ranking higher than A 12%, B 12% and C 12%.
-            </li>
-            <li>
-              <strong>Minima</strong>: bases the ranking on the minimal
-              proportion of each people listening to a specific element. If A
-              listens to a song 50% of his time, B 25% and C 0%, the minima will
-              be 0%, thus ranking lower than A 100% B 5% and C 1%.
-            </li>
-          </ul>
-          <p>
-            Average can mean that the top songs will satisfy a lot some people
-            while minima means that the top songs will be known by everyone but
-            not enjoyed as much for everyone.
-          </p>
-        </div>
-      }>
-      <HelpOutline className={s.question} />
-    </Tooltip>
+  const content = (
+    <div>
+      <p>
+        The affinity represents the probability the user like the same
+        songs. The affinity feature comes with two <strong>modes</strong>:
+      </p>
+      <ul>
+        <li>
+          <strong>Average</strong>: bases the ranking on the average of the
+          proportion each people listening to a specific element. If A
+          listens to a song 50% of his time, B 25% and C 0%, the average
+          will be 25%, thus ranking higher than A 12%, B 12% and C 12%.
+        </li>
+        <li>
+          <strong>Minima</strong>: bases the ranking on the minimal
+          proportion of each people listening to a specific element. If A
+          listens to a song 50% of his time, B 25% and C 0%, the minima will
+          be 0%, thus ranking lower than A 100% B 5% and C 1%.
+        </li>
+      </ul>
+      <p>
+        Average can mean that the top songs will satisfy a lot some people
+        while minima means that the top songs will be known by everyone but
+        not enjoyed as much for everyone.
+      </p>
+    </div>
   );
 
   return (
     <div className={s.root}>
       <Header
         hideInterval
-        title={<div className={s.title}>Affinity {tooltip}</div>}
+        title={<div className={s.title}>Affinity <ITooltip content={content} /></div>}
         subtitle="Compute the affinity you have with somebody using YourSpotify"
       />
       <div className={s.content}>

apps/client/src/scenes/Collaborative/Affinity/index.module.css

@@ -22,6 +22,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 8px;
 }
 
 .question {