lecode-dev
diff --git a/‎public/brazil-flag.svg‎
Lines changed: 3 additions & 0 deletions b/‎public/brazil-flag.svg‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎public/eua-flag.svg‎
Lines changed: 3 additions & 0 deletions b/‎public/eua-flag.svg‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/components/Language/language.tsx‎
Lines changed: 5 additions & 4 deletions b/‎src/components/Language/language.tsx‎
Lines changed: 5 additions & 4 deletions
diff --git a/‎src/components/Language/styles.tsx‎
Lines changed: 31 additions & 6 deletions b/‎src/components/Language/styles.tsx‎
Lines changed: 31 additions & 6 deletions
@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next';
 import Image from 'next/image';
 import { i18nConfig } from '@/i18n';
 import { Paragraph1 } from '@/styles/typographies';
-import languageIcon from '../../../public/language.svg';
+import brazilFlag from '../../../public/brazil-flag.svg';
+import euaFlag from '../../../public/eua-flag.svg';
 import { SelectContainer, OptionsContainer, Option, ContainerLanguage } from './styles';
 
 const languageNames: Record<string, string> = {
-  pt: 'Português',
-  en: 'English',
+  pt: 'PT-BR',
+  en: 'EN-US',
 };
 
 export const Language: React.FC = () => {
@@ -51,7 +52,7 @@ export const Language: React.FC = () => {
         onClick={handleIconClick}
       >
         <Image
-          src={languageIcon}
+          src={currentLocale === 'pt' ? brazilFlag : euaFlag}
           alt='language icon in black'
           width={24}
           height={24}
 
@@ -5,33 +5,58 @@ export const ContainerLanguage = styled.div`
   position: relative;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
   width: fit-content;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: #ccc;
+  }
 `;
 
 export const SelectContainer = styled.button`
   cursor: pointer;
-  border-radius: 4px;
+  padding: 8px 24px;
   border: none;
-  background-color: white;
+  background-color: transparent;
+
+  @media (max-width: 500px) {
+    padding: 8px 16px;
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
 `;
 
 export const OptionsContainer = styled.div`
-  border-radius: 4px;
+  border-radius: 8px;
   margin-top: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   position: absolute;
   top: 100%;
+  width: 100%;
 `;
+
 export const Option = styled.div`
   text-align: center;
   padding: 10px;
   min-width: fit-content;
-  height: 30px;
   background-color: white;
   cursor: pointer;
+  text-align: center;
+
+  &:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+  &:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
   &:hover {
-    background-color: #f0f0f0;
+    background-color: #ccc;
   }
 `;