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/inputs/input.tsx

@@ -50,7 +50,7 @@ export const TextField = ({
             defaultValue={defaultValue}
             autoComplete={autoComplete}
             className={classNames(
-              meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
+              meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800",
               "mt-2 block w-full dark:text-gray-100 rounded-md"
             )}
@@ -114,7 +114,7 @@ export const TextArea = ({
             defaultValue={defaultValue}
             autoComplete={autoComplete}
             className={classNames(
-              meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
+              meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800",
               "mt-2 block w-full dark:text-gray-100 rounded-md"
             )}
@@ -176,7 +176,7 @@ export const PasswordField = ({
               id={name}
               type={isVisible ? "text" : "password"}
               autoComplete={autoComplete}
-              className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md")}
+              className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md")}
               placeholder={placeholder}
             />
 
@@ -231,7 +231,7 @@ export const NumberField = ({
             className={classNames(
               meta.touched && meta.error
                 ? "focus:ring-red-500 focus:border-red-500 border-red-500"
-                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
+                : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300",
               "mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:text-gray-100 rounded-md",
               disabled ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed" : "dark:bg-gray-800"
             )}

web/src/components/inputs/input_wide.tsx

@@ -44,7 +44,7 @@ export const TextFieldWide = ({
             type="text"
             value={field.value ? field.value : defaultValue ?? ""}
             onChange={field.onChange}
-            className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
+            className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
             placeholder={placeholder}
             hidden={hidden}
           />
@@ -99,7 +99,7 @@ export const PasswordFieldWide = ({
                 value={field.value ? field.value : defaultValue ?? ""}
                 onChange={field.onChange}
                 type={isVisible ? "text" : "password"}
-                className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full pr-10 dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
+                className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full pr-10 dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
                 placeholder={placeholder}
               />
               <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
@@ -158,7 +158,7 @@ export const NumberFieldWide = ({
             className={classNames(
               meta.touched && meta.error
                 ? "focus:ring-red-500 focus:border-red-500 border-red-500"
-                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
+                : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
               "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
             )}
             placeholder={placeholder}
@@ -216,7 +216,7 @@ export const SwitchGroupWide = ({
               form.setFieldValue(field?.name ?? "", value);
             }}
             className={classNames(
-              field.value ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-500",
+              field.value ? "bg-blue-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-500",
               "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             )}
           >

web/src/components/inputs/radio.tsx

@@ -58,7 +58,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
                               ? "rounded-bl-md rounded-br-md"
                               : "",
                             checked
-                              ? "border-1 bg-indigo-100 dark:bg-blue-900 border-indigo-400 dark:border-blue-600 z-10"
+                              ? "border-1 bg-blue-100 dark:bg-blue-900 border-blue-400 dark:border-blue-600 z-10"
                               : "border-gray-200 dark:border-gray-700",
                             "relative border p-4 flex cursor-pointer focus:outline-none"
                           )
@@ -69,7 +69,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
                             <span
                               className={classNames(
                                 checked
-                                  ? "bg-indigo-600 dark:bg-blue-500 border-transparent"
+                                  ? "bg-blue-600 dark:bg-blue-500 border-transparent"
                                   : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-300",
                                 "h-6 w-6 mt-1 cursor-pointer rounded-full border flex items-center justify-center"
                               )}

web/src/components/inputs/select.tsx

@@ -155,7 +155,7 @@ export function DownloadClientSelect({
                                     Client
                 </Listbox.Label>
                 <div className="mt-2 relative">
-                  <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                  <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
                     <span className="block truncate">
                       {field.value
                         ? clients.find((c) => c.id === field.value)?.name
@@ -186,7 +186,7 @@ export function DownloadClientSelect({
                             key={client.id}
                             className={({ active }) => classNames(
                               active
-                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
+                                ? "text-white dark:text-gray-100 bg-blue-600 dark:bg-gray-800"
                                 : "text-gray-900 dark:text-gray-300",
                               "cursor-default select-none relative py-2 pl-3 pr-9"
                             )}
@@ -206,7 +206,7 @@ export function DownloadClientSelect({
                                 {selected ? (
                                   <span
                                     className={classNames(
-                                      active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
+                                      active ? "text-white dark:text-gray-100" : "text-blue-600 dark:text-gray-700",
                                       "absolute inset-y-0 right-0 flex items-center pr-4"
                                     )}
                                   >
@@ -266,7 +266,7 @@ export const Select = ({
                   {label}
                 </Listbox.Label>
                 <div className="mt-2 relative">
-                  <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2.5 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                  <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2.5 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
                     <span className="block truncate">
                       {field.value
                         ? options.find((c) => c.value === field.value)?.label
@@ -298,7 +298,7 @@ export const Select = ({
                           className={({ active }) =>
                             classNames(
                               active
-                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
+                                ? "text-white dark:text-gray-100 bg-blue-600 dark:bg-gray-800"
                                 : "text-gray-900 dark:text-gray-300",
                               "cursor-default select-none relative py-2 pl-3 pr-9"
                             )
@@ -319,7 +319,7 @@ export const Select = ({
                               {selected ? (
                                 <span
                                   className={classNames(
-                                    active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
+                                    active ? "text-white dark:text-gray-100" : "text-blue-600 dark:text-gray-700",
                                     "absolute inset-y-0 right-0 flex items-center pr-4"
                                   )}
                                 >
@@ -371,7 +371,7 @@ export const SelectWide = ({
                     {label}
                   </Listbox.Label>
                   <div className="w-full">
-                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
                       <span className="block truncate">
                         {field.value
                           ? options.find((c) => c.value === field.value)?.label
@@ -403,7 +403,7 @@ export const SelectWide = ({
                             className={({ active }) =>
                               classNames(
                                 active
-                                  ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
+                                  ? "text-white dark:text-gray-100 bg-blue-600 dark:bg-gray-800"
                                   : "text-gray-900 dark:text-gray-300",
                                 "cursor-default select-none relative py-2 pl-3 pr-9"
                               )
@@ -424,7 +424,7 @@ export const SelectWide = ({
                                 {selected ? (
                                   <span
                                     className={classNames(
-                                      active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
+                                      active ? "text-white dark:text-gray-100" : "text-blue-600 dark:text-gray-700",
                                       "absolute inset-y-0 right-0 flex items-center pr-4"
                                     )}
                                   >

web/src/components/inputs/switch.tsx

@@ -1,12 +1,6 @@
 import React from "react";
+import type { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues } from "formik";
 import { Field } from "formik";
-import type {
-  FieldInputProps,
-  FieldMetaProps,
-  FieldProps,
-  FormikProps,
-  FormikValues
-} from "formik";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { classNames } from "../../utils";
 
@@ -47,7 +41,7 @@ export const Switch = ({
         }}
 
         className={classNames(
-          checked ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
+          checked ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
           "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
         )}
       >
@@ -81,7 +75,7 @@ const SwitchGroup = ({
   name,
   label,
   description,
-  heading,
+  heading
 }: SwitchGroupProps) => (
   <HeadlessSwitch.Group as="ol" className="py-4 flex items-center justify-between">
     {label && <div className="flex flex-col">
@@ -111,7 +105,7 @@ const SwitchGroup = ({
             setFieldValue(field?.name ?? "", value);
           }}
           className={classNames(
-            field.value ? "bg-teal-500 dark:bg-blue-500" : "bg-gray-200",
+            field.value ? "bg-blue-500" : "bg-gray-200",
             "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           )}
         >

web/src/components/inputs/text.tsx

@@ -117,7 +117,7 @@ export const TextInput = <TFormValues extends Record<string, unknown>>({
           aria-invalid={hasError}
           className={classNames(
             "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md",
-            hasError ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700"
+            hasError ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700"
           )}
           {...props}
           {...(register && register(name, rules))}
@@ -169,7 +169,7 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
             type={isVisible ? "text" : "password"}
             className={classNames(
               "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md",
-              hasError ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700"
+              hasError ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700"
             )}
             {...props}
             {...(register && register(name, rules))}