chore: fix type for country flags and hover titles (#4709)

* chore: fix type for country flags

* add text for Canada, fix Australia flag

* add flag texts

* fix text keys

* update changeset

* Add lock file

* Add Austria

.changeset/dirty-islands-push.md

@@ -0,0 +1,6 @@
+---
+'@verdaccio/ui-components': patch
+'@verdaccio/ui-theme': patch
+---
+
+chore: fix type for country flags

packages/plugins/ui-theme/package.json

@@ -32,7 +32,7 @@
     "@verdaccio/ui-components": "workspace:3.0.0-next-7.8",
     "babel-loader": "8.3.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
-    "country-flag-icons": "1.5.9",
+    "country-flag-icons": "1.5.13",
     "css-loader": "6.9.1",
     "dayjs": "1.11.10",
     "dompurify": "3.0.8",

packages/plugins/ui-theme/src/i18n/crowdin/ui.json

@@ -181,7 +181,9 @@
   },
   "flag": {
     "austria": "Austria",
+    "australia": "Australia",
     "brazil": "Brazil",
+    "canada": "Canada",
     "spain": "Spain",
     "nicaragua": "Nicaragua",
     "india": "India",

packages/plugins/ui-theme/src/i18n/enabledLanguages.ts

@@ -1,12 +1,11 @@
 import Flags from 'country-flag-icons/react/3x2';
-import React from 'react';
 
 export const DEFAULT_LANGUAGE = 'en-US';
 
 export type LanguageConfiguration = {
   lng: string;
   menuKey: string;
-  icon: React.ReactElement;
+  icon: Flags.FlagComponent;
 };
 
 export const listLanguages: LanguageConfiguration[] = [

packages/ui-components/src/sections/Footer/Footer.tsx

@@ -27,31 +27,34 @@ const Footer = () => {
             <StyledEarth />
             <Flags>
               <Icon>
-                <FlagsIcon.ES />
+                <FlagsIcon.ES title={t('flag.spain')} />
               </Icon>
               <Icon>
-                <FlagsIcon.NI />
+                <FlagsIcon.NI title={t('flag.nicaragua')} />
               </Icon>
               <Icon>
-                <FlagsIcon.IN />
+                <FlagsIcon.IN title={t('flag.india')} />
               </Icon>
               <Icon>
-                <FlagsIcon.BR />
+                <FlagsIcon.BR title={t('flag.brazil')} />
               </Icon>
               <Icon>
-                <FlagsIcon.CN />
+                <FlagsIcon.CN title={t('flag.china')} />
               </Icon>
               <Icon>
-                <FlagsIcon.AU />
+                <FlagsIcon.AU title={t('flag.australia')} />
               </Icon>
               <Icon>
-                <FlagsIcon.DE />
+                <FlagsIcon.DE title={t('flag.germany')} />
               </Icon>
               <Icon>
-                <FlagsIcon.TW />
+                <FlagsIcon.TW title={t('flag.taiwan')} />
               </Icon>
               <Icon>
-                <FlagsIcon.CA />
+                <FlagsIcon.AT title={t('flag.austria')} />
+              </Icon>
+              <Icon>
+                <FlagsIcon.CA title={t('flag.canada')} />
               </Icon>
             </Flags>
           </ToolTip>