From bc7ca43c08dddb132b4f6f1e5760ee641da33f8e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 25 Aug 2022 12:28:43 +0200
Subject: [PATCH] :globe_with_meridians: Fix the flags for internalization

---
 package.json                               |   1 +
 public/imgs/flags/de.png                   | Bin 151 -> 0 bytes
 public/imgs/flags/en.png                   | Bin 1669 -> 0 bytes
 src/components/Settings/LanguageSwitch.tsx |  22 +++++----------------
 yarn.lock                                  |   8 ++++++++
 5 files changed, 14 insertions(+), 17 deletions(-)
 delete mode 100644 public/imgs/flags/de.png
 delete mode 100644 public/imgs/flags/en.png

diff --git a/package.json b/package.json
index c57cf4c88..e9750de18 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
 		"axios": "^0.27.2",
 		"consola": "^2.15.3",
 		"cookies-next": "^2.1.1",
+		"country-flag-icons": "^1.5.5",
 		"dayjs": "^1.11.5",
 		"dockerode": "^3.3.2",
 		"embla-carousel-react": "^7.0.0",
diff --git a/public/imgs/flags/de.png b/public/imgs/flags/de.png
deleted file mode 100644
index c62776bf39ed351d09c30dc78cff64640fa4623c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 151
zcmeAS@N?(olHy`uVBq!ia0y~yU~~Yo4=^zUNe;`PP$0z_;1l9{7sy~>_<xR}_f%su
zkmc#=;uw-~@9h~wL7+kw1@EX!Q`8EIe>F3N*lRBg&=BEjb%Ik8!b~9DG0$eANoe$N
YiU;Ywl}mMuvID8`boFyt=akR{0FK!w1poj5

diff --git a/public/imgs/flags/en.png b/public/imgs/flags/en.png
deleted file mode 100644
index e6a6dc8be17ee629fe2d9db0af7e46142072b06b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1669
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
Ni1-lPy`$g!^lw_`B69!$

diff --git a/src/components/Settings/LanguageSwitch.tsx b/src/components/Settings/LanguageSwitch.tsx
index 22b6485c2..03a8d1dae 100644
--- a/src/components/Settings/LanguageSwitch.tsx
+++ b/src/components/Settings/LanguageSwitch.tsx
@@ -1,5 +1,6 @@
-import { Group, Image, Select, Stack, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
@@ -20,7 +21,7 @@ export default function LanguageSwitch() {
     ? locales.map((localeItem) => ({
         value: localeItem,
         label: getLanguageByCode(localeItem).originalName,
-        image: `imgs/flags/${localeItem}.png`,
+        icon: getUnicodeFlagIcon(localeItem),
         language: getLanguageByCode(localeItem),
       }))
     : [];
@@ -56,20 +57,7 @@ export default function LanguageSwitch() {
   return (
     <Stack>
       <Select
-        icon={
-          <Image
-            width={30}
-            height={18}
-            src={`/imgs/flags/${selectedLanguage}.png`}
-            alt="country flag"
-            styles={{
-              root: {
-                borderRadius: 1.5,
-                overflow: 'hidden',
-              },
-            }}
-          />
-        }
+        icon={<Text>{getUnicodeFlagIcon(selectedLanguage as string)}</Text>}
         label={t('label')}
         data={data}
         itemComponent={SelectItem}
@@ -99,7 +87,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <Image src={image} width={30} height={20} radius="xs" />
+        <Text>{getUnicodeFlagIcon(language.originalName as string)}</Text>
 
         <div>
           <Text size="sm">
diff --git a/yarn.lock b/yarn.lock
index be13b28de..1488fe927 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3145,6 +3145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-flag-icons@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "country-flag-icons@npm:1.5.5"
+  checksum: 367f38330a7f0f94836c7859575e1ae75655a04e2104ba060de75827d82bd84413fd7752c9166efa93123eb0d1dd1db1658ef22683511dcfa1c16f2caffe892d
+  languageName: node
+  linkType: hard
+
 "cpu-features@npm:~0.0.4":
   version: 0.0.4
   resolution: "cpu-features@npm:0.0.4"
@@ -4743,6 +4750,7 @@ __metadata:
     axios: ^0.27.2
     consola: ^2.15.3
     cookies-next: ^2.1.1
+    country-flag-icons: ^1.5.5
     dayjs: ^1.11.5
     dockerode: ^3.3.2
     embla-carousel-react: ^7.0.0