fix branding

packages/web/src/app/(auth)/layout.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import logo from "@rahoot/web/assets/logo.svg"
+import BrandHeading from "@rahoot/web/components/BrandHeading"
 import Loader from "@rahoot/web/components/Loader"
 import { useSocket } from "@rahoot/web/contexts/socketProvider"
-import Image from "next/image"
 import { PropsWithChildren, useEffect } from "react"
 
 const AuthLayout = ({ children }: PropsWithChildren) => {
@@ -19,10 +18,10 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
       <section className="relative flex min-h-screen flex-col items-center justify-center">
         <div className="pointer-events-none absolute h-full w-full overflow-hidden">
           <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-        </div>
+      </div>
 
-        <Image src={logo} className="mb-6 h-32" alt="logo" />
+        <BrandHeading className="mb-6" size="lg" />
         <Loader className="h-23" />
         <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
           Loading...
@@ -38,7 +37,7 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
         <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
       </div>
 
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      <BrandHeading className="mb-6" size="lg" />
       {children}
     </section>
   )

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
-      <div className="inline-flex rounded-md bg-white/90 px-4 py-2 text-3xl font-black text-[#f7931e] shadow-sm">
+      className={clsx(
-        {label}
+        "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg",
-      </div>
+        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">
+    <Form className="w-full max-w-xl">
-      <BrandHeading />
+      <Input
-      <Form>
+        type="password"
-        <Input
+        onChange={(e) => setPassword(e.target.value)}
-          type="password"
+        onKeyDown={handleKeyDown}
-          onChange={(e) => setPassword(e.target.value)}
+        placeholder="Manager password"
-          onKeyDown={handleKeyDown}
+      />
-          placeholder="Manager password"
+      <Button onClick={handleSubmit}>Submit</Button>
-        />
+    </Form>
-        <Button onClick={handleSubmit}>Submit</Button>
-      </Form>
-    </div>
   )
 }
 

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