fix: form ui

src/components/ContentGenerator/ContentGenerator.tsx

@@ -18,11 +18,16 @@ import {
 } from '../../lib/ai';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { useIsPaidUser } from '../../queries/billing';
 
 const allowedFormats = ['course', 'guide', 'roadmap'] as const;
 type AllowedFormat = (typeof allowedFormats)[number];
 
 export function ContentGenerator() {
+  const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
+  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
+
   const [title, setTitle] = useState('');
   const [selectedFormat, setSelectedFormat] = useState<AllowedFormat>('course');
 
@@ -106,93 +111,115 @@ export function ContentGenerator() {
   }, []);
 
   return (
-    <form
-      className="mx-auto mt-20 w-full max-w-md space-y-4 rounded-xl bg-white p-4"
-      onSubmit={handleSubmit}
-    >
-      <div className="flex flex-col gap-2">
-        <label
-          htmlFor={titleFieldId}
-          className="inline-block text-sm text-gray-500"
-        >
-          What can I help you learn?
-        </label>
-        <input
-          type="text"
-          id={titleFieldId}
-          placeholder="Enter a topic"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          className="block h-9 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm outline-none placeholder:text-gray-500 focus:border-gray-500"
-          required
-          minLength={3}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <label className="inline-block text-sm text-gray-500">
-          Choose the format
-        </label>
-        <div className="grid grid-cols-2 gap-2">
-          {allowedFormats.map((format) => {
-            const isSelected = format.value === selectedFormat;
-
-            return (
-              <FormatItem
-                key={format.value}
-                label={format.label}
-                onClick={() => setSelectedFormat(format.value)}
-                icon={format.icon}
-                isSelected={isSelected}
-              />
-            );
-          })}
-        </div>
-      </div>
-
-      {selectedFormat === 'guide' && (
-        <GuideOptions depth={depth} setDepth={setDepth} />
-      )}
-
-      {selectedFormat === 'course' && (
-        <CourseOptions difficulty={difficulty} setDifficulty={setDifficulty} />
-      )}
-
-      {selectedFormat !== 'roadmap' && (
-        <>
-          <div className="flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 text-sm">
-            <input
-              type="checkbox"
-              id={fineTuneOptionsId}
-              checked={showFineTuneOptions}
-              onChange={(e) => setShowFineTuneOptions(e.target.checked)}
-            />
-            <label htmlFor={fineTuneOptionsId} className="text-sm">
-              Show fine-tune options
-            </label>
+    <div className="mx-auto flex w-full max-w-xl flex-grow flex-col pt-4 md:justify-center md:pt-10 lg:pt-4">
+      <div className="relative">
+        {isUpgradeModalOpen && (
+          <UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
+        )}
+        {!isPaidUser && !isPaidUserLoading && isLoggedIn() && (
+          <div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500 max-md:hidden">
+            You are on the free plan
+            <button
+              onClick={() => setIsUpgradeModalOpen(true)}
+              className="ml-2 rounded-xl bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80"
+            >
+              Upgrade to Pro
+            </button>
           </div>
+        )}
+        <h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
+          What can I help you learn?
+        </h1>
+        <p className="text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm">
+          Enter a topic below to generate a personalized course for it
+        </p>
+      </div>
 
-          {showFineTuneOptions && (
-            <FineTuneCourse
-              hasFineTuneData={showFineTuneOptions}
-              about={about}
-              goal={goal}
-              customInstructions={customInstructions}
-              setAbout={setAbout}
-              setGoal={setGoal}
-              setCustomInstructions={setCustomInstructions}
-              className="overflow-hidden rounded-lg border border-gray-200 [&_div:first-child_label]:border-t-0 [&_textarea]:text-sm"
-            />
-          )}
-        </>
-      )}
+      <form className="mt-10 space-y-4" onSubmit={handleSubmit}>
+        <div className="flex flex-col gap-2">
+          <label htmlFor={titleFieldId} className="inline-block text-gray-500">
+            What can I help you learn?
+          </label>
+          <input
+            type="text"
+            id={titleFieldId}
+            placeholder="Enter a topic"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500"
+            required
+            minLength={3}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <label className="inline-block text-gray-500">
+            Choose the format
+          </label>
+          <div className="grid grid-cols-2 gap-2">
+            {allowedFormats.map((format) => {
+              const isSelected = format.value === selectedFormat;
 
-      <button
-        type="submit"
-        className="flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-black text-sm text-white focus:outline-none"
-      >
-        <SparklesIcon className="size-4" />
-        Generate
-      </button>
-    </form>
+              return (
+                <FormatItem
+                  key={format.value}
+                  label={format.label}
+                  onClick={() => setSelectedFormat(format.value)}
+                  icon={format.icon}
+                  isSelected={isSelected}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        {selectedFormat === 'guide' && (
+          <GuideOptions depth={depth} setDepth={setDepth} />
+        )}
+
+        {selectedFormat === 'course' && (
+          <CourseOptions
+            difficulty={difficulty}
+            setDifficulty={setDifficulty}
+          />
+        )}
+
+        {selectedFormat !== 'roadmap' && (
+          <>
+            <div className="flex items-center gap-2 rounded-xl border border-gray-200 bg-white p-4">
+              <input
+                type="checkbox"
+                id={fineTuneOptionsId}
+                checked={showFineTuneOptions}
+                onChange={(e) => setShowFineTuneOptions(e.target.checked)}
+              />
+              <label htmlFor={fineTuneOptionsId} className="text-base">
+                Show fine-tune options
+              </label>
+            </div>
+
+            {showFineTuneOptions && (
+              <FineTuneCourse
+                hasFineTuneData={showFineTuneOptions}
+                about={about}
+                goal={goal}
+                customInstructions={customInstructions}
+                setAbout={setAbout}
+                setGoal={setGoal}
+                setCustomInstructions={setCustomInstructions}
+                className="overflow-hidden rounded-xl border border-gray-200 bg-white [&_div:first-child_label]:border-t-0"
+              />
+            )}
+          </>
+        )}
+
+        <button
+          type="submit"
+          className="flex w-full items-center justify-center gap-2 rounded-xl bg-black p-4 text-white focus:outline-none"
+        >
+          <SparklesIcon className="size-4" />
+          Generate
+        </button>
+      </form>
+    </div>
   );
 }

src/components/ContentGenerator/CourseOptions.tsx

@@ -42,12 +42,15 @@ export function CourseOptions(props: CourseOptionsProps) {
     <div className="flex flex-col gap-2">
       <label
         htmlFor={difficultySelectId}
-        className="inline-block text-sm text-gray-500"
+        className="inline-block text-gray-500"
       >
         Choose difficulty level
       </label>
       <Select value={difficulty} onValueChange={setDifficulty}>
-        <SelectTrigger id={difficultySelectId}>
+        <SelectTrigger
+          id={difficultySelectId}
+          className="h-auto rounded-xl bg-white p-4 text-base"
+        >
           {selectedDifficulty && (
             <div className="flex flex-col gap-1">
               <span>{selectedDifficulty.label}</span>
@@ -58,7 +61,7 @@ export function CourseOptions(props: CourseOptionsProps) {
             <SelectValue placeholder="Select a difficulty" />
           )}
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="rounded-xl bg-white">
           {difficultyOptions.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               <div className="flex flex-col gap-1">

src/components/ContentGenerator/FormatItem.tsx

@@ -15,10 +15,10 @@ export function FormatItem(props: FormatItemProps) {
     <button
       type="button"
       className={cn(
-        'flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-gray-200 p-2 py-6',
+        'flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 py-6',
         isSelected
-          ? 'border-gray-200 bg-gray-100'
-          : 'text-gray-400 hover:bg-gray-50',
+          ? 'border-gray-200 bg-white'
+          : 'bg-gray-50 text-gray-400 hover:bg-gray-50',
       )}
       onClick={onClick}
     >

src/components/ContentGenerator/GuideOptions.tsx

@@ -38,14 +38,14 @@ export function GuideOptions(props: GuideOptionsProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      <label
-        htmlFor={depthSelectId}
-        className="inline-block text-sm text-gray-500"
-      >
+      <label htmlFor={depthSelectId} className="inline-block text-gray-500">
         Choose depth of content
       </label>
       <Select value={depth} onValueChange={setDepth}>
-        <SelectTrigger id={depthSelectId}>
+        <SelectTrigger
+          id={depthSelectId}
+          className="h-auto rounded-xl bg-white p-4 text-base"
+        >
           {selectedDepth && (
             <div className="flex flex-col gap-1">
               <span>{selectedDepth.label}</span>
@@ -54,7 +54,7 @@ export function GuideOptions(props: GuideOptionsProps) {
 
           {!selectedDepth && <SelectValue placeholder="Select a depth" />}
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="rounded-xl bg-white">
           {depthOptions.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               <div className="flex flex-col gap-1">