50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { t } from '@vegaprotocol/i18n';
|
|
import { TelemetryApproval } from '../../components/welcome-dialog/telemetry-approval';
|
|
import {
|
|
Divider,
|
|
RoundedWrapper,
|
|
Switch,
|
|
ThemeSwitcher,
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
|
|
|
|
export const Settings = () => {
|
|
const { theme, setTheme } = useThemeSwitcher();
|
|
const text = t(theme === 'dark' ? 'Light mode' : 'Dark mode');
|
|
return (
|
|
<div className="py-16 px-8 flex w-full justify-center">
|
|
<div className="lg:min-w-[700px] min-w-[300px]">
|
|
<h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
|
|
{t('Settings')}
|
|
</h1>
|
|
<div className="mt-8 text-base text-neutral-500 dark:text-neutral-400">
|
|
{t('Changes are applied automatically.')}
|
|
</div>
|
|
<div className="mt-10 w-full">
|
|
<RoundedWrapper paddingBottom>
|
|
<div className="flex justify-between py-3">
|
|
<div className="flex shrink">
|
|
<ThemeSwitcher />
|
|
<label htmlFor="theme-switcher" className="self-center text-lg">
|
|
{text}
|
|
</label>
|
|
</div>
|
|
<Switch
|
|
name="settings-theme-switch"
|
|
onCheckedChange={() => setTheme()}
|
|
checked={theme === 'dark'}
|
|
/>
|
|
</div>
|
|
<Divider />
|
|
<TelemetryApproval
|
|
helpText={t(
|
|
'Help identify bugs and improve the service by sharing anonymous usage data.'
|
|
)}
|
|
/>
|
|
</RoundedWrapper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|