fix branding

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

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!", {

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

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

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

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