feat: atualiza fontes e altera avatar SVG

- Substitui a fonte "Outfit" pela "Funnel_Display" no arquivo font_index.ts. - Atualiza a referência da fonte principal para "anthropic_sans" e define "funnel_display" como a fonte para "money_font" e "title_font". - Modifica o arquivo SVG do avatar 015, alterando a cor de preenchimento de alguns elementos para um tom mais vibrante (#F96837).
2025-11-22 12:49:56 -03:00
parent 4d076772e6
commit 8c5313119d
30 changed files with 411 additions and 211 deletions
--- a/components/ajustes/update-password-form.tsx
+++ b/components/ajustes/update-password-form.tsx
@@ -4,10 +4,70 @@ import { updatePasswordAction } from "@/app/(dashboard)/ajustes/actions";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils/ui";
 import { RiEyeLine, RiEyeOffLine, RiCheckLine, RiCloseLine, RiAlertLine } from "@remixicon/react";
 import { useState, useTransition, useMemo } from "react";
 import { toast } from "sonner";

+interface PasswordValidation {
+  hasLowercase: boolean;
+  hasUppercase: boolean;
+  hasNumber: boolean;
+  hasSpecial: boolean;
+  hasMinLength: boolean;
+  hasMaxLength: boolean;
+  isValid: boolean;
+}
+
+function validatePassword(password: string): PasswordValidation {
+  const hasLowercase = /[a-z]/.test(password);
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasNumber = /\d/.test(password);
+  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(password);
+  const hasMinLength = password.length >= 7;
+  const hasMaxLength = password.length <= 23;
+
+  return {
+    hasLowercase,
+    hasUppercase,
+    hasNumber,
+    hasSpecial,
+    hasMinLength,
+    hasMaxLength,
+    isValid:
+      hasLowercase &&
+      hasUppercase &&
+      hasNumber &&
+      hasSpecial &&
+      hasMinLength &&
+      hasMaxLength,
+  };
+}
+
+function PasswordRequirement({
+  met,
+  label,
+}: {
+  met: boolean;
+  label: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 text-xs transition-colors",
+        met ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
+      )}
+    >
+      {met ? (
+        <RiCheckLine className="h-3.5 w-3.5" />
+      ) : (
+        <RiCloseLine className="h-3.5 w-3.5" />
+      )}
+      <span>{label}</span>
+    </div>
+  );
+}
+
 type UpdatePasswordFormProps = {
  authProvider?: string; // 'google' | 'credential' | undefined
 };
@@ -30,30 +90,23 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
    return newPassword === confirmPassword;
  }, [newPassword, confirmPassword]);

-  // Indicador de força da senha (básico)
-  const passwordStrength = useMemo(() => {
-    if (!newPassword) return null;
-    if (newPassword.length < 6) return "weak";
-    if (newPassword.length >= 12 && /[A-Z]/.test(newPassword) && /[0-9]/.test(newPassword) && /[^A-Za-z0-9]/.test(newPassword)) {
-      return "strong";
-    }
-    if (newPassword.length >= 8 && (/[A-Z]/.test(newPassword) || /[0-9]/.test(newPassword))) {
-      return "medium";
-    }
-    return "weak";
-  }, [newPassword]);
+  // Validação de requisitos da senha
+  const passwordValidation = useMemo(
+    () => validatePassword(newPassword),
+    [newPassword]
+  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Validação frontend antes de enviar
-    if (newPassword !== confirmPassword) {
-      toast.error("As senhas não coincidem");
+    if (!passwordValidation.isValid) {
+      toast.error("A senha não atende aos requisitos de segurança");
      return;
    }

-    if (newPassword.length < 6) {
-      toast.error("A senha deve ter no mínimo 6 caracteres");
+    if (newPassword !== confirmPassword) {
+      toast.error("As senhas não coincidem");
      return;
    }

@@ -145,12 +198,13 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            disabled={isPending}
-            placeholder="Mínimo de 6 caracteres"
+            placeholder="Crie uma senha forte"
            required
-            minLength={6}
+            minLength={7}
+            maxLength={23}
            aria-required="true"
            aria-describedby="new-password-help"
-            aria-invalid={newPassword.length > 0 && newPassword.length < 6}
+            aria-invalid={newPassword.length > 0 && !passwordValidation.isValid}
          />
          <button
            type="button"
@@ -165,42 +219,35 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
            )}
          </button>
        </div>
-        <div className="space-y-1">
-          <p id="new-password-help" className="text-xs text-muted-foreground">
-            Use no mínimo 6 caracteres. Recomendado: 12+ caracteres com letras, números e símbolos
-          </p>
-          {/* Indicador de força da senha */}
-          {passwordStrength && (
-            <div className="flex items-center gap-2">
-              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
-                <div
-                  className={`h-full transition-all duration-300 ${
-                    passwordStrength === "weak"
-                      ? "w-1/3 bg-red-500"
-                      : passwordStrength === "medium"
-                      ? "w-2/3 bg-amber-500"
-                      : "w-full bg-green-500"
-                  }`}
-                />
-              </div>
-              <span
-                className={`text-xs font-medium ${
-                  passwordStrength === "weak"
-                    ? "text-red-600 dark:text-red-400"
-                    : passwordStrength === "medium"
-                    ? "text-amber-600 dark:text-amber-400"
-                    : "text-green-600 dark:text-green-400"
-                }`}
-              >
-                {passwordStrength === "weak"
-                  ? "Fraca"
-                  : passwordStrength === "medium"
-                  ? "Média"
-                  : "Forte"}
-              </span>
-            </div>
-          )}
-        </div>
+        {/* Indicadores de requisitos da senha */}
+        {newPassword.length > 0 && (
+          <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+            <PasswordRequirement
+              met={passwordValidation.hasMinLength}
+              label="Mínimo 7 caracteres"
+            />
+            <PasswordRequirement
+              met={passwordValidation.hasMaxLength}
+              label="Máximo 23 caracteres"
+            />
+            <PasswordRequirement
+              met={passwordValidation.hasLowercase}
+              label="Letra minúscula"
+            />
+            <PasswordRequirement
+              met={passwordValidation.hasUppercase}
+              label="Letra maiúscula"
+            />
+            <PasswordRequirement
+              met={passwordValidation.hasNumber}
+              label="Número"
+            />
+            <PasswordRequirement
+              met={passwordValidation.hasSpecial}
+              label="Caractere especial"
+            />
+          </div>
+        )}
      </div>

      {/* Confirmar nova senha */}
@@ -267,7 +314,7 @@ export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
        )}
      </div>

-      <Button type="submit" disabled={isPending || passwordsMatch === false}>
+      <Button type="submit" disabled={isPending || passwordsMatch === false || (newPassword.length > 0 && !passwordValidation.isValid)}>
        {isPending ? "Atualizando..." : "Atualizar senha"}
      </Button>
    </form>
--- a/components/auth/auth-header.tsx
+++ b/components/auth/auth-header.tsx
@@ -2,16 +2,14 @@ import { cn } from "@/lib/utils/ui";

 interface AuthHeaderProps {
  title: string;
-  description: string;
 }

-export function AuthHeader({ title, description }: AuthHeaderProps) {
+export function AuthHeader({ title }: AuthHeaderProps) {
  return (
    <div className={cn("flex flex-col gap-1.5")}>
      <h1 className="text-xl font-semibold tracking-tight text-card-foreground">
        {title}
      </h1>
-      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  );
 }
--- a/components/auth/login-form.tsx
+++ b/components/auth/login-form.tsx
@@ -99,10 +99,7 @@ export function LoginForm({ className, ...props }: DivProps) {
            noValidate
          >
            <FieldGroup className="gap-4">
-              <AuthHeader
-                title="Entrar no OpenSheets"
-                description="Entre com a sua conta"
-              />
+              <AuthHeader title="Entrar no OpenSheets" />

              <AuthErrorAlert error={error} />

--- a/components/auth/signup-form.tsx
+++ b/components/auth/signup-form.tsx
@@ -13,13 +13,73 @@ import { authClient, googleSignInAvailable } from "@/lib/auth/client";
 import { cn } from "@/lib/utils/ui";
 import { RiLoader4Line } from "@remixicon/react";
 import { useRouter } from "next/navigation";
-import { useState, type FormEvent } from "react";
+import { useState, useMemo, type FormEvent } from "react";
 import { toast } from "sonner";
 import { Logo } from "../logo";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
 import AuthSidebar from "./auth-sidebar";
 import { GoogleAuthButton } from "./google-auth-button";
+import { RiCheckLine, RiCloseLine } from "@remixicon/react";
+
+interface PasswordValidation {
+  hasLowercase: boolean;
+  hasUppercase: boolean;
+  hasNumber: boolean;
+  hasSpecial: boolean;
+  hasMinLength: boolean;
+  hasMaxLength: boolean;
+  isValid: boolean;
+}
+
+function validatePassword(password: string): PasswordValidation {
+  const hasLowercase = /[a-z]/.test(password);
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasNumber = /\d/.test(password);
+  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(password);
+  const hasMinLength = password.length >= 7;
+  const hasMaxLength = password.length <= 23;
+
+  return {
+    hasLowercase,
+    hasUppercase,
+    hasNumber,
+    hasSpecial,
+    hasMinLength,
+    hasMaxLength,
+    isValid:
+      hasLowercase &&
+      hasUppercase &&
+      hasNumber &&
+      hasSpecial &&
+      hasMinLength &&
+      hasMaxLength,
+  };
+}
+
+function PasswordRequirement({
+  met,
+  label,
+}: {
+  met: boolean;
+  label: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 text-xs transition-colors",
+        met ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
+      )}
+    >
+      {met ? (
+        <RiCheckLine className="h-3.5 w-3.5" />
+      ) : (
+        <RiCloseLine className="h-3.5 w-3.5" />
+      )}
+      <span>{label}</span>
+    </div>
+  );
+}

 type DivProps = React.ComponentProps<"div">;

@@ -35,9 +95,19 @@ export function SignupForm({ className, ...props }: DivProps) {
  const [loadingEmail, setLoadingEmail] = useState(false);
  const [loadingGoogle, setLoadingGoogle] = useState(false);

+  const passwordValidation = useMemo(
+    () => validatePassword(password),
+    [password]
+  );
+
  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

+    if (!passwordValidation.isValid) {
+      setError("A senha não atende aos requisitos de segurança.");
+      return;
+    }
+
    await authClient.signUp.email(
      {
        email,
@@ -99,10 +169,7 @@ export function SignupForm({ className, ...props }: DivProps) {
            noValidate
          >
            <FieldGroup className="gap-4">
-              <AuthHeader
-                title="Criar sua conta"
-                description="Comece com sua nova conta"
-              />
+              <AuthHeader title="Criar sua conta" />

              <AuthErrorAlert error={error} />

@@ -144,14 +211,43 @@ export function SignupForm({ className, ...props }: DivProps) {
                  placeholder="Crie uma senha forte"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
-                  aria-invalid={!!error}
+                  aria-invalid={!!error || (password.length > 0 && !passwordValidation.isValid)}
+                  maxLength={23}
                />
+                {password.length > 0 && (
+                  <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
+                    <PasswordRequirement
+                      met={passwordValidation.hasMinLength}
+                      label="Mínimo 7 caracteres"
+                    />
+                    <PasswordRequirement
+                      met={passwordValidation.hasMaxLength}
+                      label="Máximo 23 caracteres"
+                    />
+                    <PasswordRequirement
+                      met={passwordValidation.hasLowercase}
+                      label="Letra minúscula"
+                    />
+                    <PasswordRequirement
+                      met={passwordValidation.hasUppercase}
+                      label="Letra maiúscula"
+                    />
+                    <PasswordRequirement
+                      met={passwordValidation.hasNumber}
+                      label="Número"
+                    />
+                    <PasswordRequirement
+                      met={passwordValidation.hasSpecial}
+                      label="Caractere especial"
+                    />
+                  </div>
+                )}
              </Field>

              <Field>
                <Button
                  type="submit"
-                  disabled={loadingEmail || loadingGoogle}
+                  disabled={loadingEmail || loadingGoogle || (password.length > 0 && !passwordValidation.isValid)}
                  className="w-full"
                >
                  {loadingEmail ? (
--- a/components/dashboard/section-cards.tsx
+++ b/components/dashboard/section-cards.tsx
@@ -15,6 +15,7 @@ import {
  RiSubtractLine,
 } from "@remixicon/react";
 import MoneyValues from "../money-values";
+import { title_font } from "@/public/fonts/font_index";

 type SectionCardsProps = {
  metrics: DashboardCardMetrics;
@@ -60,7 +61,9 @@ const getPercentChange = (current: number, previous: number): string => {

 export function SectionCards({ metrics }: SectionCardsProps) {
  return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div
+      className={`${title_font.className} *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4`}
+    >
      {CARDS.map(({ label, key, icon: Icon }) => {
        const metric = metrics[key];
        const trend = getTrend(metric.current, metric.previous);
--- a/components/insights/insights-page.tsx
+++ b/components/insights/insights-page.tsx
@@ -86,7 +86,11 @@ export function InsightsPage({ period, onAnalyze }: InsightsPageProps) {

    startSaveTransition(async () => {
      try {
-        const result = await saveInsightsAction(period, selectedModel, insights);
+        const result = await saveInsightsAction(
+          period,
+          selectedModel,
+          insights
+        );

        if (result.success) {
          setIsSaved(true);
@@ -135,7 +139,7 @@ export function InsightsPage({ period, onAnalyze }: InsightsPageProps) {
        <Button
          onClick={handleAnalyze}
          disabled={isPending || isLoading}
-          className="bg-linear-to-r from-primary to-emerald-400 dark:from-primary-dark dark:to-emerald-600"
+          className="bg-linear-to-r from-primary to-violet-500 dark:from-primary-dark dark:to-emerald-600"
        >
          <RiSparklingLine className="mr-2 size-5" aria-hidden="true" />
          {isPending ? "Analisando..." : "Gerar análise inteligente"}
@@ -163,7 +167,10 @@ export function InsightsPage({ period, onAnalyze }: InsightsPageProps) {

        {isSaved && savedDate && (
          <span className="text-sm text-muted-foreground">
-            Salva em {format(new Date(savedDate), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}
+            Salva em{" "}
+            {format(new Date(savedDate), "dd/MM/yyyy 'às' HH:mm", {
+              locale: ptBR,
+            })}
          </span>
        )}
      </div>
--- a/components/month-picker/month-picker.tsx
+++ b/components/month-picker/month-picker.tsx
@@ -2,7 +2,7 @@

 import { Card } from "@/components/ui/card";
 import { useMonthPeriod } from "@/hooks/use-month-period";
-import { money_font } from "@/public/fonts/font_index";
+import { main_font } from "@/public/fonts/font_index";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useTransition } from "react";
 import LoadingSpinner from "./loading-spinner";
@@ -81,7 +81,7 @@ export default function MonthPicker() {

  return (
    <Card
-      className={`${money_font.className} sticky top-0 z-30 w-full flex-row border-none bg-month-picker text-month-picker-foreground p-5 shadow-none drop-shadow-none`}
+      className={`${main_font.className} sticky top-0 z-30 w-full flex-row border-none bg-month-picker text-month-picker-foreground p-5 shadow-none drop-shadow-none`}
    >
      <div className="flex items-center gap-1">
        <NavigationButton
@@ -92,12 +92,12 @@ export default function MonthPicker() {

        <div className="flex items-center">
          <div
-            className="mx-1 space-x-1 capitalize font-medium tracking-wide"
+            className="mx-1 space-x-1 capitalize font-bold tracking-wide"
            aria-current={!isDifferentFromCurrent ? "date" : undefined}
            aria-label={`Período selecionado: ${currentMonthLabel} de ${currentYear}`}
          >
            <span>{currentMonthLabel}</span>
-            <span className="font-bold">{currentYear}</span>
+            <span>{currentYear}</span>
          </div>

          {isPending && <LoadingSpinner />}
--- a/components/month-picker/return-button.tsx
+++ b/components/month-picker/return-button.tsx
@@ -11,7 +11,7 @@ interface ReturnButtonProps {
 const ReturnButton = React.memo(({ disabled, onClick }: ReturnButtonProps) => {
  return (
    <Button
-      className="w-28 h-6"
+      className="w-28 h-6 rounded-sm"
      size="sm"
      disabled={disabled}
      onClick={onClick}
--- a/components/sidebar/nav-main.tsx
+++ b/components/sidebar/nav-main.tsx
@@ -98,7 +98,7 @@ export function NavMain({ sections }: { sections: NavSection[] }) {
  );

  const activeLinkClasses =
-    "data-[active=true]:bg-dark! shadow-md data-[active=true]:text-dark-foreground! hover:bg-primary/10! hover:text-primary!";
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!";

  return (
    <>
@@ -119,8 +119,8 @@ export function NavMain({ sections }: { sections: NavSection[] }) {
                        className={itemIsActive ? activeLinkClasses : ""}
                      >
                        <Link prefetch href={buildHrefWithPeriod(item.url)}>
-                          <item.icon className="h-4 w-4" />
-                          <span className="lowercase">{item.title}</span>
+                          <item.icon className={"h-4 w-4"} />
+                          {item.title}
                        </Link>
                      </SidebarMenuButton>
                      {item.items?.length ? (
--- a/components/sidebar/nav-secondary.tsx
+++ b/components/sidebar/nav-secondary.tsx
@@ -56,12 +56,12 @@ export function NavSecondary({
                  isActive={itemIsActive}
                  className={
                    itemIsActive
-                      ? "data-[active=true]:bg-dark! shadow-md data-[active=true]:text-dark-foreground! hover:bg-primary/10! hover:text-primary!"
+                      ? "data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!"
                      : ""
                  }
                >
                  <Link prefetch href={item.url}>
-                    <item.icon className="h-4 w-4" />
+                    <item.icon className={"h-4 w-4"} />
                    <span>{item.title}</span>
                  </Link>
                </SidebarMenuButton>
--- a/components/sidebar/nav-user.tsx
+++ b/components/sidebar/nav-user.tsx
@@ -23,7 +23,6 @@ type NavUserProps = {
 export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
  useSidebar();

-  // Lógica de fallback: user.image (Google) > pagador avatar > default
  const avatarSrc = useMemo(() => {
    if (user.image) {
      return user.image;
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 border-[1.5px] drop-shadow-xs py-6 rounded-md hover:border-primary/50 transition-colors",
+        "bg-card text-card-foreground flex flex-col gap-6 border drop-shadow-xs py-6 rounded-md hover:border-primary/50 transition-colors",
        className
      )}
      {...props}
--- a/components/widget-card.tsx
+++ b/components/widget-card.tsx
@@ -15,6 +15,7 @@ import {
 import { RiExpandDiagonalLine } from "@remixicon/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "./ui/button";
+import { title_font } from "@/public/fonts/font_index";

 const OVERFLOW_THRESHOLD_PX = 16;
 const OVERFLOW_CHECK_DEBOUNCE_MS = 100;
@@ -78,7 +79,9 @@ export default function WidgetCard({
      <CardHeader className="border-b [.border-b]:pb-2">
        <div className="flex w-full items-start justify-between">
          <div>
-            <CardTitle className="flex items-center gap-1">
+            <CardTitle
+              className={`${title_font.className} flex items-center gap-1`}
+            >
              {icon}
              {title}
            </CardTitle>