From bf86d70a93d1f6964cf96485d9194c17a3cc1e32 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 4 May 2022 09:40:04 -0400
Subject: [PATCH] Use i18n

---
 .../features/ui/components/profile-dropdown.tsx     |  3 ++-
 app/soapbox/features/ui/components/theme-toggle.tsx | 13 ++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 7253b7ba6..d21e491a2 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -18,6 +18,7 @@ import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
+  theme: { id: 'profile_dropdown.theme', defaultMessage: 'Theme' },
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
 });
 
@@ -81,7 +82,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     if (features.darkMode || settings.get('isDeveloper')) {
       menu.push({ text: null });
 
-      menu.push({ text: 'Theme', toggle: <ThemeToggle /> });
+      menu.push({ text: intl.formatMessage(messages.theme), toggle: <ThemeToggle /> });
     }
 
     menu.push({ text: null });
diff --git a/app/soapbox/features/ui/components/theme-toggle.tsx b/app/soapbox/features/ui/components/theme-toggle.tsx
index 60fc2bbf3..3d69a4afa 100644
--- a/app/soapbox/features/ui/components/theme-toggle.tsx
+++ b/app/soapbox/features/ui/components/theme-toggle.tsx
@@ -7,8 +7,9 @@ import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
 const messages = defineMessages({
-  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
-  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
+  light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
+  dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
+  system: { id: 'theme_toggle.system', defaultMessage: 'System' },
 });
 
 interface IThemeToggle {
@@ -20,8 +21,6 @@ const ThemeToggle = ({ showLabel }: IThemeToggle) => {
   const dispatch = useDispatch();
   const themeMode = useSettings().get('themeMode');
 
-  const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
-
   const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => {
     dispatch(changeSetting(['themeMode'], event.target.value));
   };
@@ -51,9 +50,9 @@ const ThemeToggle = ({ showLabel }: IThemeToggle) => {
           defaultValue={themeMode}
           className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
         >
-          <option value='system'>System</option>
-          <option value='light'>Light</option>
-          <option value='dark'>Dark</option>
+          <option value='system'>{intl.formatMessage(messages.system)}</option>
+          <option value='light'>{intl.formatMessage(messages.light)}</option>
+          <option value='dark'>{intl.formatMessage(messages.dark)}</option>
         </select>
 
         <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>