chore: Styling Login component

src/App.tsx

@@ -1,12 +1,12 @@
 import './App.css'
-import NavBar from './components/nav_bar/NavBar'
 import Catalog from './pages/catalog/Catalog'
-// import Login from './pages/login/Login'
+// import NavBar from './components/nav_bar/NavBar'
+import Login from './pages/login/Login'
 
 function App() {
   return (
     <>
-      <NavBar/>
+      <Login/>
       <Catalog/>
     </>
   )

src/pages/catalog/components/order/Order.tsx

@@ -2,7 +2,8 @@ import styles from './Order.module.css'
 
 const Order = () => {
   return (
-    <>
+    <div className={styles.container}>
+      <h1>Compra #5428</h1>
       <div>
         <span>Jacinta Perez Gomez</span><br/>
         <span>Avenida Siempre Viva 123</span><br/>
@@ -31,7 +32,7 @@ const Order = () => {
       <label>Comentario:</label>
       <input type="text"/><br/>
       <button>Pagar</button>
-    </>
+    </div>
   )
 }
 

src/pages/login/Login.module.css

@@ -0,0 +1,52 @@
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+h1 {
+    color: #0056b3;
+}
+
+.formWrapper {
+    width: 100%;
+    max-width: 400px;
+
+}
+
+.container input[type="text"],
+.container input[type="password"] {
+    width: 100%;
+    padding: 12px;
+    margin: 8px 0 16px 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.container input[type="submit"] {
+    width: 100%;
+    padding: 12px;
+    margin-top: 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.container input[type="submit"]:hover {
+    background-color: #0056b3;
+}
+
+.container label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: bold;
+}

src/pages/login/Login.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import styles from './Login.module.css'
+
 
 const Login = () => {
   const [user, setUser] = useState<string>("");
@@ -18,23 +20,24 @@ const Login = () => {
     setUser("");
     setPassword("");
   }
-  return (
-    <>
-      <div>
-        <h1>Inicia sesión.</h1>
-      </div>
-      <div>
-        <form onSubmit={handleSubmit}>
-          <img src="https://picsum.photos/300/200?random={i}" alt="Imagen"/><br/>
 
-          <label>Usuario:</label><br/>
+  return (
-          <input type="text" value={user} onChange={handleUserChange}/><br/>
+    <div className={styles.container}>
-          <label>Contraseña</label><br/>
+      <div className={styles.formWrapper}>
-          <input type="password" value={password} onChange={handlePasswordChange}/><br/>
+        <form onSubmit={handleSubmit}>
-          <input type="submit" value="submit"/>
+          <h1>Inicia sesión.</h1>
+          <img src="https://picsum.photos/300/200?random=1" alt="Imagen"/>
+
+          <label>Usuario:</label>
+          <input type="text" value={user} onChange={handleUserChange}/>
+
+          <label>Contraseña</label>
+          <input type="password" value={password} onChange={handlePasswordChange}/>
+
+          <input type="submit" value="Iniciar sesión"/>
         </form>
       </div>
-    </>
+    </div>
 )
 };