style: melhora layout de login e settings
- Badge Helpdesk preta com texto branco - Texto maior no painel direito das páginas de auth - Badge de papel preta em settings - Adiciona descrição na seção Segurança - Espaçamento entre título e campos no formulário de login - Autocomplete nos inputs de senha - Link de notificações funcional no menu do usuário - Fallback do avatar com fundo cinza e texto preto 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rever-tecnologia
parent
ab7dfa81ca
commit
b614fcd7dc
6 changed files with 39 additions and 25 deletions
|
|
@ -60,7 +60,7 @@ export function LoginPageClient() {
|
|||
<span className="text-2xl font-bold tracking-tight text-neutral-900">
|
||||
Raven
|
||||
</span>
|
||||
<span className="rounded-full bg-cyan-100 px-2.5 py-0.5 text-xs font-medium text-cyan-700 border border-cyan-200">
|
||||
<span className="rounded-full bg-neutral-900 px-2.5 py-0.5 text-xs font-medium text-white">
|
||||
Helpdesk
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -90,10 +90,10 @@ export function LoginPageClient() {
|
|||
</div>
|
||||
<div className="relative hidden overflow-hidden bg-gradient-to-br from-neutral-800 via-neutral-700 to-neutral-600 lg:flex">
|
||||
<ShaderBackground className="h-full w-full opacity-50" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="absolute inset-0 flex items-center justify-center px-8">
|
||||
<div className="text-center text-white">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Bem-vindo de volta</h2>
|
||||
<p className="mt-2 text-neutral-300">
|
||||
<h2 className="text-5xl font-bold tracking-tight leading-tight">Bem-vindo de volta</h2>
|
||||
<p className="mt-4 text-xl text-neutral-300">
|
||||
Gerencie seus chamados e tickets de forma simples
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export function ForgotPasswordPageClient() {
|
|||
<span className="text-2xl font-bold tracking-tight text-neutral-900">
|
||||
Raven
|
||||
</span>
|
||||
<span className="rounded-full bg-cyan-100 px-2.5 py-0.5 text-xs font-medium text-cyan-700 border border-cyan-200">
|
||||
<span className="rounded-full bg-neutral-900 px-2.5 py-0.5 text-xs font-medium text-white">
|
||||
Helpdesk
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -108,10 +108,10 @@ export function ForgotPasswordPageClient() {
|
|||
</div>
|
||||
<div className="relative hidden overflow-hidden bg-gradient-to-br from-neutral-800 via-neutral-700 to-neutral-600 lg:flex">
|
||||
<ShaderBackground className="h-full w-full opacity-50" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="absolute inset-0 flex items-center justify-center px-8">
|
||||
<div className="text-center text-white">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Recuperar acesso</h2>
|
||||
<p className="mt-2 text-neutral-300">
|
||||
<h2 className="text-5xl font-bold tracking-tight leading-tight">Recuperar acesso</h2>
|
||||
<p className="mt-4 text-xl text-neutral-300">
|
||||
Enviaremos as instruções para seu e-mail
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export function ResetPasswordPageClient() {
|
|||
<span className="text-2xl font-bold tracking-tight text-neutral-900">
|
||||
Raven
|
||||
</span>
|
||||
<span className="rounded-full bg-cyan-100 px-2.5 py-0.5 text-xs font-medium text-cyan-700 border border-cyan-200">
|
||||
<span className="rounded-full bg-neutral-900 px-2.5 py-0.5 text-xs font-medium text-white">
|
||||
Helpdesk
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -144,10 +144,10 @@ export function ResetPasswordPageClient() {
|
|||
</div>
|
||||
<div className="relative hidden overflow-hidden bg-gradient-to-br from-neutral-800 via-neutral-700 to-neutral-600 lg:flex">
|
||||
<ShaderBackground className="h-full w-full opacity-50" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="absolute inset-0 flex items-center justify-center px-8">
|
||||
<div className="text-center text-white">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Nova senha</h2>
|
||||
<p className="mt-2 text-neutral-300">
|
||||
<h2 className="text-5xl font-bold tracking-tight leading-tight">Nova senha</h2>
|
||||
<p className="mt-4 text-xl text-neutral-300">
|
||||
Crie uma senha segura para sua conta
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export function LoginForm({ className, callbackUrl, disabled = false, ...props }
|
|||
{...props}
|
||||
>
|
||||
<FieldGroup>
|
||||
<div className="flex flex-col items-center gap-1 text-center">
|
||||
<div className="flex flex-col items-center gap-1 text-center pb-4">
|
||||
<h1 className="text-2xl font-bold">Acesse sua conta</h1>
|
||||
<p className="text-muted-foreground text-sm text-balance">
|
||||
Informe seu e-mail corporativo e senha para continuar atendendo os chamados.
|
||||
|
|
|
|||
|
|
@ -70,6 +70,10 @@ export function NavUser({ user }: NavUserProps) {
|
|||
router.push("/settings")
|
||||
}, [router])
|
||||
|
||||
const handleNotifications = useCallback(() => {
|
||||
router.push("/settings/notifications")
|
||||
}, [router])
|
||||
|
||||
const handleSignOut = useCallback(async () => {
|
||||
if (isSigningOut) return
|
||||
setIsSigningOut(true)
|
||||
|
|
@ -94,9 +98,9 @@ export function NavUser({ user }: NavUserProps) {
|
|||
size="lg"
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar className="h-8 w-8 rounded-lg grayscale">
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src={normalizedUser.avatarUrl ?? undefined} alt={displayName} />
|
||||
<AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
|
||||
<AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-700 font-medium">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{displayName}</span>
|
||||
|
|
@ -117,7 +121,7 @@ export function NavUser({ user }: NavUserProps) {
|
|||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src={normalizedUser.avatarUrl ?? undefined} alt={displayName} />
|
||||
<AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
|
||||
<AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-700 font-medium">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{displayName}</span>
|
||||
|
|
@ -138,9 +142,14 @@ export function NavUser({ user }: NavUserProps) {
|
|||
<IconUserCircle className="size-4" />
|
||||
<span>Meu perfil</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled>
|
||||
<DropdownMenuItem
|
||||
onSelect={(event) => {
|
||||
event.preventDefault()
|
||||
handleNotifications()
|
||||
}}
|
||||
>
|
||||
<IconNotification className="size-4" />
|
||||
<span>Notificações (em breve)</span>
|
||||
<span>Notificações</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
{!isDesktopShell && !isMachineSession ? (
|
||||
|
|
|
|||
|
|
@ -54,11 +54,11 @@ const ROLE_LABELS: Record<string, string> = {
|
|||
}
|
||||
|
||||
const ROLE_COLORS: Record<string, string> = {
|
||||
admin: "bg-cyan-100 text-cyan-800 border-cyan-300",
|
||||
manager: "bg-cyan-50 text-cyan-700 border-cyan-200",
|
||||
agent: "bg-cyan-50 text-cyan-600 border-cyan-200",
|
||||
collaborator: "bg-neutral-100 text-neutral-600 border-neutral-200",
|
||||
customer: "bg-neutral-100 text-neutral-600 border-neutral-200",
|
||||
admin: "bg-neutral-900 text-white border-neutral-900",
|
||||
manager: "bg-neutral-800 text-white border-neutral-800",
|
||||
agent: "bg-neutral-700 text-white border-neutral-700",
|
||||
collaborator: "bg-neutral-600 text-white border-neutral-600",
|
||||
customer: "bg-neutral-500 text-white border-neutral-500",
|
||||
}
|
||||
|
||||
const SETTINGS_ACTIONS: SettingsAction[] = [
|
||||
|
|
@ -240,11 +240,14 @@ export function SettingsContent() {
|
|||
</Card>
|
||||
|
||||
<Card className="rounded-2xl border border-border/60 bg-white shadow-sm">
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold text-neutral-900">
|
||||
<Clock className="size-4 text-neutral-500" />
|
||||
Segurança
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs text-neutral-500">
|
||||
Gerencie a segurança da sua conta
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button variant="outline" size="sm" className="w-full justify-start gap-2" asChild>
|
||||
|
|
@ -443,7 +446,7 @@ function ProfileEditCard({
|
|||
<div className="relative group">
|
||||
<Avatar className="size-20 border-4 border-white shadow-lg ring-2 ring-neutral-200">
|
||||
<AvatarImage src={localAvatarUrl ?? undefined} alt={name} />
|
||||
<AvatarFallback className="bg-gradient-to-br from-cyan-500 to-cyan-600 text-xl font-semibold text-white">
|
||||
<AvatarFallback className="bg-neutral-200 text-xl font-semibold text-neutral-700">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
|
@ -518,12 +521,14 @@ function ProfileEditCard({
|
|||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Nova senha"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirmar senha"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-neutral-400">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue