UI revised for registration

src/modules/auth/components/RegisterForm.jsx

@@ -241,6 +241,7 @@ export function RegisterForm({ className, ...props }) {
                 <Input
                   id="given_name"
                   placeholder="Juan"
+                  className="text-sm"
                   {...regPersonal('given_name')}
                 />
                 {errPersonal.given_name && (
@@ -255,6 +256,7 @@ export function RegisterForm({ className, ...props }) {
                 <Input
                   id="last_name"
                   placeholder="Dela Cruz"
+                  className="text-sm"
                   {...regPersonal('last_name')}
                 />
                 {errPersonal.last_name && (
@@ -272,6 +274,7 @@ export function RegisterForm({ className, ...props }) {
               <Input
                 id="middle_name"
                 placeholder="Santos"
+                className="text-sm"
                 {...regPersonal('middle_name')}
               />
               {errPersonal.middle_name && (
@@ -289,6 +292,7 @@ export function RegisterForm({ className, ...props }) {
                 <Input
                   id="extension_name"
                   placeholder="Jr., Sr., III"
+                  className="text-sm"
                   {...regPersonal('extension_name')}
                 />
                 {errPersonal.extension_name && (
@@ -304,6 +308,7 @@ export function RegisterForm({ className, ...props }) {
                   id="date_of_birth"
                   type="date"
                   max={new Date().toISOString().split('T')[0]}
+                  className="text-sm"
                   {...regPersonal('date_of_birth')}
                 />
                 {errPersonal.date_of_birth && (
@@ -320,6 +325,7 @@ export function RegisterForm({ className, ...props }) {
               <Input
                 id="occupation"
                 placeholder="e.g. Real Estate Broker"
+                className="text-sm"
                 {...regPersonal('occupation')}
               />
               {errPersonal.occupation && (
@@ -336,6 +342,7 @@ export function RegisterForm({ className, ...props }) {
                 id="phone"
                 type="tel"
                 placeholder="+63 912 345 6789"
+                className="text-sm"
                 {...regPersonal('phone')}
               />
               {errPersonal.phone && (
@@ -388,6 +395,7 @@ export function RegisterForm({ className, ...props }) {
                 disabled={isRegistering}
                 readOnly
                 onFocus={(e) => e.target.removeAttribute('readonly')}
+                className="text-sm"
                 {...regCreds('email')}
               />
               {errCreds.email && (
@@ -407,7 +415,7 @@ export function RegisterForm({ className, ...props }) {
                   placeholder="Min. 8 chars, 1 uppercase, 1 number"
                   autoComplete="new-password"
                   disabled={isRegistering}
-                  className="pr-10"
+                  className="pr-10 text-sm"
                   {...regCreds('password')}
                 />
                 <Button
@@ -437,7 +445,7 @@ export function RegisterForm({ className, ...props }) {
                   placeholder="Repeat your password"
                   autoComplete="new-password"
                   disabled={isRegistering}
-                  className="pr-10"
+                  className="pr-10 text-sm"
                   {...regCreds('confirm_password')}
                 />
                 <Button
@@ -465,6 +473,7 @@ export function RegisterForm({ className, ...props }) {
                 id="group_code"
                 placeholder="No group code"
                 disabled
+                className="text-sm"
                 {...regCreds('group_code')}
               />
               <p className="text-xs text-muted-foreground">

src/modules/auth/pages/Register.jsx

@@ -16,6 +16,10 @@ import { Link } from 'react-router-dom'
 import { RegisterForm } from '../components/RegisterForm'
 import { MetadataProvider } from '@/contexts/MetadataContext'
 
+// TODO: flip to true once the hero banner asset is ready; grid auto-centers the
+// left panel while this is false so no other classes need to change either way.
+const SHOW_BANNER = false
+
 export default function Register() {
   return (
     <MetadataProvider
@@ -27,7 +31,7 @@ export default function Register() {
         ogDescription: 'Create an account to access our online course platform.',
       }}
     >
-      <div className="grid min-h-svh lg:grid-cols-2">
+      <div className={`grid min-h-svh ${SHOW_BANNER ? 'lg:grid-cols-2' : ''}`}>
         {/* ── Left panel ── */}
         <div className="flex flex-col gap-4 p-6 md:p-10">
           <div className="flex justify-center">
@@ -42,13 +46,14 @@ export default function Register() {
           </div>
 
           <div className="flex flex-1 items-center justify-center">
-            <div className="w-full max-w-sm">
+            <div className="w-full max-w-xl">
               <RegisterForm />
             </div>
           </div>
         </div>
 
         {/* ── Right panel — hero image ── */}
+        {SHOW_BANNER && (
           <div className="relative hidden lg:block">
             <img
               src="https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcgzIbC8SR4stTZRKXP3cfbD6e2p9jmdAUQBuox"
@@ -56,6 +61,7 @@ export default function Register() {
               className="absolute inset-0 h-full w-full object-cover rounded-3xl p-2"
             />
           </div>
+        )}
       </div>
     </MetadataProvider>
   )