Refine Sign in/Sign up styling

usradam · usradam · commit f8f094ab9feb · 2025-11-14T18:22:44.000-10:00
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Independent Verification and Validation</title>
+    <title>Office of Enterprise Technology Services | Independent Verification and Validation</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/RollingGallery.tsx b/src/components/RollingGallery.tsx
diff --git a/src/pages/SignIn.css b/src/pages/SignIn.css
@@ -19,4 +19,23 @@
 .signin-root label,
 .signin-root option {
   font-family: "Geist", system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.signin-root {
+  background-color: #FAFBFC;
+}
+
+.signin-card {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  padding: 2.5rem;
+  max-width: 28rem;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .signin-card {
+    padding: 3rem;
+  }
 }
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
@@ -84,18 +84,19 @@ const SignIn = () => {
 
   return (
     <div className="signin-root flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-        <img
-          src="/public/favicon.png"
-          alt="Your Company"
-          className="mx-auto h-10 w-auto"
-        />
-        <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
-          Sign in to your account
-        </h2>
-      </div>
-
-      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+      <div className="signin-card">
+        <div className="sm:mx-auto sm:w-full">
+          <img
+            src="/favicon.png"
+            alt="Your Company"
+            className="mx-auto h-10 w-auto"
+          />
+          <h2 className="mt-6 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
+            Sign In
+          </h2>
+        </div>
+
+        <div className="mt-8">
         <form
           action="#"
           method="POST"
@@ -182,7 +183,7 @@ const SignIn = () => {
           </div>
         </form>
 
-        <p className="mt-10 text-center text-sm/6 text-gray-500">
+        <p className="mt-2 text-center text-sm/6 text-gray-500">
           Don't have an account?
           <a
             href="/signup"
@@ -191,6 +192,7 @@ const SignIn = () => {
             Sign Up
           </a>
         </p>
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/SignUp.css b/src/pages/SignUp.css
@@ -19,4 +19,23 @@
 .signup-root label,
 .signup-root option {
   font-family: "Geist", system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.signup-root {
+  background-color: #FAFBFC;
+}
+
+.signup-card {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  padding: 2.5rem;
+  max-width: 28rem;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .signup-card {
+    padding: 3rem;
+  }
 }
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
@@ -53,18 +53,19 @@ const SignUp = () => {
 
   return (
     <div className="signup-root flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-        <img
-          src="/public/favicon.png"
-          alt="Your Company"
-          className="mx-auto h-10 w-auto"
-        />
-        <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
-          Sign Up
-        </h2>
-      </div>
+      <div className="signup-card">
+        <div className="sm:mx-auto sm:w-full">
+          <img
+            src="/favicon.png"
+            alt="Your Company"
+            className="mx-auto h-10 w-auto"
+          />
+          <h2 className="mt-6 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
+            Sign Up
+          </h2>
+        </div>
 
-      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <div className="mt-8">
         <form
           action="#"
           method="POST"
@@ -167,7 +168,7 @@ const SignUp = () => {
           </div>
         </form>
 
-        <p className="mt-10 text-center text-sm/6 text-gray-500">
+        <p className="mt-2 text-center text-sm/6 text-gray-500">
           Already have an account?
           <a
             href="/login"
@@ -176,6 +177,7 @@ const SignUp = () => {
             Sign In
           </a>
         </p>
+        </div>
       </div>
     </div>
   );
