feat: update layout spacing and enhance referral form alignment

apps/ssr/client/modules/login/index.tsx

@@ -4,7 +4,6 @@ import { openInFollowApp } from "@client/lib/helper"
 import { queryClient } from "@client/lib/query-client"
 import { useSession } from "@client/query/auth"
 import { useAuthProviders } from "@client/query/users"
-import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button, MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { Divider } from "@follow/components/ui/divider/index.js"
 import {
@@ -233,10 +232,8 @@ export function Login() {
 
   return (
     <div className="flex w-full flex-col items-center justify-center">
-      <Logo className="size-16" />
-
       {!isAuthenticated && !isLoading && (
-        <h1 className="mb-6 mt-8 text-2xl">
+        <h1 className="mb-8 text-3xl">
           {t("login.logInTo")} <b>{` ${APP_NAME}`}</b>
         </h1>
       )}

apps/ssr/client/modules/referral/index.tsx

@@ -39,7 +39,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),
@@ -72,15 +78,19 @@ 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"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t("register.referral.label")}</FormLabel>
+              <FormLabel className="font-normal">{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

apps/ssr/client/pages/(login)/register.tsx

@@ -2,7 +2,6 @@ import { useServerConfigs } from "@client/atoms/server-configs"
 import { loginHandler, signUp } from "@client/lib/auth"
 import { ReferralForm } from "@client/modules/referral"
 import { useAuthProviders } from "@client/query/users"
-import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button, MotionButtonBase } from "@follow/components/ui/button/index.jsx"
 import { Divider } from "@follow/components/ui/divider/index.js"
 import {
@@ -30,7 +29,6 @@ import { z } from "zod"
 export function Component() {
   return (
     <div className="flex h-full flex-col items-center justify-center gap-8">
-      <Logo className="size-16" />
       <RegisterForm />
     </div>
   )
@@ -104,7 +102,7 @@ function RegisterForm() {
 
   return (
     <div className="relative min-w-80">
-      <h1 className="mb-6 text-center text-2xl">
+      <h1 className="mb-8 text-center text-3xl">
         {t("login.signUpTo")} <b>{` ${APP_NAME}`}</b>
       </h1>
       {isEmail ? (
@@ -149,6 +147,7 @@ function RegisterForm() {
                 </FormItem>
               )}
             />
+            {serverConfigs?.REFERRAL_ENABLED && <ReferralForm align="left" />}
             <HCaptcha ref={captchaRef} sitekey={env.VITE_HCAPTCHA_SITE_KEY} size="invisible" />
             <Button
               isLoading={isSubmitting}
@@ -185,10 +184,10 @@ function RegisterForm() {
               <span>{t("login.continueWith", { provider: provider.name })}</span>
             </MotionButtonBase>
           ))}
+          {serverConfigs?.REFERRAL_ENABLED && <ReferralForm />}
         </div>
       )}
       <Divider className="my-7" />
-      {serverConfigs?.REFERRAL_ENABLED && <ReferralForm className="mb-4" />}
       {isEmail ? (
         <div className="cursor-pointer pb-2 text-center" onClick={() => setIsEmail(false)}>
           Back

apps/ssr/client/pages/(main)/share/feeds/[id]/index.tsx

@@ -46,7 +46,7 @@ export function Component() {
     <Fragment>
       {/* Hero Section */}
       <div>
-        <div className="mx-auto max-w-4xl px-6 py-16 text-center sm:px-8 sm:py-20">
+        <div className="mx-auto max-w-4xl px-6 py-8 text-center sm:px-8 sm:py-12">
           {/* Feed Icon */}
           <div className="mb-6">
             <div className="relative mx-auto inline-block">

apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx

@@ -92,7 +92,7 @@ export function Component() {
     <Fragment>
       {/* Hero Section */}
       <div>
-        <div className="mx-auto max-w-4xl px-6 py-16 text-center sm:px-8 sm:py-20">
+        <div className="mx-auto max-w-4xl px-6 py-8 text-center sm:px-8 sm:py-12">
           {/* List Icon */}
           <div className="mb-6">
             <div className="relative mx-auto inline-block">

apps/ssr/client/pages/(main)/share/users/[id]/index.tsx

@@ -105,7 +105,7 @@ const UserHero = ({ user }: { user: User }) => {
   )
 
   return (
-    <div className="mx-auto max-w-4xl px-6 py-16 text-center sm:px-8 sm:py-20">
+    <div className="mx-auto max-w-4xl px-6 py-8 text-center sm:px-8 sm:py-12">
       {/* Avatar */}
       <div className="mb-6">
         <Avatar className="border-border mx-auto size-20 border">

apps/ssr/client/pages/layout.tsx

@@ -12,7 +12,7 @@ export const Component = () => {
           }`}
       </MemoedDangerousHTMLStyle>
       <Header />
-      <main className="bg-background center relative mx-auto mb-12 mt-[calc(80px+3rem)] flex w-full max-w-[var(--container-max-width)] flex-1 flex-col p-4 lg:p-0">
+      <main className="bg-background center relative mx-auto mb-12 mt-[calc(100px+3rem)] flex w-full max-w-[var(--container-max-width)] flex-1 flex-col p-4 lg:p-0">
         <Outlet />
       </main>
       <PoweredByFooter />