From 8b86fbfd7fcd133b83c3c6feba27e93e60cd9971 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sat, 16 Dec 2023 22:52:34 +0100
Subject: [PATCH] feat: change some icons

---
 public/icons/en.svg                       |  1 +
 public/icons/fr.svg                       |  1 +
 public/locales/en/common.json             |  2 +-
 public/locales/fr/common.json             |  2 +-
 src/components/LangSelector.tsx           | 32 ++++++++++++++++++++---
 src/components/Selector.tsx               |  9 +++++--
 src/components/Settings/SettingsModal.tsx | 22 +++++++++-------
 7 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 public/icons/en.svg
 create mode 100644 public/icons/fr.svg

diff --git a/public/icons/en.svg b/public/icons/en.svg
new file mode 100644
index 0000000..1b8fb42
--- /dev/null
+++ b/public/icons/en.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(#a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>
\ No newline at end of file
diff --git a/public/icons/fr.svg b/public/icons/fr.svg
new file mode 100644
index 0000000..c76dd71
--- /dev/null
+++ b/public/icons/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><path fill="#EC1920" d="M0 0h3v2H0z"/><path fill="#fff" d="M0 0h2v2H0z"/><path fill="#051440" d="M0 0h1v2H0z"/></svg>
\ No newline at end of file
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 3a8040a..c08eafc 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -33,7 +33,7 @@
   "privacy": "Privacy",
   "terms": "Terms of use",
   "language": {
-    "fr": "French",
+    "fr": "Français",
     "en": "English"
   },
   "lang": "Language",
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index d4e78e6..bf524ad 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -34,7 +34,7 @@
   "terms": "CGU",
   "language": {
     "fr": "Français",
-    "en": "Anglais"
+    "en": "English"
   },
   "lang": "Langage",
   "settings": "Paramètres",
diff --git a/src/components/LangSelector.tsx b/src/components/LangSelector.tsx
index d60bfd2..969194d 100644
--- a/src/components/LangSelector.tsx
+++ b/src/components/LangSelector.tsx
@@ -1,8 +1,15 @@
 import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import Selector from './Selector';
 
-export default function LangSelector() {
+type Country = 'fr' | 'en';
+
+export default function LangSelector({
+  onSelected,
+}: {
+  onSelected?: (country: Country) => void;
+}) {
   const router = useRouter();
   const { t, i18n } = useTranslation();
 
@@ -17,11 +24,30 @@ export default function LangSelector() {
     <Selector
       name='lng-select'
       value={i18n.language}
-      onChangeCallback={(value: string) => onToggleLanguageClick(value)}
-      options={languages.map((lang: 'fr' | 'en') => ({
+      onChangeCallback={(value: Country) => {
+        onToggleLanguageClick(value);
+        if (onSelected) {
+          setTimeout(() => onSelected(value), 150);
+        }
+      }}
+      options={languages.map((lang: Country) => ({
         label: t(`common:language.${lang}`),
         value: lang,
       }))}
+      formatOptionLabel={(country) => (
+        <div
+          className='country-option'
+          style={{ display: 'flex', gap: '.5em', alignItems: 'center' }}
+        >
+          <Image
+            src={`/icons/${country.value}.svg`}
+            alt='country-image'
+            height={24}
+            width={24}
+          />
+          <span>{country.label}</span>
+        </div>
+      )}
     />
   );
 }
diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx
index be271bd..19ca786 100644
--- a/src/components/Selector.tsx
+++ b/src/components/Selector.tsx
@@ -1,5 +1,5 @@
-import { MutableRefObject, useEffect, useState } from 'react';
-import Select, { OptionsOrGroups, GroupBase } from 'react-select';
+import { MutableRefObject, ReactNode, useEffect, useState } from 'react';
+import Select, { GroupBase, OptionsOrGroups } from 'react-select';
 
 type Option = { label: string | number; value: string | number };
 
@@ -13,6 +13,7 @@ interface SelectorProps {
   options: OptionsOrGroups<Option, GroupBase<Option>>;
   value?: number | string;
   onChangeCallback?: (value: number | string) => void;
+  formatOptionLabel?: (data: Option) => ReactNode;
 
   disabled?: boolean;
 }
@@ -26,6 +27,7 @@ export default function Selector({
   value,
   options = [],
   onChangeCallback,
+  formatOptionLabel,
   disabled = false,
 }: SelectorProps): JSX.Element {
   const [selectorValue, setSelectorValue] = useState<Option>();
@@ -71,6 +73,9 @@ export default function Selector({
         ref={innerRef}
         isDisabled={disabled}
         menuPlacement='auto'
+        formatOptionLabel={(value) =>
+          formatOptionLabel && formatOptionLabel(value)
+        }
       />
     </div>
   );
diff --git a/src/components/Settings/SettingsModal.tsx b/src/components/Settings/SettingsModal.tsx
index b2c58f2..44ac702 100644
--- a/src/components/Settings/SettingsModal.tsx
+++ b/src/components/Settings/SettingsModal.tsx
@@ -9,12 +9,15 @@ import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { FaUser } from 'react-icons/fa';
-import { IoLogOutOutline, IoSettingsOutline } from 'react-icons/io5';
-import { TfiWorld } from 'react-icons/tfi';
+import {
+  IoLanguageOutline,
+  IoLogOutOutline,
+  IoSettingsOutline,
+} from 'react-icons/io5';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import LangSelector from '../LangSelector';
-import Modal from '../Modal/Modal';
-import Profile from '../Profile/Profile';
+import LangSelector from 'components/LangSelector';
+import Modal from 'components/Modal/Modal';
+import Profile from 'components/Profile/Profile';
 import styles from './settings-modal.module.scss';
 
 export default function SettingsModal() {
@@ -32,6 +35,7 @@ export default function SettingsModal() {
     enableOnFormTags: ['INPUT'],
   });
 
+  const iconsSize = 22;
   return (
     <>
       <button
@@ -54,21 +58,21 @@ export default function SettingsModal() {
                   selectedClassName={styles['tab-selected']}
                   disabledClassName={styles['tab-disabled']}
                 >
-                  <FaUser size={18} /> {t('common:profile')}
+                  <FaUser size={iconsSize} /> {t('common:profile')}
                 </Tab>
                 <Tab
                   className={styles['tab']}
                   selectedClassName={styles['tab-selected']}
                   disabledClassName={styles['tab-disabled']}
                 >
-                  <TfiWorld size={18} /> {t('common:lang')}
+                  <IoLanguageOutline size={iconsSize} /> {t('common:lang')}
                 </Tab>
                 <button
                   className={clsx('reset', styles['tab'])}
                   style={{ color: 'red' }}
                   onClick={() => signOut({ callbackUrl: PATHS.LOGIN })}
                 >
-                  <IoLogOutOutline size={18} /> {t('common:logout')}
+                  <IoLogOutOutline size={iconsSize} /> {t('common:logout')}
                 </button>
               </TabList>
 
@@ -83,7 +87,7 @@ export default function SettingsModal() {
                 selectedClassName={styles['tab-panel-selected']}
               >
                 <p>{t('common:select-your-lang')}</p>
-                <LangSelector />
+                <LangSelector onSelected={modal.close} />
               </TabPanel>
             </Tabs>
           </Modal>