fix branding

packages/web/src/components/BrandHeading.tsx

@@ -5,17 +5,27 @@ import clsx from "clsx"
 
 type Props = {
   className?: string
+  size?: "md" | "lg"
 }
 
-const BrandHeading = ({ className }: Props) => {
+const BrandHeading = ({ className, size = "lg" }: Props) => {
   const { brandName } = useThemeStore()
   const label = brandName || "Rahoot!"
 
+  const sizeClass =
+    size === "lg"
+      ? "text-4xl md:text-5xl"
+      : "text-2xl md:text-3xl"
+
   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
+      className={clsx(
+        "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg",
+        sizeClass,
+        className,
+      )}
+    >
+      {label}
     </div>
   )
 }

packages/web/src/components/game/create/ManagerPassword.tsx

@@ -1,7 +1,6 @@
 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"
@@ -28,18 +27,15 @@ const ManagerPassword = ({ onSubmit }: Props) => {
   })
 
   return (
-    <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>
+    <Form className="w-full max-w-xl">
+      <Input
+        type="password"
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Manager password"
+      />
+      <Button onClick={handleSubmit}>Submit</Button>
+    </Form>
   )
 }
 

packages/web/src/components/game/join/BrandShell.tsx

@@ -1,11 +1,9 @@
 "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>
 )