Login Page Styling

sqwatato · Aug 21, 2023 · 614ddd4 · 614ddd4
1 parent 3fac6b9
commit 614ddd4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 24 deletions.
diff --git a/components/About.tsx b/components/About.tsx
@@ -11,15 +11,15 @@ const About = () => {
         <div className="mt-20">
           <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 font__poppins">
             <div>
-              <dt className="text-2xl font-medium text-gray-900 font__poppins">Our Mission</dt>
+              <dt className="text-2xl font-bold text-gray-900 font__poppins">Our Mission</dt>
               <dd className="mt-2 text-base text-gray-500">
                 To lighten the load of shelters and rescues by providing a platform for them to
                 connect with potential adopters and donors. We hope to make the adoption process
                 easier for both the adopter and the shelter/rescue.
               </dd>
             </div>
             <div>
-              <dt className="text-2xl font-medium text-gray-900 font__poppins">Our Vision</dt>
+              <dt className="text-2xl font-bold text-gray-900 font__poppins">Our Vision</dt>
               <dd className="mt-2 text-base text-gray-500">
                 We hope to create a world in which pets are able to find happy homes, and
                 where shelters and rescues are able to find the resources they need to continue

diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
@@ -46,28 +46,53 @@ export default function Login() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="text-gray-500">
-      <label>
-        Username:
-        <input
-          type="text"
-          value={username}
-          onChange={(event) => setUsername(event.target.value)}
-          className="border-2 border-gray-300"
-        />
-      </label>
-      <br />
-      <label>
-        Password:
-        <input
-          type="password"
-          value={password}
-          onChange={(event) => setPassword(event.target.value)}
-        className="border-2 border-gray-300"
-        />
-      </label>
-      <br />
-      <button type="submit">Login</button>
+    <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>
+          <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"
+            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>
+          <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"
+            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>
   );
 }
diff --git a/components/Search.tsx b/components/Search.tsx
@@ -133,6 +133,7 @@ const Search = (props: any) => {
           </p>
         </div>
         <div className="mt-12">
+        <h1 className="text-black font-bold font__poppins">Filters</h1>
           <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>