feat(web): better tooltips and uniformity (#474)

* - fix: changed all {text,bg}-{teal,indigo}-* color properties to {text,bg}-{blue}-* so there is only one dominant primary color in the UI -- blue
- enhancement: added `cursor: pointer` to the PageButton component (used in pagination)
- enhancement: modified TitleCell to use the new Tooltip component and modified the width selectors to a more sane default value, now instead of scrolling one just has to tap the cell to see it's untruncated value
- enhancement: modified the Tooltip component to use react-popper-tooltip (which in turn uses popper.js) which is a much better alternative, since it uses auto-positioning in case there's not enough space and some things aren't as broken as in the previous version (e.g. there was a problem with forcing the previous tooltip to use a specific width)
- enhancement: added a useMedia hook selector from the react-use repository, which might come in handy in the future for better/easier decoupling of Desktop and Mobile UI/UX patterns via JS (versus CSS-only)
- enhancement: made the mobile navbar more visible and clear. also fixed previous path === "/" bug which was fixed on desktop.
- fix: fixed table headers/footers so they're rounded
- enhancement: made pagination components more compact (buttons and show N result selector)

* changed {ring, border}-indigo-* to ring-blue-*

* build: add yarn.lock

* fix: formatting warnings

* fix: formatting warnings

* fix: more formatting warnings

* fix: more formatting

web/src/components/tooltips/Tooltip.tsx

@@ -1,16 +1,62 @@
-import { ReactNode } from "react";
+import * as React from "react";
+import type { ReactNode } from "react";
+import { usePopperTooltip } from "react-popper-tooltip";
+import { classNames } from "../../utils";
+
+interface TooltipProps {
+  label: ReactNode;
+  title?: ReactNode;
+  maxWidth?: string;
+  children: ReactNode;
+}
+
+export const Tooltip = ({
+  label,
+  title,
+  children,
+  maxWidth = "max-w-sm"
+}: TooltipProps) => {
+  const {
+    // TODO?: getArrowProps,
+    getTooltipProps,
+    setTooltipRef,
+    setTriggerRef,
+    visible
+  } = usePopperTooltip({
+    trigger: ["click"],
+    interactive: false
+  });
 
-export const Tooltip = ({ children, button } : {
-  message?: string, children: ReactNode, button: ReactNode
-}) => {
   return (
-    <div className="relative flex flex-col items-center group">
-      {button}
-      <div className="absolute bottom-0 flex-col items-center hidden mb-6 group-hover:flex">
-        <span className="z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
-          {children}
-        </span>
+    <>
+      <div ref={setTriggerRef} className="truncate">
+        {label}
       </div>
-    </div>
+      {visible && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({
+            className: classNames(
+              maxWidth,
+              "rounded-md border border-gray-300 text-black text-xs shadow-lg dark:text-white dark:border-gray-700 dark:shadow-2xl"
+            )
+          })}
+        >
+          {title ? (
+            <div className="p-2 border-b border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-800 rounded-t-md">
+              {title}
+            </div>
+          ) : null}
+          <div
+            className={classNames(
+              title ? "" : "rounded-t-md",
+              "py-1 px-2 rounded-b-md bg-white dark:bg-gray-900"
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      )}
+    </>
   );
 };