refactor(frontend): ajusta layout e imports

- Remove Navigate não usado e marca enums apenas como tipo
- Evita classe 'undefined' no Layout ao compor className opcional
- Simplifica estilos do Login para rótulos, logo e wrapper de senha
master
Artur Oliveira 2025-12-16 11:51:27 -03:00
parent 229bc1fdca
commit af7511195d
4 changed files with 15 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css'; import './App.css';
import { Login } from './pages/Login'; import { Login } from './pages/Login';
import { Dashboard } from './pages/Dashboard'; import { Dashboard } from './pages/Dashboard';

View File

@ -1,12 +1,17 @@
import type { ReactNode } from "react";
interface Props { interface Props {
children: React.ReactNode children: ReactNode;
className?: string className?: string;
} }
export const Layout = ({ children, className }: Props) => { export const Layout = ({ children, className }: Props) => {
const baseClass = "mx-[5%] items-center";
const layoutClass = className ? `${baseClass} ${className}` : baseClass;
return ( return (
<div className={`mx-[5%] items-center ${className}`}> <div className={layoutClass}>
{children} {children}
</div> </div>
); );
}; };

View File

@ -50,11 +50,11 @@ export const Login = () => {
return ( return (
<Layout className={Styles.layout}> <Layout className={Styles.layout}>
<img src="/logo.webp " alt="Logo" className={Styles.logo} /> <img src="/logo.webp " alt="Logo" className="w-36 h-36 mx-auto mb-4" />
<div className={Styles.card}> <div className={Styles.card}>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div> <div>
<label htmlFor="email" className={Styles.label}>Email:</label> <label htmlFor="email" className="block mb-2 text-md font-medium text-text">Email:</label>
<input <input
type="email" type="email"
id="email" id="email"
@ -64,8 +64,8 @@ export const Login = () => {
className={Styles.input} className={Styles.input}
onChange={handleChange}/> onChange={handleChange}/>
</div> </div>
<div className={Styles.inputWrapper}> <div className="relative">
<label htmlFor="password" className={Styles.label}>Password:</label> <label htmlFor="password" className="block mb-2 text-md font-medium text-text">Password:</label>
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
id="password" id="password"
@ -96,10 +96,7 @@ export const Login = () => {
const Styles = { const Styles = {
layout: "h-screen flex flex-col gap-4 justify-center animate-fade-up", layout: "h-screen flex flex-col gap-4 justify-center animate-fade-up",
logo: "w-36 h-36 mx-auto mb-4",
card: "w-96 p-8 shadow-lg rounded-lg border border-cardBorder bg-card", card: "w-96 p-8 shadow-lg rounded-lg border border-cardBorder bg-card",
label: "block mb-2 text-md font-medium text-text",
inputWrapper: "relative",
input: "bg-gray-50 border border-cardBorder text-text text-md rounded-lg outline-none block w-full p-2.5", input: "bg-gray-50 border border-cardBorder text-text text-md rounded-lg outline-none block w-full p-2.5",
iconButton: "absolute right-3 top-1/2 text-text p-1 focus:outline-none", iconButton: "absolute right-3 top-1/2 text-text p-1 focus:outline-none",
button: "w-full bg-accent p-2 rounded-md mt-4 text-white font-bold text-lg hover:bg-hover transition duration-150", button: "w-full bg-accent p-2 rounded-md mt-4 text-white font-bold text-lg hover:bg-hover transition duration-150",

View File

@ -1,4 +1,4 @@
import { Applications, DatabaseType, ServersType } from "./enums"; import type { Applications, DatabaseType, ServersType } from "./enums";
export interface Server { export interface Server {
id: string; id: string;