finished reset password & other changes

components/auth/card-wrapper.tsx

@@ -3,6 +3,8 @@ import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { Header } from '@/components/auth/header'
 import { Social } from '@/components/auth/social'
 import { BackButton } from '@/components/auth/back-button'
+import { Suspense } from 'react'
+import { Loading } from '@/components/loading'
 
 type Props = {
   children: React.ReactNode
@@ -24,32 +26,31 @@ export const CardWrapper = ({
   continueWithLabel,
 }: Props) => {
   return (
-    <Card
-      className={`max-w-[430px] w-[100%] shadow-md md:min-w-[430px] sm:w-full`}>
-      <CardHeader>
-        <Header label={headerLabel} title={headerTitle}/>
-      </CardHeader>
-      <CardContent>
-        {children}
-      </CardContent>
-      {showSocial && <CardFooter className="flex-wrap">
-        <div className="relative flex-none w-[100%] mb-4"
-             style={{ display: 'block' }}>
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t"></span>
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
+    <Suspense fallback={<Loading/>}>
+      <Card
+        className="border-8 border-muted shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
+        <CardHeader>
+          <Header label={headerLabel} title={headerTitle}/>
+        </CardHeader>
+        <CardContent>
+          {children}
+        </CardContent>
+        {showSocial && <CardFooter className="flex-wrap">
+          <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t"></span>
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
             <span
               className="bg-background px-2 text-muted-foreground">{continueWithLabel}</span>
+            </div>
           </div>
-        </div>
-
-        {/*<Separator className="my-4"/>*/}
-        <Social/>
-      </CardFooter>}
-      <CardFooter>
-        <BackButton label={backButtonLabel} href={backButtonHref}/>
-      </CardFooter>
-    </Card>
+          <Social/>
+        </CardFooter>}
+        <CardFooter>
+          <BackButton label={backButtonLabel} href={backButtonHref}/>
+        </CardFooter>
+      </Card>
+    </Suspense>
   )
 }