Merge pull request #129 from refactor-group/improve_login_page_for_mobile

Add the Refactor Logo to the sign in form heading.

Author: jhodapp

src/app/page.tsx

@@ -16,6 +16,7 @@ export default function LoginPage() {
   return (
     <main>
       <div className="container relative h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+        {/* Intentionally hidden for now */}
         <Link
           href="#"
           className={cn(
@@ -25,11 +26,13 @@ export default function LoginPage() {
         >
           Sign Up
         </Link>
+
+        {/* Column 1 */}
         <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
           <div className="absolute inset-0 bg-zinc-900" />
           <div className="relative z-20 flex items-center text-lg font-medium">
             <Link
-              href="https://www.refactorcoach.com"
+              href="https://www.refactorgroup.com"
               className="mr-2 flex items-center space-x-2"
             >
               <div
@@ -52,35 +55,53 @@ export default function LoginPage() {
             </blockquote>
           </div>
         </div>
-        <div className="lg:p-8 sm:mt-8">
-          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-            <div className="flex flex-col space-y-2 text-center">
+
+        {/* Column 2 */}
+        <div className="mx-auto flex flex-col justify-center mt-16 space-y-8 sm:w-96 lg:mt-0">
+          <div className="flex flex-col space-y-2 text-center">
+            <div className="flex items-center justify-center space-x-2">
+              <Link
+                href="https://www.refactorgroup.com"
+                className="flex items-center lg:hidden"
+              >
+                <div
+                  className={cn(
+                    buttonVariants({
+                      variant: "ghost",
+                    }),
+                    "w-10 px-0"
+                  )}
+                >
+                  <Icons.refactor_logo className="h-7 w-7" />
+                  <span className="sr-only">Refactor</span>
+                </div>
+              </Link>
               <h1 className="text-2xl font-semibold tracking-tight">
                 Sign in to Refactor
               </h1>
-              <p className="text-sm text-muted-foreground">
-                Enter your email & password below to sign in
-              </p>
             </div>
-            <UserAuthForm />
-            <p className="px-8 text-center text-sm text-muted-foreground">
-              By clicking continue, you agree to our{" "}
-              <Link
-                href="/terms"
-                className="underline underline-offset-4 hover:text-primary"
-              >
-                Terms of Service
-              </Link>{" "}
-              and{" "}
-              <Link
-                href="/privacy"
-                className="underline underline-offset-4 hover:text-primary"
-              >
-                Privacy Policy
-              </Link>
-              .
+            <p className="text-sm text-muted-foreground">
+              Enter your email & password below to sign in
             </p>
           </div>
+          <UserAuthForm />
+          <p className="px-8 text-center text-sm text-muted-foreground">
+            By clicking continue, you agree to our{" "}
+            <Link
+              href="/terms"
+              className="underline underline-offset-4 hover:text-primary"
+            >
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link
+              href="/privacy"
+              className="underline underline-offset-4 hover:text-primary"
+            >
+              Privacy Policy
+            </Link>
+            .
+          </p>
         </div>
       </div>
     </main>

src/components/ui/icons.tsx

@@ -1,4 +1,4 @@
-type IconProps = React.HTMLAttributes<SVGElement>
+type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const Icons = {
   logo: (props: IconProps) => (
@@ -29,11 +29,20 @@ export const Icons = {
     </svg>
   ),
   refactor_logo: (props: IconProps) => (
-    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
-    width="20" height="28" viewBox="0 0 243 256"
-    preserveAspectRatio="xMidYMid meet" {...props}>
-      <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
-      fill="black" stroke="none">
+    <svg
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="28"
+      viewBox="0 0 243 256"
+      preserveAspectRatio="xMidYMid meet"
+      {...props}
+    >
+      <g
+        transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+        fill="black"
+        stroke="none"
+      >
         <path
           fill="currentColor"
           d="M0 1330 l0 -1230 253 0 252 0 0 977 0 978 456 3 456 2 112 -106 111
@@ -171,4 +180,4 @@ export const Icons = {
       <path d="M21 12a9 9 0 1 1-6.219-8.56" />
     </svg>
   ),
-}
+};