Merge pull request #69 from Code-Hammers/login-styling

Landing Page and Login Styling
Code-Hammers · Apr 17, 2024 · d55720a · d55720a
2 parents d8eb303 + 8d1e227
commit d55720a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/client/src/components/Login/Login.tsx b/client/src/components/Login/Login.tsx
@@ -35,42 +35,42 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="w-full max-w-xs">
+    <div className="w-full max-w-md">
       <form
-        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+        className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 shadow-lg rounded px-8 pt-6 pb-8 mb-4"
         onSubmit={handleSubmit}
       >
         <div className="mb-4">
           <label
-            className="block text-gray-700 text-sm font-bold mb-2"
+            className="block text-gray-300 text-sm font-bold mb-2"
             htmlFor="email"
           >
             Email
           </label>
           <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            className="appearance-none border-2 border-gray-700 rounded w-full py-2 px-3 text-gray-300 leading-tight focus:outline-none focus:border-blue-500"
             id="email"
             name="email"
             type="email"
             value={email}
-            placeholder="Email"
+            placeholder="Enter your Email"
             onChange={handleChange}
           />
         </div>
         <div className="mb-6">
           <label
-            className="block text-gray-700 text-sm font-bold mb-2"
+            className="block text-gray-300 text-sm font-bold mb-2"
             htmlFor="password"
           >
             Password
           </label>
           <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            className="appearance-none border-2 border-gray-700 rounded w-full py-2 px-3 text-gray-300 mb-3 leading-tight focus:outline-none focus:border-blue-500"
             id="password"
             name="password"
             type="password"
             value={password}
-            placeholder="******************"
+            placeholder="Enter your password"
             onChange={handleChange}
           />
         </div>

diff --git a/client/src/pages/LandingPage.tsx b/client/src/pages/LandingPage.tsx
@@ -3,11 +3,11 @@ import Login from "../components/Login/Login";
 
 const LandingPage: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
-      <h1 className="text-4xl font-extrabold mb-4">Code Hammers</h1>
-      <p className="text-lg mb-4 text-center px-4">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
-        scelerisque iaculis libero.
+    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+      <h1 className="text-5xl font-extrabold mb-6">Code Hammers</h1>
+      <p className="text-xl mb-6 text-center px-6">
+        Welcome to Code Hammers! Please log in to continue to the main
+        application.
       </p>
       <Login />
     </div>