feat(i18n): replace linguijs with formatjs

3 files changed, 28 insertions, 8 deletions

diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
index 01f8b67..c7b5775 100644
--- a/src/components/Settings/ReduceMotion/ReduceMotion.tsx
+++ b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
@@ -1,9 +1,10 @@
 import { Toggle } from '@components/Form';
-import { t } from '@lingui/macro';
 import { LocalStorage } from '@services/local-storage';
 import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 
 const ReduceMotion = () => {
+  const intl = useIntl();
   const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
 
   useEffect(() => {
@@ -23,9 +24,18 @@ const ReduceMotion = () => {
   return (
     <Toggle
       id="reduced-motion"
-      label={t`Animations:`}
-      leftChoice={t`On`}
-      rightChoice={t`Off`}
+      label={intl.formatMessage({
+        defaultMessage: 'Animations:',
+        description: 'ReduceMotion: toggle label',
+      })}
+      leftChoice={intl.formatMessage({
+        defaultMessage: 'On',
+        description: 'ReduceMotion: toggle on label',
+      })}
+      rightChoice={intl.formatMessage({
+        defaultMessage: 'Off',
+        description: 'ReduceMotion: toggle off label',
+      })}
       value={isDeactivated}
       changeHandler={updateState}
     />
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index bd2f33d..80eb0c3 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -1,14 +1,20 @@
 import { CogIcon } from '@components/Icons';
 import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
-import { t } from '@lingui/macro';
+import { useIntl } from 'react-intl';
 import ReduceMotion from './ReduceMotion/ReduceMotion';
 import styles from './Settings.module.scss';
 
 const Settings = () => {
+  const intl = useIntl();
+
   return (
     <>
       <div className={styles.title}>
-        <CogIcon /> {t`Settings`}
+        <CogIcon />{' '}
+        {intl.formatMessage({
+          defaultMessage: 'Settings',
+          description: 'Settings: modal title',
+        })}
       </div>
       <ThemeToggle />
       <ReduceMotion />
diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
index e14f39a..5b7a34d 100644
--- a/src/components/Settings/ThemeToggle/ThemeToggle.tsx
+++ b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
@@ -1,11 +1,12 @@
 import { Toggle } from '@components/Form';
 import { MoonIcon, SunIcon } from '@components/Icons';
 import Spinner from '@components/Spinner/Spinner';
-import { t } from '@lingui/macro';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 
 const ThemeToggle = () => {
+  const intl = useIntl();
   const [isMounted, setIsMounted] = useState<boolean>(false);
   const { resolvedTheme, setTheme } = useTheme();
 
@@ -24,7 +25,10 @@ const ThemeToggle = () => {
   return (
     <Toggle
       id="dark-theme"
-      label={t`Theme:`}
+      label={intl.formatMessage({
+        defaultMessage: 'Theme:',
+        description: 'ThemeToggle: toggle label',
+      })}
       leftChoice={<SunIcon />}
       rightChoice={<MoonIcon />}
       value={isDarkTheme}