style(email-action): ajusta cores para cyan consistente com o projeto

- Substitui cores sky por cyan para manter consistencia visual
- Usa transparencia (cyan-50/60, cyan-200/60) conforme padrao do projeto

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
esdrasrenan 2025-12-13 23:56:55 -03:00
parent a4144dd39e
commit 81e4b528d3

View file

@ -61,9 +61,9 @@ type EmailVariable = (typeof EMAIL_VARIABLES)[number]
const CLEAR_SELECT_VALUE = "__clear__" const CLEAR_SELECT_VALUE = "__clear__"
// Estilos do badge de variavel // Estilos do badge de variavel (cyan para consistencia com o projeto)
const VARIABLE_BADGE_CLASSES = const VARIABLE_BADGE_CLASSES =
"inline-flex items-center gap-1 rounded bg-sky-50 border border-sky-200 px-1.5 py-0.5 text-xs font-mono text-sky-700 whitespace-nowrap" "inline-flex items-center gap-1 rounded-md bg-cyan-50/60 border border-cyan-200/60 px-1.5 py-0.5 text-xs font-mono text-cyan-700 whitespace-nowrap"
// Extensao TipTap para variaveis de e-mail // Extensao TipTap para variaveis de e-mail
const EmailVariableMentionExtension = Mention.extend({ const EmailVariableMentionExtension = Mention.extend({
@ -280,7 +280,7 @@ function EmailVariableList({ items, command, onRegister }: EmailVariableListProp
type="button" type="button"
className={cn( className={cn(
"flex w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left transition", "flex w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left transition",
index === selectedIndex ? "bg-sky-50" : "hover:bg-slate-50" index === selectedIndex ? "bg-cyan-50/60" : "hover:bg-slate-50"
)} )}
onMouseEnter={() => setSelectedIndex(index)} onMouseEnter={() => setSelectedIndex(index)}
onMouseDown={(e) => { onMouseDown={(e) => {
@ -288,7 +288,7 @@ function EmailVariableList({ items, command, onRegister }: EmailVariableListProp
selectItem(index) selectItem(index)
}} }}
> >
<span className="font-mono text-sm text-sky-700">{`{{${item.key}}}`}</span> <span className="font-mono text-sm text-cyan-700">{`{{${item.key}}}`}</span>
<span className="text-xs text-muted-foreground">{item.description}</span> <span className="text-xs text-muted-foreground">{item.description}</span>
</button> </button>
))} ))}
@ -443,8 +443,8 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
{/* Header com tipo e botao de remover */} {/* Header com tipo e botao de remover */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex size-8 items-center justify-center rounded-lg bg-sky-100"> <div className="flex size-8 items-center justify-center rounded-lg bg-cyan-50/60">
<Braces className="size-4 text-sky-600" /> <Braces className="size-4 text-cyan-600" />
</div> </div>
<span className="font-medium text-neutral-900">Enviar e-mail</span> <span className="font-medium text-neutral-900">Enviar e-mail</span>
</div> </div>
@ -500,7 +500,7 @@ export function EmailActionConfig({ action, onChange, onRemove, agents }: EmailA
onClick={() => handleInsertVariable(variable)} onClick={() => handleInsertVariable(variable)}
className={cn( className={cn(
VARIABLE_BADGE_CLASSES, VARIABLE_BADGE_CLASSES,
"cursor-pointer transition hover:bg-sky-100 hover:border-sky-300" "cursor-pointer transition hover:bg-cyan-100/60 hover:border-cyan-300/60"
)} )}
> >
{`{{${variable.key}}}`} {`{{${variable.key}}}`}