jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Configurable theme, change default to blue

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 11:04:52 -07:00
commit ec318e9e9a
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
8 changed files with 46 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/Landing.tsx
View file

@ -35,23 +35,23 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
className="bg-white text-gray-900 p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] max-w-md w-full border-4 border-white/50"
>
<div className="flex justify-center mb-6">
<div className="bg-[#46178f] p-4 rounded-3xl rotate-3 shadow-lg">
<div className="bg-theme-primary p-4 rounded-3xl rotate-3 shadow-lg">
<BrainCircuit size={48} className="text-white" />
</div>
</div>
<h1 className="text-5xl font-black mb-2 text-[#46178f] tracking-tight">Kaboot</h1>
<h1 className="text-5xl font-black mb-2 text-theme-primary tracking-tight">Kaboot</h1>
<p className="text-gray-500 font-bold mb-6">The AI Quiz Party</p>
<div className="flex bg-gray-100 p-2 rounded-2xl mb-8">
<button
onClick={() => setMode('HOST')}
className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'HOST' ? 'bg-white shadow-md text-[#46178f] scale-105' : 'text-gray-400 hover:text-gray-600'}`}
className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'HOST' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
>
Host
</button>
<button
onClick={() => setMode('JOIN')}
className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'JOIN' ? 'bg-white shadow-md text-[#46178f] scale-105' : 'text-gray-400 hover:text-gray-600'}`}
className={`flex-1 py-3 rounded-xl font-black text-lg transition-all duration-200 ${mode === 'JOIN' ? 'bg-white shadow-md text-theme-primary scale-105' : 'text-gray-400 hover:text-gray-600'}`}
>
Join
</button>
@ -65,7 +65,7 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
placeholder="Topic (e.g. 'Space')"
value={topic}
onChange={(e) => setTopic(e.target.value)}
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-[#46178f] focus:ring-4 focus:ring-[#46178f]/20 outline-none transition-all placeholder:font-medium text-center"
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none transition-all placeholder:font-medium text-center"
disabled={isLoading}
/>
<button
@ -85,7 +85,7 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
<button
onClick={onCreateManual}
className="w-full bg-white border-2 border-[#46178f] text-[#46178f] py-3 rounded-2xl text-lg font-black hover:bg-purple-50 shadow-[0_4px_0_#46178f] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
>
<PenTool size={20} /> Create Manually
</button>
@ -97,14 +97,14 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
placeholder="Game PIN"
value={pin}
onChange={(e) => setPin(e.target.value)}
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-[#46178f] focus:ring-4 focus:ring-[#46178f]/20 outline-none text-center"
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
/>
<input
type="text"
placeholder="Nickname"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-[#46178f] focus:ring-4 focus:ring-[#46178f]/20 outline-none text-center"
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none text-center"
/>
<button
type="submit"