Login Page Styling Complete

sqwatato · Aug 22, 2023 · 1f27af2 · 1f27af2
1 parent 5da6e2b
commit 1f27af2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 49 deletions.
diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
@@ -46,53 +46,43 @@ export default function Login() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="text-gray-50 p-4 rounded-md">
-      <div className="mb-4">
-        <label htmlFor="username" className="sr-only">
-          Username
-        </label>
-        <div className="relative">
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
-              <path d="M13.5 13.5l4.5 4.5"/>
-            </svg>
-          </div>
+    <div className="flex items-center justify-center min-h-screen bg-gray-200">
+      <form onSubmit={handleSubmit} className="bg-white p-8 rounded-md shadow-md w-96">
+        <div className="mb-6">
+          <label htmlFor="username" className="block text-sm font-medium text-gray-600">
+            Username
+          </label>
           <input
             id="username"
             name="username"
-            className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+            className="mt-1 p-2 text-base w-full text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
             placeholder="Username"
             type="text"
           />
         </div>
-      </div>
-      <div className="mb-4">
-        <label htmlFor="password" className="sr-only">
-          Password
-        </label>
-        <div className="relative">
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
-              <path d="M13.5 13.5l4.5 4.5"/>
-            </svg>
-          </div>
+        <div className="mb-6">
+          <label htmlFor="password" className="block text-sm font-medium text-gray-600">
+            Password
+          </label>
           <input
             id="password"
             name="password"
-            className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+            className="mt-1 p-2 text-base w-full text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
             placeholder="Password"
             type="password"
           />
         </div>
-      </div>
-      <button
-        type="submit"
-        className="inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-center text-white bg-green-500 border border-green-600 rounded-lg sm:w-auto focus:ring-4 focus:ring-green-300"
-      >
-        Login <i className="fas fa-arrow-right ml-1"></i>
-      </button>
-    </form>
+        <button
+          type="submit"
+          className="w-full flex justify-center py-2 px-4 bg-green-500 rounded-md text-white font-medium hover:bg-green-600 focus:ring-4 focus:ring-green-300 focus:outline-none mt-4"
+        >
+          Login
+          <i className="fas fa-arrow-right ml-1"></i>
+        </button>
+        <p className="mt-4 text-center text-gray-600 font__poppins">
+          Not Registered? <a href="/register" className="text-green-500">Create an account</a>
+        </p>
+      </form>
+    </div>
   );
-}
+}
diff --git a/components/Search.tsx b/components/Search.tsx
@@ -139,22 +139,22 @@ const Search = (props: any) => {
           <form className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
           <div className="sm:col-span-2 lg:col-span-3 relative">
             <label htmlFor="search" className="sr-only">Search</label>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                  <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
-                    <path d="M13.5 13.5l4.5 4.5"/>
-                  </svg>
-                </div>
-                <input
-                  id="search"
-                  name="search"
-                  className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
-                  placeholder="Search by city, state, or zip code"
-                  type="search"
-                />
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
+                  <path d="M13.5 13.5l4.5 4.5"/>
+                </svg>
               </div>
+              <input
+                id="search"
+                name="search"
+                className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                placeholder="Search by city, state, or zip code"
+                type="search"
+              />
             </div>
+          </div>
             <div className="sm:col-span-2 lg:col-span-1">
               <label htmlFor="species" className="sr-only">Species</label>
               <select onChange={(event) => setSelectedAnimal(event.target.value)} id="species" name="species" className="block w-full py-3 pl-3 pr-10 text-base text-gray-900 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">