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,6 +28,8 @@ const ManagerPassword = ({ onSubmit }: Props) => {
   })
 
   return (
+    <div className="flex w-full max-w-xl flex-col items-center gap-6">
+      <BrandHeading />
       <Form>
         <Input
           type="password"
@@ -36,6 +39,7 @@ const ManagerPassword = ({ onSubmit }: Props) => {
         />
         <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,6 +26,7 @@ const Room = () => {
   })
 
   return (
+    <BrandShell>
       <Form>
       <Input
         onChange={(e) => setInvitation(e.target.value)}
@@ -33,6 +35,7 @@ const Room = () => {
       />
       <Button onClick={handleJoin}>Submit</Button>
       </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,6 +43,7 @@ const Username = () => {
   })
 
   return (
+    <BrandShell>
       <Form>
         <Input
           onChange={(e) => setUsername(e.target.value)}
@@ -50,6 +52,7 @@ const Username = () => {
         />
         <Button onClick={handleLogin}>Submit</Button>
       </Form>
+    </BrandShell>
   )
 }