Merge pull request #1982 from SkynetLabs/dashboard-v2-feedback-fixes-auth-pages

Dashboard v2 -- Address feedback regarding /auth/ pages

packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js

@@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
 
 const dropDown = keyframes`
   0% {
-    transform: scaleY(0);
+    transform: rotateX(-90deg);
-  }
-  80% {
-    transform: scaleY(1.1);
   }
   100% {
-    transform: scaleY(1);
+    transform: rotateX(0deg);
   }
 `;
 
@@ -35,10 +32,11 @@ const Flyout = styled.div.attrs(({ open }) => ({
               bg-white shadow-md shadow-palette-200/50
               ${open ? "visible" : "invisible"}`,
 }))`
+  transform-origin: top center;
   animation: ${({ open }) =>
     open
       ? css`
-          ${dropDown} 0.1s ease-in-out
+          ${dropDown} .15s ease-in-out forwards;
         `
       : "none"};
 `;

packages/dashboard-v2/src/components/forms/LoginForm.js

@@ -82,7 +82,7 @@ export const LoginForm = ({ onSuccess }) => {
           </div>
 
           <p className="text-sm text-center mt-8">
-            Don't have an account? <HighlightedLink to="/auth/signup">Sign up</HighlightedLink>
+            Don't have an account? <HighlightedLink to="/auth/registration">Sign up</HighlightedLink>
           </p>
         </Form>
       )}

packages/dashboard-v2/src/layouts/AuthLayout.js

@@ -33,7 +33,14 @@ const AuthLayout =
                 </h1>
               </div>
             </SloganContainer>
-            <Content>{children}</Content>
+            <Content>
+              <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+                <div className="mb-4 md:mb-16">
+                  <img src="/images/logo-black-text.svg" alt="Skynet" className="-ml-2" />
+                </div>
+                {children}
+              </div>
+            </Content>
           </Layout>
         </UserProvider>
       </>

packages/dashboard-v2/src/pages/auth/login.js

@@ -22,16 +22,11 @@ const LoginPage = ({ location }) => {
       <Metadata>
         <title>Sign In</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       <LoginForm
         onSuccess={async () => {
           await refreshUserState();
         }}
       />
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/auth/registration.js

@@ -61,11 +61,7 @@ const SignUpPage = () => {
       <Metadata>
         <title>Sign Up</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
+      <div className="flex flex-col">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
-
         {!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>}
 
         {settings.areAccountsEnabled && (
@@ -73,11 +69,17 @@ const SignUpPage = () => {
             {settings.isSubscriptionRequired ? <PaidPortalHeader /> : <FreePortalHeader />}
 
             {state !== State.Success && (
+              <>
                 <SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
+
+                <p className="text-sm text-center mt-8">
+                  Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
+                </p>
+              </>
             )}
 
             {state === State.Success && (
-              <div className="text-center">
+              <div>
                 <p className="text-primary font-semibold">Please check your inbox and confirm your email address.</p>
                 <p>You will be redirected to your dashboard shortly.</p>
                 <HighlightedLink to="/">Click here to go there now.</HighlightedLink>
@@ -89,10 +91,6 @@ const SignUpPage = () => {
             )}
           </>
         )}
-
-        <p className="text-sm text-center mt-8">
-          Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
-        </p>
       </div>
     </PlansProvider>
   );

packages/dashboard-v2/src/pages/auth/reset-password.js

@@ -20,10 +20,6 @@ const ResetPasswordPage = () => {
       <Metadata>
         <title>Reset Password</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       {state !== State.Success && (
         <RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
       )}
@@ -41,10 +37,9 @@ const ResetPasswordPage = () => {
           Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
         </p>
         <p>
-            Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
+          Don't actually have an account? <HighlightedLink to="/auth/registration">Create one!</HighlightedLink>
         </p>
       </div>
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/user/confirm.js

@@ -57,10 +57,6 @@ const EmailConfirmationPage = ({ location }) => {
       <Metadata>
         <title>Confirm E-mail Address</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       <div className="text-center">
         {state === State.Pure && <p>Please wait while we verify your account...</p>}
 
@@ -74,7 +70,6 @@ const EmailConfirmationPage = ({ location }) => {
 
         {state === State.Failure && <p className="text-error">Something went wrong, please try again later.</p>}
       </div>
-      </div>
     </>
   );
 };

packages/dashboard-v2/src/pages/user/recover.js

@@ -24,10 +24,6 @@ const RecoverPage = ({ location }) => {
       <Metadata>
         <title>Recover Your Account</title>
       </Metadata>
-      <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
-        <div className="mb-4 md:mb-16">
-          <img src="/images/logo-black-text.svg" alt="Skynet" />
-        </div>
       {state !== State.Success && (
         <ResetPasswordForm
           token={token}
@@ -52,7 +48,6 @@ const RecoverPage = ({ location }) => {
       <p className="text-sm text-center mt-8">
         Suddenly remembered your old password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
       </p>
-      </div>
     </>
   );
 };