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 senhamaster
parent
229bc1fdca
commit
af7511195d
|
|
@ -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';
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue