feat: replace SVG icons with Lucide components across various Svelte components for improved consistency and maintainability

This commit is contained in:
2025-12-04 14:30:31 -03:00
parent a3d9e782af
commit 88f25dc6ab
21 changed files with 457 additions and 2921 deletions

View File

@@ -5,6 +5,7 @@
import { format } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import { onMount, tick } from 'svelte';
import { File, CheckCircle2, CheckCircle, MessageSquare, Bell, X } from 'lucide-svelte';
interface Props {
conversaId: Id<'conversas'>;
@@ -590,20 +591,7 @@
rel="noopener noreferrer"
class="flex items-center gap-2 hover:opacity-80"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
/>
</svg>
<File class="h-5 w-5" strokeWidth={1.5} />
<div class="text-sm">
<p class="font-medium">{mensagem.arquivoNome}</p>
{#if mensagem.arquivoTamanho}
@@ -655,45 +643,15 @@
<div class="ml-1 flex items-center gap-0.5">
{#if mensagemFoiLida(mensagem)}
<!-- Dois checks azuis para mensagem lida -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
<CheckCircle2
class="h-3.5 w-3.5 text-blue-500"
style="margin-left: -2px;"
>
<path
fill-rule="evenodd"
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-3.5 w-3.5 text-blue-500"
>
<path
fill-rule="evenodd"
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
/>
<CheckCircle2 class="h-3.5 w-3.5 text-blue-500" fill="currentColor" />
{:else}
<!-- Um check verde para mensagem enviada -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-3.5 w-3.5 text-green-500"
>
<path
fill-rule="evenodd"
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
<CheckCircle class="h-3.5 w-3.5 text-green-500" fill="currentColor" />
{/if}
</div>
{/if}
@@ -761,20 +719,10 @@
{:else}
<!-- Vazio -->
<div class="flex h-full flex-col items-center justify-center text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<MessageSquare
class="text-base-content/30 mb-4 h-16 w-16"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
</svg>
strokeWidth={1.5}
/>
<p class="text-base-content/70">Nenhuma mensagem ainda</p>
<p class="text-base-content/50 mt-1 text-sm">Envie a primeira mensagem!</p>
</div>
@@ -796,17 +744,7 @@
>
<div class="flex items-start gap-3">
<div class="bg-primary/20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="text-primary h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
<Bell class="text-primary h-5 w-5" strokeWidth={2} />
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
/>
</svg>
@@ -831,16 +769,7 @@
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-4 w-4"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
<X class="h-4 w-4" strokeWidth={2} />
</button>
</div>
</div>