From 8d12d80fdc63232d9cd9bf834f6912c8fb27d98a Mon Sep 17 00:00:00 2001 From: aserrador Date: Thu, 22 Jan 2026 16:02:11 -0500 Subject: [PATCH] feat: Login Style --- src/assets/Avatar.svg | 23 +++++++++++++++++++++++ src/pages/login/Login.module.css | 24 ++++++++++++++++-------- src/pages/login/Login.tsx | 21 ++++++++++++++------- 3 files changed, 53 insertions(+), 15 deletions(-) create mode 100644 src/assets/Avatar.svg diff --git a/src/assets/Avatar.svg b/src/assets/Avatar.svg new file mode 100644 index 0000000..4578c1e --- /dev/null +++ b/src/assets/Avatar.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/login/Login.module.css b/src/pages/login/Login.module.css index 256e095..57bb861 100644 --- a/src/pages/login/Login.module.css +++ b/src/pages/login/Login.module.css @@ -19,6 +19,11 @@ /* background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); */ } +.loginForm { + display: flex; + flex-direction: column; + gap: 30px; +} .formWrapper { width: 100%; max-width: 400px; @@ -29,6 +34,17 @@ backdrop-filter: blur(10px); } +.formWrapperTitle { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.loginAvatar { + width: 150px; +} + .container h1 { color: ; text-align: center; @@ -71,11 +87,3 @@ font-weight: 600; color: #555; } - -.container img { - width: 100%; - height: 150px; - object-fit: cover; - border-radius: 8px; - margin-bottom: 20px; -} diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index aa0f421..02bb117 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import styles from './Login.module.css' +import Avatar from "../../assets/Avatar.svg" const Login = () => { @@ -24,15 +25,21 @@ const Login = () => { return (
-
-

Inicia Sesión.

- Imagen + +
+

Inicia Sesión.

+ Imagen +
- - +
+ + +
- - +
+ + +