Added language and theme settings.

components/layout/Footer.module.css

@@ -4,7 +4,7 @@
   align-items: center;
   font-size: var(--font-size-small);
   text-align: center;
-  margin: 20px 0;
+  margin: 30px 0;
 }
 
 .version {

components/settings/LanguageSetting.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import DropDown from 'components/common/DropDown';
+import Button from 'components/common/Button';
+import useLocale from 'hooks/useLocale';
+import { DEFAULT_LOCALE } from 'lib/constants';
+import styles from './TimezoneSetting.module.css';
+import { languages } from '../../lib/lang';
+
+export default function LanguageSetting() {
+  const { locale, saveLocale } = useLocale();
+  const options = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
+
+  function handleReset() {
+    saveLocale(DEFAULT_LOCALE);
+  }
+
+  return (
+    <>
+      <DropDown
+        menuClassName={styles.menu}
+        value={locale}
+        options={options}
+        onChange={saveLocale}
+      />
+      <Button className={styles.button} size="small" onClick={handleReset}>
+        <FormattedMessage id="label.reset" defaultMessage="Reset" />
+      </Button>
+    </>
+  );
+}

components/settings/ProfileSettings.js

@@ -11,11 +11,13 @@ import styles from './ProfileSettings.module.css';
 import DateRangeSetting from './DateRangeSetting';
 import useEscapeKey from 'hooks/useEscapeKey';
 import useUser from 'hooks/useUser';
+import LanguageSetting from './LanguageSetting';
+import ThemeSetting from './ThemeSetting';
 
 export default function ProfileSettings() {
   const { user } = useUser();
   const [changePassword, setChangePassword] = useState(false);
-  const [message, setMessage] = useState();
+  const [message, setMessage] = useState(null);
 
   function handleSave() {
     setChangePassword(false);
@@ -59,6 +61,18 @@ export default function ProfileSettings() {
         <dd>
           <DateRangeSetting />
         </dd>
+        <dt>
+          <FormattedMessage id="label.language" defaultMessage="Language" />
+        </dt>
+        <dd>
+          <LanguageSetting />
+        </dd>
+        <dt>
+          <FormattedMessage id="label.theme" defaultMessage="Theme" />
+        </dt>
+        <dd>
+          <ThemeSetting />
+        </dd>
       </dl>
       {changePassword && (
         <Modal

components/settings/ThemeSetting.js

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import Button from 'components/common/Button';
+import useTheme from 'hooks/useTheme';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeSetting.module.css';
+
+export default function ThemeSetting() {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <div className={styles.buttons}>
+      <Button
+        className={classNames({ [styles.active]: theme === 'light' })}
+        icon={<Sun />}
+        onClick={() => setTheme('light')}
+      />
+      <Button
+        className={classNames({ [styles.active]: theme === 'dark' })}
+        icon={<Moon />}
+        onClick={() => setTheme('dark')}
+      />
+    </div>
+  );
+}

components/settings/ThemeSetting.module.css

@@ -0,0 +1,11 @@
+.buttons {
+  display: flex;
+}
+
+.buttons button {
+  margin-right: 20px;
+}
+
+.active {
+  border: 1px solid var(--gray500);
+}