feat: dashboard 2.0 redesign (#124)

* feat: add patterned background to boards

* feat: setup dashboard 2.0

* fix: prevent patterned background from overlaying buttons

* feat: set max width for main card view

* feat: adjust colour scheme for card view

* feat: adjust dashboard border colour scheme and radius

* fix: use correct colour for description placeholder

* fix: use getLayout to persist layout state across pages

* feat: reduce max width for settings and members pages

* feat: add feedback button and modal

* feat: adjust page max width

* feat: extend mobile layout support

* fix: hide pro badge when collapsed

* feat: tweak nav styling for light mode

* feat: tweak skeleton loaders for board list

* feat: extend list max height

* fix: hide side nav right border on desktop

* chore: update hero images

* chore: update hero images for docs

* chore: update translations

apps/web/src/components/ReactiveButton.tsx

@@ -1,37 +1,51 @@
 import Link from "next/link";
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";
 
 import LottieIcon from "~/components/LottieIcon";
-
-function classNames(...classes: string[]): string {
-  return classes.filter(Boolean).join(" ");
-}
+import { useIsMobile } from "~/hooks/useMediaQuery";
 
 const Button: React.FC<{
   href: string;
   current: boolean;
   name: string;
   json: object;
-}> = ({ href, current, name, json }) => {
+  isCollapsed?: boolean;
+  onCloseSideNav?: () => void;
+}> = ({ href, current, name, json, isCollapsed = false, onCloseSideNav }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [index, setIndex] = useState(0);
+  const isMobile = useIsMobile();
 
   const handleMouseEnter = () => {
     setIsHovered(true);
     setIndex((index) => index + 1);
   };
 
+  const handleClick = () => {
+    if (onCloseSideNav && isMobile) {
+      onCloseSideNav();
+    }
+  };
+
   return (
     <Link
       href={href}
       onMouseEnter={handleMouseEnter}
-      className={classNames(
-        current ? "bg-light-200 dark:bg-dark-200" : "dark:bg-dark-50",
-        "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-200",
+      onClick={handleClick}
+      className={twMerge(
+        "group flex h-[34px] items-center rounded-md p-1.5 text-sm font-normal leading-6 hover:bg-light-200 hover:text-light-1000 dark:hover:bg-dark-200 dark:hover:text-dark-1000",
+        current
+          ? "bg-light-200 text-light-1000 dark:bg-dark-200 dark:text-dark-1000"
+          : "text-neutral-600 dark:bg-dark-100 dark:text-dark-900",
+        isCollapsed
+          ? "justify-start gap-x-3 md:justify-center md:gap-x-0"
+          : "gap-x-3",
       )}
+      title={isCollapsed ? name : undefined}
     >
       <LottieIcon index={index} json={json} isPlaying={isHovered} />
-      {name}
+      <span className={twMerge(isCollapsed && "md:hidden")}>{name}</span>
     </Link>
   );
 };