From 7353a99f033b37382c68c295c7f428163342687d Mon Sep 17 00:00:00 2001
From: Claire Nord <cnord@alum.mit.edu>
Date: Fri, 12 Jul 2024 22:47:21 -0700
Subject: [PATCH] app components: restyle with more dark mode, Inter font, etc.

---
 app/components/board/board.tsx                |  2 +-
 app/components/board/category.tsx             |  4 +-
 app/components/board/clue.tsx                 |  6 +-
 app/components/copy-link-button.tsx           |  4 +-
 app/components/dialog.tsx                     |  8 +--
 app/components/dropdown-menu.tsx              | 10 +--
 app/components/footer.tsx                     |  4 +-
 app/components/game.tsx                       | 69 +++++++++++++------
 app/components/header.tsx                     |  6 +-
 app/components/player/edit-player.tsx         | 42 ++++++-----
 app/components/player/player.tsx              | 37 +++++-----
 app/components/preview/preview.tsx            |  4 +-
 app/components/prompt/lockout.tsx             |  2 +-
 app/components/prompt/next-clue-form.tsx      |  4 +-
 app/components/prompt/prompt.tsx              |  6 +-
 app/components/upload.tsx                     |  2 +-
 app/root.tsx                                  |  2 +-
 app/routes/_index/route.tsx                   |  2 +-
 app/routes/room.$roomName_.summary/chart.tsx  |  2 +-
 app/routes/room.$roomName_.summary/route.tsx  |  2 +-
 .../room.$roomName_.summary/summary.tsx       |  6 +-
 app/supabase/client.ts                        |  2 +-
 app/utils/index.ts                            |  2 +-
 package.json                                  |  2 +-
 tailwind.config.js                            | 10 ++-
 25 files changed, 141 insertions(+), 99 deletions(-)

diff --git a/app/components/board/board.tsx b/app/components/board/board.tsx
index 98f9f0c8..ee8da6ee 100644
--- a/app/components/board/board.tsx
+++ b/app/components/board/board.tsx
@@ -54,7 +54,7 @@ function BoardComponent({
         className="mx-auto max-w-screen-lg"
         style={{ minWidth: `${board.categoryNames.length * 50}px` }}
       >
-        <table className="h-1 w-full table-fixed border-spacing-3 bg-black text-white">
+        <table className="h-1 w-full table-fixed bg-blue-bright text-white">
           <thead>
             <tr className="h-1">
               {board.categories.map((category) => (
diff --git a/app/components/board/category.tsx b/app/components/board/category.tsx
index 8a264685..f0718473 100644
--- a/app/components/board/category.tsx
+++ b/app/components/board/category.tsx
@@ -4,13 +4,13 @@ export function Category({ name, note }: { name: string; note?: string }) {
   const { fontSize, ref } = useFitText({ maxFontSize: 300 });
 
   return (
-    <th className="h-full border-2 border-b-4 border-black bg-blue-1000 leading-none sm:border-8 sm:border-b-12 sm:p-4">
+    <th className="h-full border-2 border-blue-925 bg-black/30 leading-none sm:p-4">
       <p
         style={{ fontSize }}
         ref={ref}
         className="flex h-20 w-full flex-col items-center justify-center"
       >
-        <span className="fond-bold text-shadow-md sm:text-shadow-lg font-impact uppercase">
+        <span className="text-shadow-md sm:text-shadow-lg font-inter font-bold uppercase">
           {name}
         </span>
       </p>
diff --git a/app/components/board/clue.tsx b/app/components/board/clue.tsx
index 47489949..743ffbc4 100644
--- a/app/components/board/clue.tsx
+++ b/app/components/board/clue.tsx
@@ -59,7 +59,7 @@ const ClueButton = React.forwardRef<HTMLButtonElement, ButtonProps & Props>(
           onKeyDown(event);
         }}
         className={classNames(
-          "group relative h-full w-full bg-blue-1000 px-4 py-3 transition-colors",
+          "group relative h-full w-full bg-blue-bright px-4 py-3 transition-colors",
           {
             "hover:bg-blue-700 focus:bg-blue-700": playable,
             "bg-slate-800": !playable,
@@ -71,7 +71,7 @@ const ClueButton = React.forwardRef<HTMLButtonElement, ButtonProps & Props>(
       >
         <p
           className={classNames(
-            "text-shadow-md sm:text-shadow-lg flex items-center justify-center gap-1 font-impact text-yellow-1000",
+            "text-shadow-md sm:text-shadow-lg flex items-center justify-center gap-1 font-inter font-bold text-yellow-1000",
             {
               "opacity-0 group-hover:opacity-50 group-focus:opacity-50":
                 answered,
@@ -89,7 +89,7 @@ ClueButton.displayName = "ClueButton";
 
 export function ClueComponent(props: Props) {
   return (
-    <td className="h-full sm:p-1">
+    <td className="h-full border-2 border-blue-925">
       {props.answered ? (
         <Popover
           content={
diff --git a/app/components/copy-link-button.tsx b/app/components/copy-link-button.tsx
index 23bd4ed4..fe2a31ee 100644
--- a/app/components/copy-link-button.tsx
+++ b/app/components/copy-link-button.tsx
@@ -23,8 +23,8 @@ export default function CopyLinkButton({
         type="button"
         className={
           (className ?? "") +
-          ` inline-flex items-center rounded-md p-1 text-slate-700
-          hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500
+          ` inline-flex items-center rounded-md p-1 text-slate-200
+          hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500
           focus:ring-offset-2`
         }
         onClick={() => {
diff --git a/app/components/dialog.tsx b/app/components/dialog.tsx
index 758cfb3d..c48535c7 100644
--- a/app/components/dialog.tsx
+++ b/app/components/dialog.tsx
@@ -40,17 +40,17 @@ export default function Dialog({
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
           className={`fixed bottom-0 left-0 right-0 top-0 grid
-          place-items-center overflow-y-auto bg-slate-500 bg-opacity-75
+          place-items-center overflow-y-auto bg-slate-500/75
           transition-opacity data-[state=open]:animate-overlayShow`}
         >
           <DialogPrimitive.Content
-            className={`rounded-md bg-white p-4 shadow-xl focus:outline-none
+            className={`rounded-md bg-blue-1000 p-4 shadow-xl focus:outline-none
             data-[state=open]:animate-contentShow sm:max-w-lg`}
           >
-            <DialogPrimitive.Title className="mb-4 text-2xl font-medium leading-6 text-blue-1000">
+            <DialogPrimitive.Title className="mb-4 text-2xl font-medium leading-6 text-white">
               {title}
             </DialogPrimitive.Title>
-            <DialogPrimitive.Description className="mb-5 mt-3 text-slate-500">
+            <DialogPrimitive.Description className="mb-5 mt-3 text-slate-300">
               {description}
             </DialogPrimitive.Description>
             {children}
diff --git a/app/components/dropdown-menu.tsx b/app/components/dropdown-menu.tsx
index 243416db..49fe3d4d 100644
--- a/app/components/dropdown-menu.tsx
+++ b/app/components/dropdown-menu.tsx
@@ -4,8 +4,8 @@ function Item(props: DropdownMenu.MenuItemProps) {
   return (
     <DropdownMenu.Item
       className={`group relative flex select-none items-center rounded-md p-1
-      text-slate-500 outline-none
-      data-[highlighted]:bg-slate-200 data-[highlighted]:text-slate-700`}
+      text-slate-200 outline-none
+      data-[highlighted]:bg-white/10`}
       {...props}
     >
       {props.children}
@@ -16,7 +16,7 @@ function Item(props: DropdownMenu.MenuItemProps) {
 function Content(props: DropdownMenu.MenuContentProps) {
   return (
     <DropdownMenu.Content
-      className={`w-56 rounded-md bg-white p-1 text-slate-900 shadow-md
+      className={`w-56 rounded-md bg-blue-1000 p-1 text-white shadow-md
           will-change-[opacity,transform]
           data-[side=bottom]:animate-slideUpAndFade
           data-[side=left]:animate-slideRightAndFade
@@ -26,7 +26,7 @@ function Content(props: DropdownMenu.MenuContentProps) {
       {...props}
     >
       {props.children}
-      <DropdownMenu.Arrow className="fill-white" />
+      <DropdownMenu.Arrow className="fill-blue-1000" />
     </DropdownMenu.Content>
   );
 }
@@ -37,4 +37,4 @@ const Portal = DropdownMenu.Portal;
 const Label = DropdownMenu.Label;
 const Separator = DropdownMenu.Separator;
 
-export { Root, Trigger, Portal, Content, Item, Label, Separator };
+export { Content, Item, Label, Portal, Root, Separator, Trigger };
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index 4bcb820b..c4bb8d0e 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -70,7 +70,7 @@ export default function Footer() {
   return (
     <footer
       className={classNames("flex justify-center py-4", {
-        "bg-slate-900": isInGame,
+        "bg-blue-1000": isInGame,
       })}
     >
       <Dialog
@@ -84,7 +84,7 @@ export default function Footer() {
         description="Jep! is a website for playing trivia puzzles with friends online."
         onClickClose={() => setShowModal(false)}
       >
-        <p className="text-slate-500">
+        <p className="text-slate-300">
           This website is open to contributions from developers of any level or
           experience. For more information or to report any issues, check out
           the project on <Anchor href={GITHUB_URL}>GitHub</Anchor>.
diff --git a/app/components/game.tsx b/app/components/game.tsx
index bf1e7f1e..e4fbc507 100644
--- a/app/components/game.tsx
+++ b/app/components/game.tsx
@@ -7,7 +7,7 @@ import Link from "~/components/link";
 import { PlayerScores } from "~/components/player";
 import Preview from "~/components/preview";
 import Prompt from "~/components/prompt";
-import { GameState, useEngineContext } from "~/engine";
+import { GameState, Player, useEngineContext } from "~/engine";
 import type { Game } from "~/models/convert.server";
 import useGameSound from "~/utils/use-sound";
 
@@ -19,6 +19,45 @@ export interface RoomProps {
   userId: string;
 }
 
+function CallToAction({
+  type,
+  isSingleLongFormClue,
+  boardController,
+  roomName,
+  userId,
+}: {
+  type: GameState;
+  isSingleLongFormClue: boolean;
+  boardController?: Player;
+  roomName: string;
+  userId: string;
+}) {
+  if (type === GameState.GameOver) {
+    return (
+      <>
+        <h2 className="text-xl font-semibold">Game over!</h2>
+        <Link to={`/room/${roomName}/summary`}>Review your game &rarr;</Link>
+      </>
+    );
+  }
+  if (isSingleLongFormClue) {
+    return (
+      <div className="italic text-slate-300">Let's go to the final clue!</div>
+    );
+  }
+  if (boardController) {
+    if (boardController.userId === userId) {
+      return <strong className="text-center">You control the board.</strong>;
+    }
+    return (
+      <strong className="text-center">
+        {boardController.name} has control of the board.
+      </strong>
+    );
+  }
+  return null;
+}
+
 /** GameComponent maintains the game state. */
 export default function GameComponent({
   game,
@@ -52,7 +91,7 @@ export default function GameComponent({
   const isSingleLongFormClue =
     board.categories.length === 1 &&
     board.categories[0].clues.length === 1 &&
-    board.categories[0].clues[0].longForm;
+    Boolean(board.categories[0].clues[0].longForm);
 
   return (
     <>
@@ -65,29 +104,19 @@ export default function GameComponent({
         roomId={roomId}
         userId={userId}
       />
-      <div className="flex grow flex-col bg-slate-900">
+      <div className="flex grow flex-col bg-blue-1000">
         <BoardComponent roomId={roomId} userId={userId} />
         <div
           className={`mx-auto flex w-full max-w-screen-lg flex-col gap-4 p-3
           text-slate-100 sm:p-6 md:p-12`}
         >
-          {type === GameState.GameOver ? (
-            <>
-              <h2 className="text-xl font-semibold">Game over!</h2>
-              <Link to={`/room/${roomName}/summary`}>
-                Review your game &rarr;
-              </Link>
-            </>
-          ) : isSingleLongFormClue ? (
-            <div className="italic text-slate-300">
-              Let's go to the final clue!
-            </div>
-          ) : boardController ? (
-            <div className="text-slate-300">
-              <span className="font-bold">{boardController.name} </span>
-              <span className="italic">is choosing the next clue.</span>
-            </div>
-          ) : null}
+          <CallToAction
+            boardController={boardController}
+            type={type}
+            isSingleLongFormClue={isSingleLongFormClue}
+            roomName={roomName}
+            userId={userId}
+          />
           <PlayerScores roomId={roomId} userId={userId} />
           <Connection state={connectionState} lastMessageAt={lastMessageAt} />
         </div>
diff --git a/app/components/header.tsx b/app/components/header.tsx
index f985cbc4..bb5e6343 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -130,7 +130,7 @@ function GameSettings({ game, url }: { game: Game; url: string }) {
           <DropdownMenu.Label className="p-1 font-bold">
             {game.title}
           </DropdownMenu.Label>
-          <DropdownMenu.Label className="p-1 text-slate-700">
+          <DropdownMenu.Label className="p-1 text-slate-400">
             {game.author} &middot; {game.copyright}
           </DropdownMenu.Label>
           {game.note && (
@@ -138,7 +138,7 @@ function GameSettings({ game, url }: { game: Game; url: string }) {
               <p className="break-words p-1 text-sm">{game.note}</p>
             </DropdownMenu.Label>
           )}
-          <DropdownMenu.Label className="p-1 text-sm text-slate-700">
+          <DropdownMenu.Label className="p-1 text-sm text-slate-400">
             {game.boards.length} round{game.boards.length === 1 ? "" : "s"}
           </DropdownMenu.Label>
 
@@ -200,7 +200,7 @@ export default function Header({
   const pathname = matches[matches.length - 1].pathname;
 
   return (
-    <nav className="bg-blue-1000 p-4">
+    <nav className="bg-blue-bright p-4">
       <div className="flex items-center justify-between">
         <Link to="/">
           <h1 className="text-shadow-md font-korinna text-2xl font-bold text-white">
diff --git a/app/components/player/edit-player.tsx b/app/components/player/edit-player.tsx
index 680a9eaa..f7ba5f66 100644
--- a/app/components/player/edit-player.tsx
+++ b/app/components/player/edit-player.tsx
@@ -16,7 +16,7 @@ function SendIcon() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="h-5 w-5"
+      className="h-5 w-5 opacity-50"
       role="img"
       aria-labelledby="send-title"
     >
@@ -33,7 +33,7 @@ function PencilIcon() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="h-5 w-5"
+      className="h-5 w-5 opacity-50"
       role="img"
       aria-labelledby="pencil-title"
     >
@@ -52,7 +52,7 @@ function EditPlayer({
   onBlur,
   onChangeName,
   onFocus,
-  winning = false,
+  winning,
 }: {
   hasBoardControl: boolean;
   loading: boolean;
@@ -61,7 +61,7 @@ function EditPlayer({
   onBlur: () => void;
   onChangeName: (name: string) => void;
   onFocus: () => void;
-  winning?: boolean;
+  winning: boolean;
 }) {
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const debouncedLoading = useDebounceEnd(loading, 100);
@@ -72,13 +72,12 @@ function EditPlayer({
   }
 
   return (
-    <PlayerScoreBox player={player} hasBoardControl={hasBoardControl}>
-      <div
-        className={`flex items-center gap-2 rounded-md text-slate-300
-        transition-colors
-        hover:bg-slate-800 hover:text-white
-        focus:bg-slate-800 focus:text-white`}
-      >
+    <PlayerScoreBox
+      player={player}
+      hasBoardControl={hasBoardControl}
+      winning={winning}
+    >
+      <div className="flex items-center gap-2 rounded-xl text-white">
         <input
           ref={inputRef}
           type="text"
@@ -86,7 +85,7 @@ function EditPlayer({
           name="name"
           className={`block w-full bg-transparent font-handwriting text-2xl
           font-bold
-          placeholder:font-sans placeholder:text-sm placeholder:font-normal`}
+          placeholder:font-sans placeholder:text-sm placeholder:font-normal placeholder:text-white placeholder:text-opacity-40`}
           placeholder="Enter your name"
           defaultValue={player.name}
           onChange={(e) => onChangeName(e.target.value)}
@@ -94,17 +93,24 @@ function EditPlayer({
           onFocus={handleFocus}
         />
         {debouncedLoading ? (
-          <LoadingSpinner className="text-blue-600" />
+          <LoadingSpinner className="px-3 py-2 text-blue-600" />
         ) : editing ? (
-          <button type="button" onClick={onBlur}>
+          <button
+            type="button"
+            onClick={onBlur}
+            className="rounded-xl bg-white/10 px-3 py-2"
+          >
             <SendIcon />
           </button>
         ) : (
-          <button type="button" onClick={handleFocus}>
+          <button
+            type="button"
+            onClick={handleFocus}
+            className="rounded-xl bg-white/10 px-3 py-2"
+          >
             <PencilIcon />
           </button>
         )}
-        {winning && <div className="ml-auto text-2xl">👑</div>}
       </div>
     </PlayerScoreBox>
   );
@@ -113,8 +119,8 @@ function EditPlayer({
 export function EditPlayerForm({
   roomId,
   userId,
-  winning = false,
-}: { winning?: boolean } & RoomProps) {
+  winning,
+}: { winning: boolean } & RoomProps) {
   const { players, soloDispatch, boardControl } = useEngineContext();
 
   const fetcher = useFetcher<Action>();
diff --git a/app/components/player/player.tsx b/app/components/player/player.tsx
index 834bb780..9ee23ea9 100644
--- a/app/components/player/player.tsx
+++ b/app/components/player/player.tsx
@@ -10,38 +10,38 @@ import { EditPlayerForm } from "./edit-player";
 const COMPOUND_EMOJI_REGEX =
   /\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u{200D}\p{Emoji}(\p{EMod}|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?)*|./gsu;
 
+/** PlayerScoreBox contains a player icon and their score. */
 export function PlayerScoreBox({
   player,
   hasBoardControl,
   children,
+  winning,
 }: {
   player: Player;
   hasBoardControl: boolean;
   children: React.ReactNode;
+  winning: boolean;
 }) {
   return (
     <div
-      className={classNames(
-        "flex gap-2 rounded-md border-2 bg-slate-700 p-2 shadow-md sm:p-3",
-        {
-          "border-transparent": !hasBoardControl,
-          "animate-borderPulse": hasBoardControl,
-        },
-      )}
+      className={classNames("flex gap-2 rounded-xl p-2 sm:p-3", {
+        "bg-white/5": !hasBoardControl,
+        "bg-blue-700": hasBoardControl,
+      })}
     >
       <PlayerIcon player={player} />
       <div className="w-full">
         {children}
-        <div
-          className={classNames(
-            "text-shadow-md w-1/3 grow font-impact text-xl sm:w-auto",
-            {
+        <div className="flex w-1/3 grow items-center justify-end gap-2 text-xl sm:w-auto">
+          {winning && <span>👑</span>}
+          <div
+            className={classNames("text-shadow-md font-inter font-bold", {
               "text-white": player.score >= 0,
               "text-red-400": player.score < 0,
-            },
-          )}
-        >
-          {formatDollars(player.score)}
+            })}
+          >
+            {formatDollars(player.score)}
+          </div>
         </div>
       </div>
     </div>
@@ -61,12 +61,15 @@ export function PlayerScore({
   winning: boolean;
 }) {
   return (
-    <PlayerScoreBox hasBoardControl={hasBoardControl} player={player}>
+    <PlayerScoreBox
+      hasBoardControl={hasBoardControl}
+      player={player}
+      winning={winning}
+    >
       <div className="flex w-full gap-2 text-2xl">
         <p className="font-handwriting font-bold text-slate-300">
           {player.name}
         </p>
-        {winning && <div className="ml-auto">👑</div>}
       </div>
     </PlayerScoreBox>
   );
diff --git a/app/components/preview/preview.tsx b/app/components/preview/preview.tsx
index 6e12537d..7ee83b1e 100644
--- a/app/components/preview/preview.tsx
+++ b/app/components/preview/preview.tsx
@@ -118,14 +118,14 @@ function PreviewRoundDialog({
             >
               {boardControlName}
             </span>{" "}
-            will start with control of the board.
+            starts with control of the board.
           </>
         )
       }
     >
       {round === 0 ? (
         <div className="flex flex-col gap-2">
-          <EditPlayerForm roomId={roomId} userId={userId} />
+          <EditPlayerForm roomId={roomId} userId={userId} winning={false} />
           <div className="flex flex-wrap gap-2">
             {Array.from(players.values()).map((p, i) => (
               <PlayerIcon key={i} player={p} />
diff --git a/app/components/prompt/lockout.tsx b/app/components/prompt/lockout.tsx
index c95361c2..15270b02 100644
--- a/app/components/prompt/lockout.tsx
+++ b/app/components/prompt/lockout.tsx
@@ -5,7 +5,7 @@ export function Lockout({ active }: { active: boolean }) {
   }
 
   return (
-    <div className="absolute left-0 top-0 h-full w-full bg-black bg-opacity-50">
+    <div className="absolute left-0 top-0 h-full w-full bg-black/50">
       <div
         className={`flex h-full w-full flex-col items-center justify-center
         text-6xl font-bold text-white md:text-7xl lg:text-9xl`}
diff --git a/app/components/prompt/next-clue-form.tsx b/app/components/prompt/next-clue-form.tsx
index ab4055d8..448de8e4 100644
--- a/app/components/prompt/next-clue-form.tsx
+++ b/app/components/prompt/next-clue-form.tsx
@@ -60,7 +60,7 @@ function PlayerScores({
                 {name}
               </span>
               <span
-                className={classNames("font-impact text-xl", {
+                className={classNames("font-inter text-xl font-bold", {
                   "text-white": score >= 0,
                   "text-red-400": score < 0,
                 })}
@@ -70,7 +70,7 @@ function PlayerScores({
             </div>
             <span
               className={classNames(
-                "text-shadow absolute -right-1/2 -top-1/4 animate-bounce whitespace-nowrap font-impact",
+                "text-shadow absolute -right-1/2 -top-1/4 animate-bounce whitespace-nowrap font-inter font-bold",
                 {
                   "text-green-300": correct,
                   "text-red-300": !correct,
diff --git a/app/components/prompt/prompt.tsx b/app/components/prompt/prompt.tsx
index 478c0a96..b8efd37f 100644
--- a/app/components/prompt/prompt.tsx
+++ b/app/components/prompt/prompt.tsx
@@ -9,8 +9,8 @@ import type { Action, Player } from "~/engine";
 import {
   CANT_BUZZ_FLAG,
   CLUE_TIMEOUT_MS,
-  QUANTIZATION_FACTOR_MS,
   GameState,
+  QUANTIZATION_FACTOR_MS,
   useEngineContext,
 } from "~/engine";
 import useKeyPress from "~/utils/use-key-press";
@@ -403,7 +403,7 @@ function ReadCluePrompt({
         if (
           buzzUserId !== userId &&
           buzz !== CANT_BUZZ_FLAG &&
-          (buzz + QUANTIZATION_FACTOR_MS) < deltaMs
+          buzz + QUANTIZATION_FACTOR_MS < deltaMs
         ) {
           submitBuzz(CLUE_TIMEOUT_MS + 1);
         }
@@ -845,7 +845,7 @@ export function ConnectedPrompt(props: RoomProps) {
     <Fade show={isOpen}>
       <div
         className={`relative flex w-screen flex-col justify-between
-        overflow-x-hidden overflow-y-scroll bg-blue-1000`}
+        overflow-x-hidden overflow-y-scroll bg-blue-bright`}
         style={{
           height: "100dvh",
         }}
diff --git a/app/components/upload.tsx b/app/components/upload.tsx
index a7973022..233097d2 100644
--- a/app/components/upload.tsx
+++ b/app/components/upload.tsx
@@ -122,7 +122,7 @@ export default function Upload({
           file?.name ?? "unknown"
         }" publicly?`}
       >
-        <div className="mb-4 flex flex-col gap-2 text-sm text-slate-500">
+        <div className="mb-4 flex flex-col gap-2 text-sm text-slate-300">
           <WarningMessage>
             As a guest, you will not be able to edit or delete the game later.
           </WarningMessage>
diff --git a/app/root.tsx b/app/root.tsx
index 5d136532..836e4ac7 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -66,7 +66,7 @@ export const links: LinksFunction = () => [
   },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Inter:wght@100..900&display=swap",
   },
   { rel: "stylesheet", href: stylesheet },
 ];
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
index 3f497989..29e418c6 100644
--- a/app/routes/_index/route.tsx
+++ b/app/routes/_index/route.tsx
@@ -21,7 +21,7 @@ import Search from "~/components/search";
 import Upload from "~/components/upload";
 import { getValidAuthSession } from "~/models/auth";
 import { getGames } from "~/models/game.server";
-import { getSolvesForUser, Solve } from "~/models/solves.server";
+import { Solve, getSolvesForUser } from "~/models/solves.server";
 import { getSessionFormState } from "~/session.server";
 import useDebounce from "~/utils/use-debounce";
 import useScrollToBottom from "~/utils/use-scroll";
diff --git a/app/routes/room.$roomName_.summary/chart.tsx b/app/routes/room.$roomName_.summary/chart.tsx
index 75f0df88..55d7eca2 100644
--- a/app/routes/room.$roomName_.summary/chart.tsx
+++ b/app/routes/room.$roomName_.summary/chart.tsx
@@ -12,7 +12,7 @@ import {
   YAxis,
 } from "recharts";
 import { Action, gameEngine } from "~/engine";
-import { getNumCluesInBoard, State, stateFromGame } from "~/engine/state";
+import { State, getNumCluesInBoard, stateFromGame } from "~/engine/state";
 import { Game } from "~/models/game.server";
 import { stringToHslColor } from "~/utils";
 
diff --git a/app/routes/room.$roomName_.summary/route.tsx b/app/routes/room.$roomName_.summary/route.tsx
index cc5eaee4..86ea7a1c 100644
--- a/app/routes/room.$roomName_.summary/route.tsx
+++ b/app/routes/room.$roomName_.summary/route.tsx
@@ -83,7 +83,7 @@ export default function PlayGame() {
     .map((p) => p.name);
 
   return (
-    <div className="flex grow flex-col bg-slate-900 text-white">
+    <div className="flex grow flex-col bg-blue-1000 text-white">
       <div
         className={`mx-auto flex w-full max-w-screen-lg flex-col gap-4 p-3
           text-slate-100 sm:p-6 md:p-12`}
diff --git a/app/routes/room.$roomName_.summary/summary.tsx b/app/routes/room.$roomName_.summary/summary.tsx
index 2da05225..5bc8de61 100644
--- a/app/routes/room.$roomName_.summary/summary.tsx
+++ b/app/routes/room.$roomName_.summary/summary.tsx
@@ -96,8 +96,8 @@ function PostGameClue({ clue, state, round, i, j }: Props) {
       <td className="h-full sm:p-1">
         <div className="h-full w-full bg-slate-800 px-4 py-3">
           <p
-            className={`text-shadow-md sm:text-shadow-lg flex items-center
-            justify-center font-impact text-white opacity-75 transition-opacity
+            className={`text-shadow-md sm:text-shadow-lg flex items-center justify-center
+            font-inter font-bold text-white opacity-75 transition-opacity
             group-hover:opacity-100`}
           >
             {clue.wagerable && clueAnswer.isAnswered ? null : (
@@ -140,7 +140,7 @@ function PostGameClue({ clue, state, round, i, j }: Props) {
         >
           <p
             className={`text-shadow-md sm:text-shadow-lg flex items-center
-            justify-center font-impact text-white opacity-75 transition-opacity
+            justify-center font-inter font-bold text-white opacity-75 transition-opacity
             group-hover:opacity-100`}
           >
             {clue.wagerable ? null : (
diff --git a/app/supabase/client.ts b/app/supabase/client.ts
index 6c7f68a5..43a40e59 100644
--- a/app/supabase/client.ts
+++ b/app/supabase/client.ts
@@ -63,4 +63,4 @@ function getSupabaseAdmin() {
   return getSupabaseClient(SUPABASE_SERVICE_ROLE_KEY);
 }
 
-export { getSupabaseAdmin, getSupabase };
+export { getSupabase, getSupabaseAdmin };
diff --git a/app/utils/index.ts b/app/utils/index.ts
index c57f3d2a..8082899c 100644
--- a/app/utils/index.ts
+++ b/app/utils/index.ts
@@ -3,11 +3,11 @@ export * from "./http.server";
 export * from "./is-browser";
 export { getRandomEmoji, getRandomName } from "./name";
 export {
+  GITHUB_URL,
   cyrb53,
   formatDollars,
   formatDollarsWithSign,
   generateGrid,
   getRandomWord,
-  GITHUB_URL,
   stringToHslColor,
 } from "./utils";
diff --git a/package.json b/package.json
index 4ce8dd05..7afd44b9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "build": "remix build",
     "db:start": "npx supabase start -x gotrue,realtime,storage-api,imgproxy,inbucket,pgadmin-schema-diff,migra,postgres-meta,studio,deno-relay",
     "dev": "remix dev",
-    "format": "prettier --write .",
+    "format": "prettier --write . --log-level silent",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "node --require dotenv/config node_modules/@remix-run/serve/dist/cli.js build/index.js",
     "test": "vitest --coverage",
diff --git a/tailwind.config.js b/tailwind.config.js
index 5436e17b..b071660b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,15 +31,19 @@ module.exports = {
         12: "12px",
       },
       backgroundColor: {
-        "blue-1000": "#120081",
+        "blue-1000": "#0b163f",
+        "blue-bright": "#0c0a79",
+      },
+      borderColor: {
+        "blue-925": "#222167",
       },
       colors: {
-        "blue-1000": "#120081",
+        "blue-1000": "#0b163f",
         "yellow-1000": "#d69f4c",
       },
       fontFamily: {
         korinna: ["Korinna-Agency", "Times New Roman", "Times", "serif"],
-        impact: ["Impact", "Times New Roman", "Times", "serif"],
+        inter: ["Inter", "Times New Roman", "Times", "serif"],
         handwriting: ["Caveat", "cursive"],
       },
       keyframes: {