Login page done and responsive

React/src/index.css

@@ -1,9 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display&display=swap');
 
-.bg-blue-custom {
-  background-color: #2170b9;
+:root {
+  --blue: #2170b9;
 }
 
+.bg-blue-custom {
+  background-color: var(--blue);
+}
+
+p,
 .font-inter {
   font-family: 'Inter', sans-serif;
 }
@@ -12,6 +17,21 @@
   font-family: 'Playfair Display', serif;
 }
 
-/* .text-blue-custom {
-  color: #2170b9;
-} */
+.text-black-custom {
+  color: #1a1c21;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-align: left;
+}
+
+button:hover {
+  background-color: #1d6ab1;
+  border: none;
+}

React/src/pages/components/Button.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Button = () => (
+  <button className="bg-blue-custom border-0 font-inter font-semibold rounded text-xl m-0">
+    Login
+  </button>
+);
+
+export default Button;

React/src/pages/components/LoginWindow.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from './Button';
+
+const LoginWindow = () => {
+  return (
+    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">
+      <h1 className="font-playfair text-black-custom text-6xl mb-12">
+        Traffic Police Service
+      </h1>
+      <p className="text-black-custom font-light text-3xl mb-20">
+        Login to your account to view your dashboard and register a new vehicle.
+      </p>
+      <Button />
+    </div>
+  );
+};
+
+export default LoginWindow;

React/src/pages/components/Main.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Main = ({ Component }) => {
   return (
-    <div className="flex flex-col items-center justify-center h-3/4">
+    <div className="flex flex-col items-center justify-center h-4/5">
       <Component />
     </div>
   );

React/src/pages/login.js

@@ -4,7 +4,7 @@ import { Redirect } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import Navbar from './components/Navbar';
 import Main from './components/Main';
-import VehicleRegisterForm from './components/VehicleRegisterForm';
+import LoginWindow from './components/LoginWindow';
 
 function Login() {
   const user = useSelector((state) => state.auth.user);
@@ -18,7 +18,7 @@ function Login() {
   ) : (
     <div className="h-screen">
       <Navbar />
-      <Main Component={VehicleRegisterForm} />
+      <Main Component={LoginWindow} />
     </div>
   );
 }