chore: wip

autogpt_platform/frontend/src/app/(platform)/reset-password/page.tsx

@@ -157,7 +157,7 @@ export default function ResetPasswordPage() {
   }
 
   return (
-    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center">
+    <div className="flex h-full min-h-[85vh] w-full flex-col items-center justify-center">
       <AuthCard title="Reset Password">
         {user ? (
           <form

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -54,7 +54,6 @@ export default function SignupPage() {
   }
 
   const confirmPasswordError = form.formState.errors.confirmPassword?.message;
-  const withConfirmPassword = form.getValues("confirmPassword").length > 0;
   const termsError = form.formState.errors.agreeToTerms?.message;
 
   return (
@@ -111,24 +110,14 @@ export default function SignupPage() {
               control={form.control}
               name="confirmPassword"
               render={({ field }) => (
-                <div className="space-y-2">
-                  <Input
-                    label="Confirm Password"
-                    placeholder="********"
-                    type="password"
-                    autoComplete="new-password"
-                    error={confirmPasswordError}
-                    {...field}
-                  />
-                  {!confirmPasswordError && !withConfirmPassword ? (
-                    <Text
-                      variant="small"
-                      className="relative -top-7 !text-slate-500"
-                    >
-                      Password needs to be at least 12 characters long
-                    </Text>
-                  ) : null}
-                </div>
+                <Input
+                  label="Confirm Password"
+                  placeholder="********"
+                  type="password"
+                  autoComplete="new-password"
+                  error={confirmPasswordError}
+                  {...field}
+                />
               )}
             />
 

autogpt_platform/frontend/src/components/auth/AuthCard.tsx

@@ -42,7 +42,7 @@ interface Props {
 
 export function AuthCard({ children, title }: Props) {
   return (
-    <Card className="mx-auto flex min-h-[50vh] w-full max-w-[32rem] flex-col items-center justify-center gap-8">
+    <Card className="mx-auto flex min-h-[40vh] w-full max-w-[32rem] flex-col items-center justify-center gap-8">
       <Text variant="h3" as="h2" className="mb-3">
         {title}
       </Text>

autogpt_platform/frontend/src/components/auth/EmailNotAllowedModal.tsx

@@ -1,11 +1,6 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Button } from "../atoms/Button/Button";
+import { Text } from "../atoms/Text/Text";
+import { Dialog } from "../molecules/Dialog/Dialog";
 
 interface Props {
   isOpen: boolean;
@@ -14,23 +9,26 @@ interface Props {
 
 export function EmailNotAllowedModal({ isOpen, onClose }: Props) {
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Access Restricted</DialogTitle>
-          <DialogDescription className="pt-2">
+    <Dialog
+      controlled={{ isOpen, set: onClose }}
+      styling={{ maxWidth: "35rem" }}
+    >
+      <Dialog.Content>
+        <div className="flex flex-col items-center gap-8 py-4">
+          <Text variant="h3">Access Restricted</Text>
+          <Text variant="large-medium" className="text-center">
             We&apos;re currently in a limited access phase. Your email address
-            isn&apos;t on our current allowlist for early access.
-            <br />
-            <br />
-            If you believe this is an error or would like to request access,
-            please contact our support team.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex justify-end pt-4">
-          <Button onClick={onClose}>I understand</Button>
+            isn&apos;t on our current allowlist for early access. If you believe
+            this is an error or would like to request access, please contact our
+            support team.
+          </Text>
+          <div className="flex justify-end pt-4">
+            <Button variant="primary" onClick={onClose}>
+              I understand
+            </Button>
+          </div>
         </div>
-      </DialogContent>
+      </Dialog.Content>
     </Dialog>
   );
 }

autogpt_platform/frontend/src/components/auth/GoogleLoadingModal.tsx

@@ -1,11 +1,7 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { GoogleLogoIcon } from "@phosphor-icons/react/dist/ssr";
+import { CircleNotchIcon } from "@phosphor-icons/react/dist/ssr";
+import Image from "next/image";
+import { Text } from "../atoms/Text/Text";
+import { Dialog } from "../molecules/Dialog/Dialog";
 
 interface GoogleLoadingModalProps {
   isOpen: boolean;
@@ -13,25 +9,25 @@ interface GoogleLoadingModalProps {
 
 export function GoogleLoadingModal({ isOpen }: GoogleLoadingModalProps) {
   return (
-    <Dialog open={isOpen}>
-      <DialogContent className="sm:max-w-md [&>button]:hidden">
-        <DialogHeader>
+    <Dialog forceOpen={isOpen} styling={{ maxWidth: "32rem" }}>
+      <Dialog.Content>
+        <div className="flex flex-col items-center gap-8 py-4">
           <div className="mb-2 flex items-center justify-center gap-3">
-            <GoogleLogoIcon size={24} />
-            <DialogTitle>Signing in with Google</DialogTitle>
+            <Image src="/google-logo.svg" alt="Google" width={20} height={20} />
+            <Text variant="h3">Signing in with Google</Text>
           </div>
-          <DialogDescription className="text-center">
+          <CircleNotchIcon
+            className="h-10 w-10 animate-spin"
+            weight="regular"
+          />
+          <Text variant="large-medium" className="text-center">
             You&apos;re being redirected to Google to complete the sign-in
             process.
-            <br />
-            <br />
-            Please don&apos;t close this tab or navigate away from this page.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex justify-center pt-4">
-          <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
+            <br /> Please don&apos;t close this tab or navigate away from this
+            page.
+          </Text>
         </div>
-      </DialogContent>
+      </Dialog.Content>
     </Dialog>
   );
 }