Suisin/chore: fix size for translation flag (#15726)

* chore: fix size for translation flag * chore: update translation-flag constant based on comment * chore: fix mobile flag issue
binary-com · Jun 21, 2024 · 6dec491 · 6dec491
1 parent 6822782
commit 6dec491
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 27 deletions.
diff --git a/packages/account/src/Components/language-settings/language-radio-button.tsx b/packages/account/src/Components/language-settings/language-radio-button.tsx
@@ -31,7 +31,7 @@ const LanguageRadioButton = ({ is_current_language, id, language_text, name, onC
             <label htmlFor={id} className='settings-language__language--center-label'>
                 <div>
                     {TranslationFlag[id] ? (
-                        TranslationFlag[id]()
+                        TranslationFlag[id](36, 24)
                     ) : (
                         <Icon icon={`IcFlag${id}`} className='settings-language__language-flag' />
                     )}

diff --git a/packages/core/src/App/Components/Layout/Footer/toggle-language-settings.tsx b/packages/core/src/App/Components/Layout/Footer/toggle-language-settings.tsx
@@ -26,7 +26,7 @@ const ToggleLanguageSettings = observer(() => {
             >
                 <Popover alignment='top' message={localize('Language')} zIndex='9999'>
                     {TranslationFlag[current_language] ? (
-                        TranslationFlag[current_language]('xs')
+                        TranslationFlag[current_language](18, 12)
                     ) : (
                         //TODOs: remove this when Korean flag is included in quill-icons
                         <Icon icon={`IcFlag${current_language}`} data_testid='dt_icon' size={18} />

diff --git a/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx b/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx
@@ -25,7 +25,7 @@ const MenuTitle = observer(() => {
                     {!is_mobile_language_menu_open && (
                         <React.Fragment>
                             {TranslationFlag[current_language] ? (
-                                TranslationFlag[current_language]('xs')
+                                TranslationFlag[current_language](22, 16)
                             ) : (
                                 //TODOs: remove this when Korean flag is added to quill-icons
                                 <Icon icon={`IcFlag${current_language}`} data_testid='dt_icon' size={18} />

diff --git a/packages/core/src/App/Components/Routes/language-link.tsx b/packages/core/src/App/Components/Routes/language-link.tsx
@@ -19,7 +19,7 @@ const LanguageLink = observer(({ is_clickable = false, lang, toggleModal }: TLan
     const link: React.ReactNode = (
         <React.Fragment>
             {TranslationFlag[lang] ? (
-                TranslationFlag[lang]()
+                TranslationFlag[lang](36, 24)
             ) : (
                 <Icon icon={`IcFlag${lang}`} className='settings-language__language-flag' />
             )}

diff --git a/packages/shared/src/utils/constants/translation-flag.tsx b/packages/shared/src/utils/constants/translation-flag.tsx
@@ -21,29 +21,36 @@ import {
     FlagVietnamIcon,
 } from '@deriv/quill-icons';
 
-type TTranslationFlag = {
-    [key: string]: (size?: 'sm' | 'md' | 'lg' | 'xs') => React.ReactNode;
+const flagComponents = {
+    AR: FlagArabLeagueIcon,
+    EN: FlagUnitedKingdomIcon,
+    ES: FlagSpainIcon,
+    BN: FlagBangladeshIcon,
+    DE: FlagGermanyIcon,
+    FR: FlagFranceIcon,
+    ID: FlagIndonesiaIcon,
+    IT: FlagItalyIcon,
+    // KO: ,
+    MN: FlagMongoliaIcon,
+    PL: FlagPolandIcon,
+    PT: FlagPortugalIcon,
+    RU: FlagRussiaIcon,
+    SI: FlagSriLankaIcon,
+    SW: FlagTanzaniaIcon,
+    TR: FlagTurkeyIcon,
+    VI: FlagVietnamIcon,
+    ZH_CN: FlagChinaSimplifiedIcon,
+    ZH_TW: FlagChinaTraditionalIcon,
+    TH: FlagThailandIcon,
 };
 
-export const TranslationFlag: TTranslationFlag = {
-    AR: size => <FlagArabLeagueIcon iconSize={size} />,
-    EN: size => <FlagUnitedKingdomIcon iconSize={size} />,
-    ES: size => <FlagSpainIcon iconSize={size} />,
-    BN: size => <FlagBangladeshIcon iconSize={size} />,
-    DE: size => <FlagGermanyIcon iconSize={size} />,
-    FR: size => <FlagFranceIcon iconSize={size} />,
-    ID: size => <FlagIndonesiaIcon iconSize={size} />,
-    IT: size => <FlagItalyIcon iconSize={size} />,
-    // KO: ,
-    MN: size => <FlagMongoliaIcon iconSize={size} />,
-    PL: size => <FlagPolandIcon iconSize={size} />,
-    PT: size => <FlagPortugalIcon iconSize={size} />,
-    RU: size => <FlagRussiaIcon iconSize={size} />,
-    SI: size => <FlagSriLankaIcon iconSize={size} />,
-    SW: size => <FlagTanzaniaIcon iconSize={size} />,
-    TR: size => <FlagTurkeyIcon iconSize={size} />,
-    VI: size => <FlagVietnamIcon iconSize={size} />,
-    ZH_CN: size => <FlagChinaSimplifiedIcon iconSize={size} />,
-    ZH_TW: size => <FlagChinaTraditionalIcon iconSize={size} />,
-    TH: size => <FlagThailandIcon iconSize={size} />,
+type TTranslationFlag = {
+    [key: string]: (width?: number, height?: number) => React.ReactNode;
 };
+
+export const TranslationFlag: TTranslationFlag = Object.fromEntries(
+    Object.entries(flagComponents).map(([key, FlagComponent]) => [
+        key,
+        (width, height) => <FlagComponent width={width} height={height} />,
+    ])
+);