Configurable theme, change default to blue

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

View file

@ -59,7 +59,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
return (
<div className="min-h-screen bg-gray-100 text-gray-900 p-4 md:p-8 flex flex-col items-center">
<div className="max-w-4xl w-full bg-white rounded-[2rem] shadow-xl overflow-hidden border-4 border-white">
<div className="bg-[#46178f] p-8 text-white flex justify-between items-center relative overflow-hidden">
<div className="bg-theme-primary p-8 text-white flex justify-between items-center relative overflow-hidden">
<div className="relative z-10">
<h2 className="text-4xl font-black font-display">Create Quiz</h2>
<p className="opacity-80 font-bold">Build your masterpiece</p>
@ -83,7 +83,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="w-full p-4 border-4 border-gray-200 rounded-2xl text-2xl font-bold focus:border-[#46178f] outline-none transition-colors"
className="w-full p-4 border-4 border-gray-200 rounded-2xl text-2xl font-bold focus:border-theme-primary outline-none transition-colors"
placeholder="e.g., The Ultimate Trivia"
/>
</div>
@ -92,7 +92,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
{questions.map((q, idx) => (
<div key={q.id} className="border-4 border-gray-100 p-4 rounded-2xl bg-gray-50 flex justify-between items-center group hover:border-gray-200 transition">
<div className="flex items-center gap-4">
<span className="bg-[#46178f] text-white w-10 h-10 flex items-center justify-center rounded-full font-black">
<span className="bg-theme-primary text-white w-10 h-10 flex items-center justify-center rounded-full font-black">
{idx + 1}
</span>
<span className="font-bold text-lg">{q.text}</span>