app components: restyle with more dark mode, Inter font, etc.

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) => (

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>

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={

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={() => {

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}

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 };

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>.

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>

app/components/header.tsx

@@ -130,15 +130,15 @@ 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 && (
             <DropdownMenu.Label>
               <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">

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,39 +72,45 @@ 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"
           id="name"
           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)}
           onBlur={onBlur}
           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>();