Improve mobile UX of sign in and sign up

qb-frontend/src/app.css

@@ -16,7 +16,6 @@
 
 body {
   font-family: "Inter", sans-serif;
-  background-image: url("/quixbyte_bg_light.svg");
 }
 
 h1,h2,h3,h4,h5 {
@@ -37,14 +36,12 @@ button {
   cursor: pointer;
   background-color: transparent;
   background-color: #55f;
-  border: 2px solid transparent;
-  color: white;
-  transition: background-color 0.3s ease,
-    border-color 0.3s ease;
+  border: none;
+  color: #fff;
+  transition: background-color 0.3s ease;
 }
 
 button:hover, button:active {
-  border-color: #44f;
   background-color: #66f;
 }
 
@@ -98,7 +95,7 @@ button:focus {
 
 .field label {
   position: absolute;
-  left: 17px;
+  left: 12px;
   top: 0;
   padding: 0px 5px;
   transform: translateY(12px);
@@ -118,9 +115,9 @@ button:focus {
 }
 
 input {
-  padding: 10px 20px;
+  padding: 10px 15px;
   border-radius: 10px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   width: 100%;
   font-size: 16px;
   font-family: "Inter", sans-serif;

qb-frontend/src/routes/+layout.svelte

@@ -18,13 +18,15 @@
 
 <slot />
 
+<!--
 <p>Powered by <a class="link" href="https://quixbyte.tech">QuixByte</a></p>
 
 <style>
   p {
-    position: absolute;
+    position: fixed;
     left: 10px;
     bottom: 5px;
     font-size: 14px;
   }
 </style>
+-->

qb-frontend/src/routes/signin/+page.svelte

@@ -15,7 +15,7 @@
 
 <main>
   <form>
-    <h1>Welcome back</h1>
+    <img src="/quixbyte_full.svg" alt="QuixByte" />
 
     <p>Please sign in to continue.</p>
 
@@ -38,6 +38,8 @@
 
     <button>Continue</button>
 
+    <br />
+
     <p class="fnote">
       Don't have an account? <a class="link" href="/signup">Sign up</a>
     </p>
@@ -50,6 +52,9 @@
     align-items: center;
     justify-content: center;
     min-height: 100vh;
+    padding: 20px 0;
+    background-image: url("/quixbyte_bg_light.svg");
+    background-size: 180px;
   }
 
   form {
@@ -58,9 +63,26 @@
     row-gap: 20px;
     width: 100%;
     max-width: 450px;
-    padding: 40px 40px;
+    padding: 40px 60px;
     background-color: white;
     border-radius: 20px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);
+  }
+
+  img {
+    width: 100%;
+  }
+
+  @media (max-width: 450px) {
+    form {
+      box-shadow: none;
+      padding: 40px 0;
+      width: 85%;
+    }
+
+    main {
+      background-image: none;
+      align-items: start;
+    }
   }
 </style>

qb-frontend/src/routes/signup/+page.svelte

@@ -16,12 +16,9 @@
 
 <main>
   <form>
-    <h1>Create your account</h1>
+    <img src="/quixbyte_full.svg" alt="QuixByte" />
 
-    <p>
-      Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum
-      sint consectetur cupidatat.
-    </p>
+    <p>Create your own QuixByte account</p>
 
     <br />
 
@@ -44,14 +41,16 @@
       <input
         name="cpassword"
         id="cpassword"
-        type="cpassword"
+        type="password"
         bind:value={cpassword}
       />
       <label for="password">Confirm password</label>
     </div>
 
     <button>Continue</button>
 
+    <br />
+
     <p class="fnote">
       Already have an account? <a class="link" href="/signin">Sign in</a>
     </p>
@@ -64,6 +63,9 @@
     align-items: center;
     justify-content: center;
     min-height: 100vh;
+    padding: 20px 0;
+    background-image: url("/quixbyte_bg_light.svg");
+    background-size: 180px;
   }
 
   form {
@@ -72,9 +74,26 @@
     row-gap: 20px;
     width: 100%;
     max-width: 450px;
-    padding: 40px 40px;
+    padding: 40px 60px;
     background-color: white;
     border-radius: 20px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);
+  }
+
+  img {
+    width: 100%;
+  }
+
+  @media (max-width: 450px) {
+    form {
+      box-shadow: none;
+      padding: 40px 0;
+      width: 85%;
+    }
+
+    main {
+      background-image: none;
+      align-items: start;
+    }
   }
 </style>