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/hooks/hooks.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export function useToggle(initialValue = false): [boolean, () => void] {
   const [value, setValue] = useState(initialValue);
@@ -6,3 +6,50 @@ export function useToggle(initialValue = false): [boolean, () => void] {
 
   return [value, toggle];
 }
+
+const isBrowser = typeof window !== "undefined";
+
+const getInitialState = (query: string, defaultState?: boolean) => {
+  // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+  if (defaultState !== undefined) {
+    return defaultState;
+  }
+
+  if (isBrowser) {
+    return window.matchMedia(query).matches;
+  }
+
+  // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
+    );
+  }
+
+  return false;
+};
+
+export const useMedia = (query: string, defaultState?: boolean) => {
+  const [state, setState] = useState(getInitialState(query, defaultState));
+
+  useEffect(() => {
+    let mounted = true;
+    const mql = window.matchMedia(query);
+    const onChange = () => {
+      if (!mounted) {
+        return;
+      }
+      setState(!!mql.matches);
+    };
+
+    mql.addListener(onChange);
+    setState(mql.matches);
+
+    return () => {
+      mounted = false;
+      mql.removeListener(onChange);
+    };
+  }, [query]);
+
+  return state;
+};