From 01acb4c941fc883dfbd7b0beb5ed58d19165a80a Mon Sep 17 00:00:00 2001
From: americano98 <mr.nik.bazarov@gmail.com>
Date: Fri, 29 Nov 2024 14:18:35 +0300
Subject: [PATCH] chore: states update, fix styles

---
 packages/ui/src/components/card.tsx           |  2 +-
 packages/ui/src/components/input-otp.tsx      |  4 +-
 packages/ui/src/components/input.tsx          |  2 +-
 packages/ui/src/components/label.tsx          |  2 +-
 .../src/views/auth/components/agreements.tsx  |  6 +-
 .../auth/components/animated-harness-logo.tsx | 10 +--
 .../src/views/auth/forgot-password-page.tsx   | 20 ++++--
 .../ui/src/views/auth/new-password-page.tsx   | 24 +++++--
 packages/ui/src/views/auth/otp-page.tsx       | 31 ++++----
 packages/ui/src/views/auth/signin-page.tsx    | 28 +++++---
 packages/ui/src/views/auth/signup-page.tsx    | 72 ++++++++++++-------
 .../views/layouts/Floating1ColumnLayout.tsx   |  4 +-
 12 files changed, 130 insertions(+), 75 deletions(-)

diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 60345a0377..52e260a694 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
+const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
   variants: {
     variant: {
       default: '',
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
index 3f667d43ff..43b9560f1f 100644
--- a/packages/ui/src/components/input-otp.tsx
+++ b/packages/ui/src/components/input-otp.tsx
@@ -40,7 +40,7 @@ const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(({ inde
     <div
       ref={ref}
       className={cn(
-        'relative flex items-center justify-center h-[52px] w-11 rounded border border-borders-1 p-2 text-xl transition-all',
+        'relative flex items-center justify-center h-[52px] w-11 rounded border border-borders-1 p-2 text-2xl transition-all',
         isActive && 'border-borders-3 z-10',
         className
       )}
@@ -49,7 +49,7 @@ const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(({ inde
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index c1b4cc8ce8..be666162d9 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -25,7 +25,7 @@ const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
         <input className={cn(commonClassName, specificClassNames, className)} type={type} ref={ref} {...props} />
         {error && (
           <Text
-            className="text-foreground-danger absolute top-full leading-none translate-y-1 tracking-tight"
+            className="absolute top-full translate-y-1 leading-none tracking-tight text-foreground-danger"
             weight="light"
             size={0}
           >
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
index 6a758b35eb..d4dc2c32de 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -6,7 +6,7 @@ import * as LabelPrimitive from '@radix-ui/react-label'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const labelVariants = cva('leading-none block peer-disabled:cursor-not-allowed peer-disabled:opacity-70', {
+const labelVariants = cva('block leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', {
   variants: {
     variant: {
       default: 'text-sm leading-none',
diff --git a/packages/ui/src/views/auth/components/agreements.tsx b/packages/ui/src/views/auth/components/agreements.tsx
index 490eebfcd2..52d093c407 100644
--- a/packages/ui/src/views/auth/components/agreements.tsx
+++ b/packages/ui/src/views/auth/components/agreements.tsx
@@ -4,17 +4,17 @@ import { Text } from '../../../components'
 
 export function Agreements() {
   return (
-    <Text className="leading-tight mt-auto relative z-10" size={0} color="foreground-5" align="center">
+    <Text className="relative z-10 mt-auto leading-tight" size={0} color="foreground-5" align="center">
       By joining, you agree to{' '}
       <Link
-        className="underline decoration-transparent hover:decoration-foreground-1 transition-colors duration-200 underline-offset-4 decoration-1 text-foreground-1 whitespace-nowrap"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Terms of Service
       </Link>{' '}
       and&nbsp;
       <Link
-        className="underline decoration-transparent hover:decoration-foreground-1 transition-colors duration-200 underline-offset-4 decoration-1 text-foreground-1 whitespace-nowrap"
+        className="whitespace-nowrap text-foreground-1 underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-1"
         to="/"
       >
         Privacy Policy
diff --git a/packages/ui/src/views/auth/components/animated-harness-logo.tsx b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
index 233f9507eb..5d66e70051 100644
--- a/packages/ui/src/views/auth/components/animated-harness-logo.tsx
+++ b/packages/ui/src/views/auth/components/animated-harness-logo.tsx
@@ -29,7 +29,7 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
   const isError = theme === 'error'
 
   return (
-    <div className="relative" aria-hidden>
+    <div className="relative flex size-16" aria-hidden>
       <div className={cn(isError && 'rotate-90', 'transition-transform duration-700')}>
         <span
           className={cn(
@@ -37,9 +37,9 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
             shadowBackground
           )}
         />
-        <div className="relative h-16 w-16 bg-background-3 rounded-full overflow-hidden shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)] flex">
+        <div className="relative flex size-16 overflow-hidden rounded-full bg-background-3 shadow-[0px_0px_20px_0px_rgba(0,0,0,0.6)]">
           <span className="border-linear absolute inset-0 mix-blend-overlay [background:linear-gradient(180deg,#fff,transparent)_border-box]" />
-          <span className="absolute rounded-full size-7 -right-0.5 blur-[10px] bottom-px bg-[#D9D9D9] opacity-5 translate-y-1/2" />
+          <span className="absolute -right-0.5 bottom-px size-7 translate-y-1/2 rounded-full bg-[#D9D9D9] opacity-5 blur-[10px]" />
           <span
             className={cn(
               'absolute rounded-full size-7 -right-0.5 blur-[10px] bottom-px transition-colors duration-700 mix-blend-plus-lighter bg-[#7980D2] opacity-10 translate-y-1/2',
@@ -52,10 +52,10 @@ export function AnimatedHarnessLogo({ theme }: AnimatedHarnessLogoProps) {
               largeLightBackground
             )}
           />
-          <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45 size-8 rounded-xl bg-gradient-to-r opacity-50 blur-sm from-[#F9F9FA] via-transparent via-60% to-transparent" />
+          <span className="absolute left-1/2 top-1/2 size-8 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-xl bg-gradient-to-r from-[#F9F9FA] via-transparent via-60% to-transparent opacity-50 blur-sm" />
         </div>
       </div>
-      <Icon className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 top-1/2 z-10" name="harness" size={36} />
+      <Icon className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" name="harness" size={36} />
     </div>
   )
 }
diff --git a/packages/ui/src/views/auth/forgot-password-page.tsx b/packages/ui/src/views/auth/forgot-password-page.tsx
index 5bbcf9033b..bea1a2c505 100644
--- a/packages/ui/src/views/auth/forgot-password-page.tsx
+++ b/packages/ui/src/views/auth/forgot-password-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
@@ -25,11 +25,13 @@ const forgotPasswordSchema = z.object({
 })
 
 export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
     handleSubmit,
     setError,
     clearErrors,
+    trigger,
     formState: { errors }
   } = useForm({
     resolver: zodResolver(forgotPasswordSchema)
@@ -42,19 +44,29 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
     }
   }
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const handleInputChange = async () => {
+    if (serverError) {
+      setServerError(null)
+      clearErrors(['email'])
+      await trigger()
+    }
+  }
 
   useEffect(() => {
     if (error) {
+      setServerError(error)
       setError('email', {
         type: 'manual',
         message: error
       })
     } else {
+      setServerError(null)
       clearErrors(['email'])
     }
   }, [error, setError, clearErrors])
 
+  const hasError = Object.keys(errors).length > 0 || !!serverError
+
   return (
     <Floating1ColumnLayout
       className="sm:pt-[186px] pt-20 flex-col bg-background-7"
@@ -81,8 +93,8 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
               id="email"
               type="email"
               placeholder="Your email"
-              {...register('email')}
-              error={errors.email?.message?.toString() || error}
+              {...register('email', { onChange: handleInputChange })}
+              error={errors.email?.message?.toString()}
               autoFocus
             />
             <Button
diff --git a/packages/ui/src/views/auth/new-password-page.tsx b/packages/ui/src/views/auth/new-password-page.tsx
index d391de497a..d66750dd2f 100644
--- a/packages/ui/src/views/auth/new-password-page.tsx
+++ b/packages/ui/src/views/auth/new-password-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -31,11 +31,13 @@ const newPasswordSchema = z
   })
 
 export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
     handleSubmit,
     setError,
     clearErrors,
+    trigger,
     formState: { errors }
   } = useForm({
     resolver: zodResolver(newPasswordSchema)
@@ -45,8 +47,17 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
     handleFormSubmit?.(data)
   }
 
+  const handleInputChange = async () => {
+    if (serverError) {
+      setServerError(null)
+      clearErrors(['confirmPassword'])
+      await trigger()
+    }
+  }
+
   useEffect(() => {
     if (error) {
+      setServerError(error)
       setError('password', {
         type: 'manual',
         message: ' '
@@ -56,15 +67,16 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
         message: error
       })
     } else {
+      setServerError(null)
       clearErrors(['password', 'confirmPassword'])
     }
   }, [error, setError, clearErrors])
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="sm:pt-[186px] pt-20 flex-col bg-background-7"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -87,7 +99,7 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
               wrapperClassName="mt-2.5"
               id="password"
               type="password"
-              {...register('password')}
+              {...register('password', { onChange: handleInputChange })}
               placeholder="Password (6+ characters)"
               error={errors.password?.message?.toString()}
             />
@@ -98,9 +110,9 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
               wrapperClassName="mt-2.5"
               id="confirmPassword"
               type="password"
-              {...register('confirmPassword')}
+              {...register('confirmPassword', { onChange: handleInputChange })}
               placeholder="Confirm password"
-              error={errors.confirmPassword?.message?.toString() || error}
+              error={errors.confirmPassword?.message?.toString()}
             />
             <Button
               className="mt-10 w-full"
diff --git a/packages/ui/src/views/auth/otp-page.tsx b/packages/ui/src/views/auth/otp-page.tsx
index 3a6df11984..ff900a988e 100644
--- a/packages/ui/src/views/auth/otp-page.tsx
+++ b/packages/ui/src/views/auth/otp-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { Fragment } from 'react/jsx-runtime'
 
@@ -43,6 +43,7 @@ const otpPasswordSchema = z.object({
 })
 
 export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: PageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
   // TODO: get email from url or from context
   const email = 'stevenm@gmail.com'
 
@@ -50,8 +51,6 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
     handleSubmit,
     control,
     formState: { errors },
-    setError,
-    clearErrors,
     reset,
     watch
   } = useForm<OtpPageDataProps>({
@@ -64,32 +63,29 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
   const otpValue = watch('otp')
 
   const onSubmit = (data: OtpPageDataProps) => {
+    setServerError(null)
     handleFormSubmit?.({ ...data, email })
     reset()
   }
 
   useEffect(() => {
+    setServerError(null)
     if (otpValue.length === OTP_LENGTH) {
       handleSubmit(onSubmit)()
     }
   }, [otpValue, handleSubmit, onSubmit])
 
-  const hasError = Object.keys(errors).length > 0 || !!error
-
   useEffect(() => {
     if (error) {
-      setError('otp', {
-        type: 'manual',
-        message: error
-      })
-    } else {
-      clearErrors(['otp'])
+      setServerError(error)
     }
-  }, [error, setError, clearErrors])
+  }, [error])
+
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="sm:pt-[186px] pt-20 flex-col bg-background-7"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -122,15 +118,15 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
                   </InputOTP>
                 )}
               />
-              {(errors.otp || error) && (
+              {(errors.otp || serverError) && (
                 <Text
-                  className="text-foreground-danger w-full absolute top-full leading-none translate-y-2 tracking-tight"
+                  className="absolute top-full w-full translate-y-2 leading-none tracking-tight text-foreground-danger"
                   weight="light"
                   align="center"
                   size={1}
                   as="p"
                 >
-                  {errors.otp?.message || error}
+                  {errors.otp?.message || serverError}
                 </Text>
               )}
             </div>
@@ -141,6 +137,7 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
               type="submit"
               size="md"
               loading={isLoading}
+              disabled={hasError}
             >
               {isLoading ? 'Verifying...' : 'Verify'}
             </Button>
@@ -148,7 +145,7 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
           <Spacer size={4} />
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Didn&apos;t receive the code?{' '}
-            <Button className="p-0 leading-none h-5" variant="link" onClick={handleResend}>
+            <Button className="h-5 p-0 leading-none" variant="link" onClick={handleResend}>
               Resend
             </Button>
           </Text>
diff --git a/packages/ui/src/views/auth/signin-page.tsx b/packages/ui/src/views/auth/signin-page.tsx
index 6aa5c2d4d6..9594fb0211 100644
--- a/packages/ui/src/views/auth/signin-page.tsx
+++ b/packages/ui/src/views/auth/signin-page.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
@@ -27,12 +27,14 @@ const signInSchema = z.object({
 })
 
 export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
     handleSubmit,
     setError,
     clearErrors,
-    formState: { errors }
+    formState: { errors },
+    trigger
   } = useForm({
     resolver: zodResolver(signInSchema)
   })
@@ -41,8 +43,17 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
     handleSignIn(data)
   }
 
+  const handleInputChange = async () => {
+    if (serverError) {
+      setServerError(null)
+      clearErrors(['password'])
+      await trigger()
+    }
+  }
+
   useEffect(() => {
     if (error) {
+      setServerError(error)
       setError('email', {
         type: 'manual',
         message: ' '
@@ -52,15 +63,16 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
         message: error
       })
     } else {
+      setServerError(null)
       clearErrors(['email', 'password'])
     }
   }, [error, setError, clearErrors])
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="sm:pt-[186px] pt-20 flex-col bg-background-7"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'blue'}
       verticalCenter
     >
@@ -84,9 +96,9 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
               id="email"
               type="email"
               placeholder="Your email"
-              {...register('email')}
-              autoFocus
+              {...register('email', { onChange: handleInputChange })}
               error={errors.email?.message?.toString()}
+              autoFocus
             />
             <Label className="mt-5" htmlFor="password" variant="default">
               Password
@@ -95,7 +107,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
               wrapperClassName="mt-2.5"
               id="password"
               type="password"
-              {...register('password')}
+              {...register('password', { onChange: handleInputChange })}
               placeholder="Password"
               error={errors.password?.message?.toString()}
             />
@@ -115,7 +127,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Don’t have an account?{' '}
             <Link
-              className="text-foreground-accent underline decoration-transparent hover:decoration-foreground-accent transition-colors duration-200 underline-offset-4 decoration-1"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signup"
             >
               Sign up
diff --git a/packages/ui/src/views/auth/signup-page.tsx b/packages/ui/src/views/auth/signup-page.tsx
index 5b6e512af3..f4b2047b1a 100644
--- a/packages/ui/src/views/auth/signup-page.tsx
+++ b/packages/ui/src/views/auth/signup-page.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
@@ -35,11 +36,13 @@ const signUpSchema = z
   })
 
 export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
+  const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
     handleSubmit,
     reset,
-    formState: { errors }
+    formState: { errors },
+    trigger
   } = useForm({
     resolver: zodResolver(signUpSchema)
   })
@@ -49,11 +52,24 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
     reset()
   }
 
-  const hasError = Object.keys(errors).length > 0 || !!error
+  const handleInputChange = async () => {
+    if (serverError) {
+      setServerError(null)
+      await trigger()
+    }
+  }
+
+  useEffect(() => {
+    if (error) {
+      setServerError(error)
+    }
+  }, [error])
+
+  const hasError = Object.keys(errors).length > 0 || !!serverError
 
   return (
     <Floating1ColumnLayout
-      className="sm:pt-[186px] pt-20 flex-col bg-background-7"
+      className="flex-col bg-background-7 pt-20 sm:pt-[186px]"
       highlightTheme={hasError ? 'error' : 'green'}
       verticalCenter
     >
@@ -76,7 +92,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
               wrapperClassName="mt-2.5"
               id="userId"
               type="text"
-              {...register('userId')}
+              {...register('userId', { onChange: handleInputChange })}
               placeholder="User ID"
               autoFocus
               error={errors.userId?.message?.toString()}
@@ -88,7 +104,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
               wrapperClassName="mt-2.5"
               id="email"
               type="email"
-              {...register('email')}
+              {...register('email', { onChange: handleInputChange })}
               placeholder="Your email"
               error={errors.email?.message?.toString()}
             />
@@ -100,27 +116,33 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
               id="password"
               type="password"
               placeholder="Password (6+ characters)"
-              {...register('password')}
+              {...register('password', { onChange: handleInputChange })}
               error={errors.password?.message?.toString()}
             />
-            <Label className="mt-5" htmlFor="confirmPassword" variant="default">
-              Confirm password
-            </Label>
-            <Input
-              wrapperClassName="mt-2.5"
-              id="confirmPassword"
-              type="password"
-              placeholder="Confirm password"
-              {...register('confirmPassword')}
-              error={errors.confirmPassword?.message?.toString()}
-            />
-            {error && (
-              <>
-                <Text className="text-foreground-danger leading-none tracking-tight" weight="light" size={0}>
-                  {error}
-                </Text>
-              </>
-            )}
+            <div className="relative">
+              <Label className="mt-5" htmlFor="confirmPassword" variant="default">
+                Confirm password
+              </Label>
+              <Input
+                wrapperClassName="mt-2.5"
+                id="confirmPassword"
+                type="password"
+                placeholder="Confirm password"
+                {...register('confirmPassword', { onChange: handleInputChange })}
+                error={errors.confirmPassword?.message?.toString()}
+              />
+              {serverError && (
+                <>
+                  <Text
+                    className="absolute top-full translate-y-1 leading-none tracking-tight text-foreground-danger"
+                    weight="light"
+                    size={0}
+                  >
+                    {serverError}
+                  </Text>
+                </>
+              )}
+            </div>
             <Button
               className="mt-10 w-full"
               variant="default"
@@ -137,7 +159,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
           <Text className="block" size={2} color="foreground-5" weight="normal" align="center" as="p">
             Already have an account?{' '}
             <Link
-              className="text-foreground-accent underline decoration-transparent hover:decoration-foreground-accent transition-colors duration-200 underline-offset-4 decoration-1"
+              className="text-foreground-accent underline decoration-transparent decoration-1 underline-offset-4 transition-colors duration-200 hover:decoration-foreground-accent"
               to="/signin"
             >
               Sign in
diff --git a/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx b/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx
index 29152fd735..ed8779d8f5 100644
--- a/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx
+++ b/packages/ui/src/views/layouts/Floating1ColumnLayout.tsx
@@ -71,7 +71,7 @@ const HighlightedFloatingLayout = ({ children, className, theme = 'blue' }: High
 
   return (
     <Floating1ColumnLayout className={cn(className, 'relative max-w-full overflow-hidden')}>
-      <div className="absolute inset-0 pointer-events-none z-0" aria-hidden>
+      <div className="pointer-events-none absolute inset-0 z-0" aria-hidden>
         <span
           className={cn(
             'absolute blur-[30px] top-0 left-1/2 -translate-y-1/2 w-[528px] h-[178px] rounded-[100%] opacity-10 mix-blend-plus-lighter',
@@ -101,7 +101,7 @@ const HighlightedFloatingLayout = ({ children, className, theme = 'blue' }: High
         />
       </div>
       <span
-        className="absolute pointer-events-none inset-0 bg-[url('/images/signin/noise.png')] bg-[size:100px_100px] bg-repeat opacity-70 mix-blend-overlay"
+        className="pointer-events-none absolute inset-0 bg-[url('/images/signin/noise.png')] bg-[size:100px_100px] bg-repeat opacity-70 mix-blend-overlay"
         aria-hidden
       />
       {children}