bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use i18n

Browse source
This commit is contained in:
Justin 2022-05-04 09:40:04 -04:00
parent 528906fe31
commit bf86d70a93
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/soapbox/features/ui/components/profile-dropdown.tsx
View file

@ -18,6 +18,7 @@ import type { Account as AccountEntity } from 'soapbox/types/entities';
const messages = defineMessages({ const messages = defineMessages({
add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' }, 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}' }, 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')) { if (features.darkMode || settings.get('isDeveloper')) {
menu.push({ text: null }); menu.push({ text: null });
menu.push({ text: 'Theme', toggle: <ThemeToggle /> }); menu.push({ text: intl.formatMessage(messages.theme), toggle: <ThemeToggle /> });
} }
menu.push({ text: null }); menu.push({ text: null });

13
app/soapbox/features/ui/components/theme-toggle.tsx
View file

@ -7,8 +7,9 @@ import { Icon } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks'; import { useSettings } from 'soapbox/hooks';
const messages = defineMessages({ const messages = defineMessages({
switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' }, light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' }, dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
system: { id: 'theme_toggle.system', defaultMessage: 'System' },
}); });
interface IThemeToggle { interface IThemeToggle {
@ -20,8 +21,6 @@ const ThemeToggle = ({ showLabel }: IThemeToggle) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const themeMode = useSettings().get('themeMode'); const themeMode = useSettings().get('themeMode');
const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => { const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => {
dispatch(changeSetting(['themeMode'], event.target.value)); dispatch(changeSetting(['themeMode'], event.target.value));
}; };
@ -51,9 +50,9 @@ const ThemeToggle = ({ showLabel }: IThemeToggle) => {
defaultValue={themeMode} 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' 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='system'>{intl.formatMessage(messages.system)}</option>
<option value='light'>Light</option> <option value='light'>{intl.formatMessage(messages.light)}</option>
<option value='dark'>Dark</option> <option value='dark'>{intl.formatMessage(messages.dark)}</option>
</select> </select>
<div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'> <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>