feat: change some icons

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>

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>

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",

public/locales/fr/common.json

@@ -34,7 +34,7 @@
   "terms": "CGU",
   "language": {
     "fr": "Français",
-    "en": "Anglais"
+    "en": "English"
   },
   "lang": "Langage",
   "settings": "Paramètres",

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>
+      )}
     />
   );
 }

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>
   );

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>