feat: remove dashboard header on mobile (cartridge-gg#65)

* fix: remove dashboard header on mobile

* fix: button styling

* fix: gap between header and sub tabs

* chore: simplify logic

* fix: arcade default icon

* fix: update gap between header and subtabs

* fix: play button hover

* style: update play button

---------

Co-authored-by: Bal7hazar <bal7hazar@proton.me>

Author: nrmnqdds

client/src/components/app.tsx

@@ -3,20 +3,20 @@ import { SceneLayout } from "@/components/scenes/layout";
 import { GamePage } from "./pages/game";
 import { useEffect } from "react";
 import { PlayerPage } from "./pages/player";
-import { useMediaQuery } from "@cartridge/ui";
 import { cn } from "@cartridge/ui/utils";
 import { useSidebar } from "@/hooks/sidebar";
 import { Header } from "./header";
 import { useProject } from "@/hooks/project";
 import { ThemeProvider } from "@/context/theme";
 import { useArcade } from "@/hooks/arcade";
+import { useDevice } from "@/hooks/device";
 
 export function App() {
   const { isOpen, toggle, handleTouchMove, handleTouchStart } = useSidebar();
   const { setPlayer } = useArcade();
   const { player } = useProject();
 
-  const isPWA = useMediaQuery("(display-mode: standalone)");
+  const isPWA = useDevice();
 
   useEffect(() => {
     setPlayer(player);
@@ -62,7 +62,7 @@ export function App() {
               </div>
               <div
                 className={cn(
-                  "relative grow h-full flex flex-col rounded-xl lg:gap-2 overflow-hidden border border-background-200 bg-background-100",
+                  "relative grow h-full flex flex-col rounded-xl lg:gap-3 overflow-hidden border border-background-200 bg-background-100",
                   player &&
                     "bg-background-125 shadow-[0px_0px_8px_0px_rgba(15,20,16,_0.50)]",
                 )}

client/src/components/editions/register.tsx

@@ -169,9 +169,8 @@ export function Register({
       <SheetTrigger asChild>
         {!edition ? (
           <Button
-            variant="secondary"
             size="icon"
-            className="w-8 h-8 bg-background-150 hover:bg-background-200 text-foreground-300 hover:text-foreground-100 border border-background-200"
+            className="w-8 h-8 bg-background-150 hover:bg-background-200 text-foreground-300 hover:text-foreground-100"
             disabled={!account}
           >
             <PlusIcon size="sm" variant="solid" />

client/src/components/modules/arcade-header.tsx

@@ -1,8 +1,8 @@
 import { cn } from "@cartridge/ui/utils";
 import { HTMLAttributes, SVGProps } from "react";
 import { SidebarToggle } from "../sidebar-toggle";
-import { useMediaQuery } from "@cartridge/ui";
 import { useTheme } from "@/hooks/context";
+import { useDevice } from "@/hooks/device";
 
 export interface ArcadeHeaderProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -11,7 +11,7 @@ export const ArcadeHeader = ({
   onClick,
   ...props
 }: ArcadeHeaderProps) => {
-  const isMobile = useMediaQuery("(max-width: 1024px)");
+  const isMobile = useDevice();
 
   return (
     <div

client/src/components/modules/edition-actions.tsx

@@ -56,9 +56,7 @@ const EditionActions = ({
             data-disabled={disabled}
             active={false}
             simplified={true}
-            className={cn(
-              "bg-background-150 hover:bg-background-200 data-[disabled=true]:hover:bg-background-150 text-foreground-300 hover:text-foreground-200 data-[disabled=true]:hover:text-foreground-300 data-[disabled=true]:cursor-default border border-background-200 h-8 w-full flex items-center justify-start gap-1 px-1",
-            )}
+            className="bg-background-150 hover:bg-background-200 data-[disabled=true]:hover:bg-background-150 text-foreground-300 hover:text-foreground-200 data-[disabled=true]:hover:text-foreground-300 data-[disabled=true]:cursor-default h-8 w-full flex items-center justify-start gap-1 px-1"
           >
             {certified && whitelisted ? (
               <VerifiedIcon size="sm" />

client/src/components/modules/game-social.tsx

@@ -25,7 +25,7 @@ export const GameSocialWebsite = ({
       href={website}
       label={label ? "Play" : undefined}
       variant={variant}
-      className="text-primary justify-center text-base/[20px] tracking-wide px-2 py-2.5 h-10"
+      className="text-spacer-100 bg-primary hover:bg-primary hover:opacity-80 justify-center text-base/[20px] lg:px-4 py-2.5"
     />
   );
 };

client/src/components/modules/game-socials.tsx

@@ -11,7 +11,7 @@ import {
 } from "./game-social";
 import ArcadeMenuButton from "./menu-button";
 
-const gameSocialsVariants = cva("flex gap-2", {
+const gameSocialsVariants = cva("flex gap-3", {
   variants: {
     variant: {
       darkest: "",

client/src/components/pages/game.tsx

@@ -15,10 +15,12 @@ import arcade from "@/assets/arcade-logo.png";
 import { GameSocialWebsite } from "../modules/game-social";
 import { useProject } from "@/hooks/project";
 import { joinPaths } from "@/helpers";
+import { useDevice } from "@/hooks/device";
 
 export function GamePage() {
   const { game, edition } = useProject();
   const { tab } = useProject();
+  const { isMobile } = useDevice();
 
   const location = useLocation();
   const navigate = useNavigate();
@@ -46,19 +48,31 @@ export function GamePage() {
     return Socials.merge(edition?.socials, game?.socials);
   }, [edition, game]);
 
+  const isDashboard = !(edition && game);
+
   return (
     <>
-      <div className="lg:h-[88px] w-full flex flex-col p-4 gap-4 lg:p-6 lg:pb-0 border-b border-background-200 lg:border-none">
+      <div
+        className={cn(
+          "lg:h-[88px] w-full flex flex-col gap-4 lg:p-6 lg:pb-0 border-b border-background-200 lg:border-none",
+          isDashboard ? "p-0" : "p-4",
+        )}
+      >
         <div className="flex items-start justify-between">
-          <div className="flex gap-3 items-center overflow-hidden">
+          <div
+            className={cn(
+              "flex gap-4 items-center overflow-hidden",
+              isDashboard && isMobile && "hidden",
+            )}
+          >
             <Thumbnail
               icon={edition?.properties.icon || game?.properties.icon || arcade}
               size="xl"
               className="min-w-16 min-h-16"
             />
             <div className="flex flex-col gap-2 overflow-hidden">
               <p className="font-semibold text-xl/[24px] text-foreground-100 truncate">
-                {game?.name ?? "Arcade Dashboard"}
+                {game?.name || "Dashboard"}
               </p>
               <Editions />
             </div>

client/tailwind.config.ts

@@ -8,6 +8,9 @@ const config = {
   ],
   presets: [cartridgeTWPreset],
   theme: {
+    screens: {
+      lg: "1160px",
+    },
     extend: {
       width: {
         desktop: "432px",