From 9d64f7f0b4b6d40def556fa5ce7862a561f5b179 Mon Sep 17 00:00:00 2001
From: RandyJC <rchompff@gmail.com>
Date: Tue, 9 Dec 2025 11:44:11 +0100
Subject: [PATCH] fix branding

---
 packages/web/src/components/BrandHeading.tsx  | 23 +++++++++++++++++++
 .../web/src/components/game/GameWrapper.tsx   |  8 +------
 .../game/create/ManagerPassword.tsx           | 22 ++++++++++--------
 .../src/components/game/join/BrandShell.tsx   | 13 +++++++++++
 .../web/src/components/game/join/Room.tsx     |  7 ++++--
 .../web/src/components/game/join/Username.tsx | 19 ++++++++-------
 6 files changed, 66 insertions(+), 26 deletions(-)
 create mode 100644 packages/web/src/components/BrandHeading.tsx
 create mode 100644 packages/web/src/components/game/join/BrandShell.tsx

diff --git a/packages/web/src/components/BrandHeading.tsx b/packages/web/src/components/BrandHeading.tsx
new file mode 100644
index 0000000..a3838df
--- /dev/null
+++ b/packages/web/src/components/BrandHeading.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { useThemeStore } from "@rahoot/web/stores/theme"
+import clsx from "clsx"
+
+type Props = {
+  className?: string
+}
+
+const BrandHeading = ({ className }: Props) => {
+  const { brandName } = useThemeStore()
+  const label = brandName || "Rahoot!"
+
+  return (
+    <div className={clsx("text-center", className)}>
+      <div className="inline-flex rounded-md bg-white/90 px-4 py-2 text-3xl font-black text-[#f7931e] shadow-sm">
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export default BrandHeading
diff --git a/packages/web/src/components/game/GameWrapper.tsx b/packages/web/src/components/game/GameWrapper.tsx
index 680fe57..ca71cbc 100644
--- a/packages/web/src/components/game/GameWrapper.tsx
+++ b/packages/web/src/components/game/GameWrapper.tsx
@@ -37,7 +37,7 @@ const GameWrapper = ({
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
-  const { backgroundUrl, brandName, setBackground, setBrandName } = useThemeStore()
+  const { backgroundUrl, setBackground, setBrandName } = useThemeStore()
   const [isDisabled, setIsDisabled] = useState(false)
   const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
@@ -109,12 +109,6 @@ const GameWrapper = ({
               </div>
             )}
 
-            <div className="flex flex-1 items-center justify-center">
-              <span className="rounded-md bg-white/90 px-3 py-1 text-sm font-semibold text-gray-800 shadow">
-                {brandName}
-              </span>
-            </div>
-
             {manager && next && (
               <Button
                 className={clsx("self-end bg-white px-4 text-black!", {
diff --git a/packages/web/src/components/game/create/ManagerPassword.tsx b/packages/web/src/components/game/create/ManagerPassword.tsx
index 3ac5b7f..9057cf4 100644
--- a/packages/web/src/components/game/create/ManagerPassword.tsx
+++ b/packages/web/src/components/game/create/ManagerPassword.tsx
@@ -1,6 +1,7 @@
 import Button from "@rahoot/web/components/Button"
 import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
+import BrandHeading from "@rahoot/web/components/BrandHeading"
 import { useEvent } from "@rahoot/web/contexts/socketProvider"
 import { KeyboardEvent, useState } from "react"
 import toast from "react-hot-toast"
@@ -27,15 +28,18 @@ const ManagerPassword = ({ onSubmit }: Props) => {
   })
 
   return (
-    <Form>
-      <Input
-        type="password"
-        onChange={(e) => setPassword(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Manager password"
-      />
-      <Button onClick={handleSubmit}>Submit</Button>
-    </Form>
+    <div className="flex w-full max-w-xl flex-col items-center gap-6">
+      <BrandHeading />
+      <Form>
+        <Input
+          type="password"
+          onChange={(e) => setPassword(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Manager password"
+        />
+        <Button onClick={handleSubmit}>Submit</Button>
+      </Form>
+    </div>
   )
 }
 
diff --git a/packages/web/src/components/game/join/BrandShell.tsx b/packages/web/src/components/game/join/BrandShell.tsx
new file mode 100644
index 0000000..5c00737
--- /dev/null
+++ b/packages/web/src/components/game/join/BrandShell.tsx
@@ -0,0 +1,13 @@
+"use client"
+
+import BrandHeading from "@rahoot/web/components/BrandHeading"
+import { PropsWithChildren } from "react"
+
+const BrandShell = ({ children }: PropsWithChildren) => (
+  <div className="flex min-h-screen flex-col items-center justify-center gap-6 px-4">
+    <BrandHeading />
+    {children}
+  </div>
+)
+
+export default BrandShell
diff --git a/packages/web/src/components/game/join/Room.tsx b/packages/web/src/components/game/join/Room.tsx
index f9adeb4..f9bbab8 100644
--- a/packages/web/src/components/game/join/Room.tsx
+++ b/packages/web/src/components/game/join/Room.tsx
@@ -3,6 +3,7 @@ import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
+import BrandShell from "@rahoot/web/components/game/join/BrandShell"
 import { KeyboardEvent, useState } from "react"
 
 const Room = () => {
@@ -25,14 +26,16 @@ const Room = () => {
   })
 
   return (
-    <Form>
+    <BrandShell>
+      <Form>
       <Input
         onChange={(e) => setInvitation(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="PIN Code here"
       />
       <Button onClick={handleJoin}>Submit</Button>
-    </Form>
+      </Form>
+    </BrandShell>
   )
 }
 
diff --git a/packages/web/src/components/game/join/Username.tsx b/packages/web/src/components/game/join/Username.tsx
index 9387e63..07c82c0 100644
--- a/packages/web/src/components/game/join/Username.tsx
+++ b/packages/web/src/components/game/join/Username.tsx
@@ -4,6 +4,7 @@ import { STATUS } from "@rahoot/common/types/game/status"
 import Button from "@rahoot/web/components/Button"
 import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
+import BrandShell from "@rahoot/web/components/game/join/BrandShell"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 
@@ -42,14 +43,16 @@ const Username = () => {
   })
 
   return (
-    <Form>
-      <Input
-        onChange={(e) => setUsername(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Username here"
-      />
-      <Button onClick={handleLogin}>Submit</Button>
-    </Form>
+    <BrandShell>
+      <Form>
+        <Input
+          onChange={(e) => setUsername(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Username here"
+        />
+        <Button onClick={handleLogin}>Submit</Button>
+      </Form>
+    </BrandShell>
   )
 }