From 279c0cf067b895537a473713715e67e306b9017b Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Mon, 23 Feb 2026 20:41:22 -0600
Subject: [PATCH] style: replace language abbreviations with flag images

---
 frontend/src/components/language-switcher.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/language-switcher.tsx b/frontend/src/components/language-switcher.tsx
index af87c4d..693efae 100644
--- a/frontend/src/components/language-switcher.tsx
+++ b/frontend/src/components/language-switcher.tsx
@@ -42,10 +42,15 @@ export function LanguageSwitcher({ className }: LanguageSwitcherProps) {
                             console.log(`[LanguageSwitcher] Selecting ${l.code}`);
                             setLocale(l.code);
                         }}
-                        className="flex items-center gap-2 cursor-pointer focus:outline-none focus:bg-accent focus:text-accent-foreground"
+                        className="flex items-center gap-3 cursor-pointer focus:outline-none focus:bg-accent focus:text-accent-foreground py-2"
                     >
-                        <span className="text-lg">{l.flag}</span>
-                        <span>{l.name}</span>
+                        <img
+                            src={`https://flagcdn.com/w20/${l.code === "en" ? "us" : l.code === "es" ? "es" : "br"}.png`}
+                            alt={`${l.name} flag`}
+                            width="20"
+                            className="rounded-sm shadow-sm"
+                        />
+                        <span className="font-medium">{l.name}</span>
                         {locale === l.code && <span className="ml-auto text-xs opacity-50">✓</span>}
                     </DropdownMenuItem>
                 ))}