feat: login form styles

apps/desktop/layer/renderer/src/modules/auth/Form.tsx

@@ -19,11 +19,13 @@ import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import { z } from "zod"
 
+import { useServerConfigs } from "~/atoms/server-configs"
 import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { loginHandler, signUp, twoFactor } from "~/lib/auth"
 import { handleSessionChanges } from "~/queries/auth"
 
 import { TOTPForm } from "../profile/two-factor"
+import { ReferralForm } from "./ReferralForm"
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -190,6 +192,8 @@ export function RegisterForm({
     mode: "all",
   })
 
+  const serverConfigs = useServerConfigs()
+
   const captchaRef = useRef<HCaptcha>(null)
 
   async function onSubmit(values: z.infer<typeof registerFormSchema>) {
@@ -256,6 +260,7 @@ export function RegisterForm({
               </FormItem>
             )}
           />
+          {serverConfigs?.REFERRAL_ENABLED && <ReferralForm className="mb-4 w-full" align="left" />}
           {!import.meta.env.DEV && (
             <HCaptcha sitekey={env.VITE_HCAPTCHA_SITE_KEY} ref={captchaRef} size="invisible" />
           )}

apps/desktop/layer/renderer/src/modules/auth/LoginModalContent.tsx

@@ -136,6 +136,9 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
                 </MotionButtonBase>
               ))}
 
+          {isRegister && serverConfigs?.REFERRAL_ENABLED && (
+            <ReferralForm className="mb-4 w-full" />
+          )}
           <div className="text-text-secondary -mb-1.5 mt-1 text-center text-xs leading-4">
             <a onClick={() => handleOpenToken()} className="hover:underline">
               {t("login.enter_token")}
@@ -153,7 +156,6 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
           </div>
         </div>
       )}
-      {isRegister && serverConfigs?.REFERRAL_ENABLED && <ReferralForm className="mb-4" />}
 
       {!isEmail && (
         <>

apps/desktop/layer/renderer/src/modules/auth/ReferralForm.tsx

@@ -40,7 +40,13 @@ async function getReferralCycleDays(code: string) {
   return apiClient.referrals.days.$get({ query: { code } })
 }
 
-export function ReferralForm({ className }: { className?: string }) {
+export function ReferralForm({
+  className,
+  align = "center",
+}: {
+  className?: string
+  align?: "left" | "center"
+}) {
   const { t } = useTranslation()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -73,7 +79,7 @@ export function ReferralForm({ className }: { className?: string }) {
 
   return (
     <Form {...form}>
-      <form className={cn(className)}>
+      <form className={cn(align === "left" ? "text-left" : "text-center", className)}>
         <FormField
           control={form.control}
           name="referral"
@@ -81,7 +87,11 @@ export function ReferralForm({ className }: { className?: string }) {
             <FormItem>
               <FormLabel>{t("register.referral.label")}</FormLabel>
               <FormControl>
-                <Input type="text" {...field} />
+                <Input
+                  type="text"
+                  className={cn(align === "left" ? "text-left" : "text-center")}
+                  {...field}
+                />
               </FormControl>
               <FormDescription>
                 {days || !referral