fix: fix auth page ui bugs

src/app/[locale]/(marketing)/(pages)/magicui/page.tsx

@@ -19,7 +19,7 @@ import { RainbowButtonDemo } from '@/components/magicui/example/rainbow-button-e
 import { RippleDemo } from '@/components/magicui/example/ripple-example';
 import { ShimmerButtonDemo } from '@/components/magicui/example/shimmer-button-example';
 import { ShinyButtonDemo } from '@/components/magicui/example/shiny-button-example';
-import { TweetImages } from '@/components/magicui/example/twitter-card-example';
+import { TweetCardDemo } from '@/components/magicui/example/twitter-card-example';
 import { WordRotateDemo } from '@/components/magicui/example/word-rotate-example';
 
 /**
@@ -73,7 +73,7 @@ export default async function MagicuiPage() {
           <WordRotateDemo />
         </div>
       </div>
-      <TweetImages />
+      <TweetCardDemo id="1678577280489234432" />
       <BlurFadeDemo />
       <BentoDemo />
       <DotPatternDemo />

src/app/[locale]/auth/layout.tsx

@@ -10,7 +10,7 @@ export default function AuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
       <BackButtonSmall className="absolute top-6 left-6" />
       <div className="flex w-full max-w-sm flex-col gap-6">{children}</div>
     </div>

src/components/auth/forgot-password-form.tsx

@@ -86,7 +86,7 @@ export const ForgotPasswordForm = ({ className }: { className?: string }) => {
       headerLabel={t('title')}
       bottomButtonLabel={t('backToLogin')}
       bottomButtonHref={`${Routes.Login}`}
-      className={cn('border-none', className)}
+      className={cn('', className)}
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

src/components/auth/login-form.tsx

@@ -114,7 +114,7 @@ export const LoginForm = ({
       headerLabel={t('welcomeBack')}
       bottomButtonLabel={t('signUpHint')}
       bottomButtonHref={`${Routes.Register}`}
-      className={cn('border-none', className)}
+      className={cn('', className)}
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">

src/components/auth/login-wrapper.tsx

@@ -56,7 +56,7 @@ export const LoginWrapper = ({
           <DialogHeader className="hidden">
             <DialogTitle />
           </DialogHeader>
-          <LoginForm callbackUrl={callbackUrl} />
+          <LoginForm callbackUrl={callbackUrl} className="border-none" />
         </DialogContent>
       </Dialog>
     );

src/components/auth/register-form.tsx

@@ -116,7 +116,6 @@ export const RegisterForm = ({
       headerLabel={t('createAccount')}
       bottomButtonLabel={t('signInHint')}
       bottomButtonHref={`${Routes.Login}`}
-      className="border-none"
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

src/components/auth/reset-password-form.tsx

@@ -100,7 +100,6 @@ export const ResetPasswordForm = () => {
       headerLabel={t('title')}
       bottomButtonLabel={t('backToLogin')}
       bottomButtonHref={`${Routes.Login}`}
-      className="border-none"
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

src/components/magicui/example/hero-video-dialog-example.tsx

@@ -7,14 +7,14 @@ export function HeroVideoDialogDemoTopInBottomOut() {
         className="block dark:hidden"
         animationStyle="top-in-bottom-out"
         videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-        thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
+        thumbnailSrc="/blocks/music-light.png"
         thumbnailAlt="Hero Video"
       />
       <HeroVideoDialog
         className="hidden dark:block"
         animationStyle="top-in-bottom-out"
         videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-        thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
+        thumbnailSrc="/blocks/music.png"
         thumbnailAlt="Hero Video"
       />
     </div>

src/components/magicui/example/twitter-card-example.tsx

@@ -1,5 +1,9 @@
 import { ClientTweetCard } from "@/components/magicui/twitter-card-client";
 
-export function TweetImages() {
-  return <ClientTweetCard id="1678577280489234432" className="shadow-2xl" />;
+interface TweetCardDemoProps {
+  id: string;
+}
+
+export function TweetCardDemo({ id }: TweetCardDemoProps) {
+  return <ClientTweetCard id={id} className="shadow-2xl" />;
 }