chore(configurações): redesign visual da página de configurações

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-03-30 18:47:19 +00:00
parent f418987f47
commit 2a458d5a3c
3 changed files with 68 additions and 60 deletions

View File

@@ -1,7 +1,6 @@
"use client";
import {
RiAndroidLine,
RiDownload2Line,
RiExternalLinkLine,
RiNotification3Line,
@@ -9,7 +8,6 @@ import {
RiShieldCheckLine,
} from "@remixicon/react";
import type { ReactNode } from "react";
import { Card } from "@/shared/components/ui/card";
import { ApiTokensForm } from "./api-tokens-form";
interface ApiToken {
@@ -69,49 +67,28 @@ const steps: {
export function CompanionTab({ tokens }: CompanionTabProps) {
return (
<Card className="p-6">
<div className="space-y-6">
{/* Header */}
<div>
<div className="flex items-center gap-2 mb-1">
<h2 className="text-lg font-bold">OpenMonetis Companion</h2>
<span className="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success dark:bg-success/10">
<RiAndroidLine className="h-3 w-3" />
Android
</span>
</div>
<p className="text-sm text-muted-foreground">
Capture notificações de transações dos seus apps de banco (Nubank,
Itaú, Bradesco, Inter, C6 e outros) e envie para sua caixa de
entrada.
</p>
</div>
{/* Steps */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">
{steps.map((step, index) => (
<div key={step.title} className="flex items-start gap-2">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
<step.icon className="h-4 w-4" />
</div>
<div className="min-w-0">
<p className="text-sm font-medium leading-tight">
{index + 1}. {step.title}
</p>
<p className="text-xs text-muted-foreground">
{step.description}
</p>
</div>
<div className="space-y-6">
{/* Steps */}
<div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">
{steps.map((step, index) => (
<div key={step.title} className="flex items-start gap-2">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
<step.icon className="h-4 w-4" />
</div>
))}
</div>
{/* Divider */}
<div className="border-t" />
{/* Devices */}
<ApiTokensForm tokens={tokens} />
<div className="min-w-0">
<p className="text-sm font-medium leading-tight">
{index + 1}. {step.title}
</p>
<p className="text-xs text-muted-foreground">
{step.description}
</p>
</div>
</div>
))}
</div>
</Card>
{/* Devices */}
<ApiTokensForm tokens={tokens} />
</div>
);
}

View File

@@ -73,7 +73,9 @@ export function PasskeysForm() {
const { data, error: fetchError } =
await authClient.passkey.listUserPasskeys();
if (fetchError) {
setError((fetchError.message as string) || "Erro ao carregar passkeys.");
setError(
(fetchError.message as string) || "Erro ao carregar passkeys.",
);
return;
}
setPasskeys(
@@ -134,7 +136,9 @@ export function PasskeysForm() {
name: editName.trim(),
});
if (renameError) {
setError((renameError.message as string) || "Erro ao renomear passkey.");
setError(
(renameError.message as string) || "Erro ao renomear passkey.",
);
return;
}
setEditingId(null);