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/tailwind.config.js

@@ -1,36 +1,36 @@
-const colors = require('tailwindcss/colors')
+const colors = require("tailwindcss/colors")
 
 module.exports = {
-    content: [
-        './src/**/*.{tsx,ts,html,css}',
-    ],
-    safelist: [
-        'col-span-1',
-        'col-span-2',
-        'col-span-3',
-        'col-span-4',
-        'col-span-5',
-        'col-span-6',
-        'col-span-7',
-        'col-span-8',
-        'col-span-9',
-        'col-span-10',
-        'col-span-11',
-        'col-span-12',
-    ],
-    // purge: false,
-    darkMode: 'class', // or 'media' or 'class'
-    theme: {
-        extend: {
-            colors: {
-                gray: colors.zinc,
-            },
-        },
+  content: [
+    "./src/**/*.{tsx,ts,html,css}",
+  ],
+  safelist: [
+    "col-span-1",
+    "col-span-2",
+    "col-span-3",
+    "col-span-4",
+    "col-span-5",
+    "col-span-6",
+    "col-span-7",
+    "col-span-8",
+    "col-span-9",
+    "col-span-10",
+    "col-span-11",
+    "col-span-12",
+  ],
+  // purge: false,
+  darkMode: "class", // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        gray: colors.zinc,
+      },
     },
-    variants: {
-        extend: {},
-    },
-    plugins: [
-        require('@tailwindcss/forms'),
-    ],
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+  ],
 }