Fix styling for signup and login pages

Assios · Aug 8, 2023 · 0ba1f75 · 0ba1f75 · github-actions · Aug 8, 2023
1 parent 54648a0
commit 0ba1f75
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 64 deletions.
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -24,57 +24,51 @@ export default function Login() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-100">
-      <div className="w-full max-w-md p-8 m-4 bg-white shadow-md rounded">
+    <div className="flex justify-center items-center">
+      <div className="mt-4 w-full max-w-md p-8 m-4 bg-white shadow-md rounded">
         <h2 className="text-2xl font-bold mb-5 text-center">Login</h2>
 
-        <form method="post" onSubmit={handleSubmit}>
-          <div className="mb-4">
-            <label
-              className="block text-sm font-bold mb-2"
-              htmlFor="identifier"
-            >
-              Username or Email:
-            </label>
-            <input
-              type="text"
-              className="input input-bordered w-full"
-              id="identifier"
-              name="identifier"
-              value={identifier}
-              onChange={(e) => setIdentifier(e.target.value)}
-            />
-          </div>
+        <div className="form-control w-full max-w-xs">
+          <label className="label" htmlFor="identifier">
+            <span className="label-text">Username or Email:</span>
+          </label>
+          <input
+            type="text"
+            className="input input-bordered input-primary w-full max-w-xs"
+            id="identifier"
+            value={identifier}
+            onChange={(e) => setIdentifier(e.target.value)}
+          />
+        </div>
 
-          <div className="mb-4">
-            <label className="block text-sm font-bold mb-2" htmlFor="password">
-              Password:
-            </label>
-            <input
-              type="password"
-              className="input input-bordered w-full"
-              id="password"
-              name="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
+        <div className="form-control w-full max-w-xs">
+          <label className="label" htmlFor="password">
+            <span className="label-text">Password</span>
+          </label>
+          <input
+            type="password"
+            className="input input-bordered input-primary w-full max-w-xs"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
 
-          <div className="mb-4">
-            <button
-              type="submit"
-              className={`btn ${loading ? "btn-primary loading" : "btn-blue"}`}
-            >
-              Login
-            </button>
-          </div>
+        <div className="mb-4">
+          <button
+            type="submit"
+            className="mt-6 btn btn-primary"
+            onClick={handleSubmit}
+          >
+            {loading ? "Logging in..." : "Login"}
+          </button>
+        </div>
 
-          {message && (
-            <div className="text-center font-semibold text-red-500">
-              {message}
-            </div>
-          )}
-        </form>
+        {message && (
+          <div className="text-center font-semibold text-red-500">
+            {message}
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/app/routes/signup.tsx b/app/routes/signup.tsx
@@ -29,54 +29,51 @@ export default function SignUp() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-100">
-      <div className="w-full max-w-md p-8 m-4 bg-white shadow-md rounded">
+    <div className="flex justify-center items-center">
+      <div className="mt-4 w-full max-w-md p-8 m-4 shadow-md rounded">
         <h2 className="text-2xl font-bold mb-5 text-center">Sign Up</h2>
 
-        <div className="mb-4">
-          <label className="block text-sm font-bold mb-2" htmlFor="username">
-            Username:
+        <div className="form-control w-full max-w-xs">
+          <label className="label" htmlFor="username">
+            <span className="label-text">Username</span>
           </label>
           <input
             type="text"
-            className="w-full px-3 py-2 border rounded-md"
+            className="input input-bordered input-primary w-full max-w-xs"
             id="username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
           />
         </div>
 
-        <div className="mb-4">
-          <label className="block text-sm font-bold mb-2" htmlFor="email">
-            Email:
+        <div className="form-control w-full max-w-xs">
+          <label className="label" htmlFor="email">
+            <span className="label-text">Email</span>
           </label>
           <input
             type="email"
-            className="w-full px-3 py-2 border rounded-md"
+            className="input input-bordered input-primary w-full max-w-xs"
             id="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
         </div>
 
-        <div className="mb-4">
-          <label className="block text-sm font-bold mb-2" htmlFor="password">
-            Password:
+        <div className="form-control w-full max-w-xs">
+          <label className="label" htmlFor="password">
+            <span className="label-text">Password</span>
           </label>
           <input
             type="password"
-            className="w-full px-3 py-2 border rounded-md"
+            className="input input-bordered input-primary w-full max-w-xs"
             id="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
         </div>
 
         <div className="mb-4">
-          <button
-            className="w-full px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue"
-            onClick={handleSignUp}
-          >
+          <button className="mt-6 btn btn-primary" onClick={handleSignUp}>
             {loading ? "Signing up..." : "Sign Up"}
           </button>
         </div>