Updated settings components and date filter.

components/settings/LanguageSetting.js

@@ -1,30 +1,28 @@
-import { FormattedMessage } from 'react-intl';
-import DropDown from 'components/common/DropDown';
-import { Button } from 'react-basics';
+import { useIntl, defineMessages } from 'react-intl';
+import { Button, Dropdown, Item, Flexbox } from 'react-basics';
 import useLocale from 'hooks/useLocale';
 import { DEFAULT_LOCALE } from 'lib/constants';
-import styles from './TimezoneSetting.module.css';
 import { languages } from 'lib/lang';
 
+const messages = defineMessages({
+  reset: { id: 'label.reset', defaultMessage: 'Reset' },
+});
+
 export default function LanguageSetting() {
+  const { formatMessage } = useIntl();
   const { locale, saveLocale } = useLocale();
-  const options = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
+  const options = Object.keys(languages);
 
   function handleReset() {
     saveLocale(DEFAULT_LOCALE);
   }
 
   return (
-    <>
-      <DropDown
-        menuClassName={styles.menu}
-        value={locale}
-        options={options}
-        onChange={saveLocale}
-      />
-      <Button className={styles.button} size="sm" onClick={handleReset}>
-        <FormattedMessage id="label.reset" defaultMessage="Reset" />
-      </Button>
-    </>
+    <Flexbox gap={10} style={{ width: 400 }}>
+      <Dropdown items={options} value={locale} onChange={saveLocale}>
+        {item => <Item key={item}>{languages[item].label}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
+    </Flexbox>
   );
 }

components/settings/ProfileDetails.js

@@ -1,53 +1,46 @@
+import { Form, FormRow } from 'react-basics';
+import { useIntl, defineMessages } from 'react-intl';
 import TimezoneSetting from 'components/settings/TimezoneSetting';
+import DateRangeSetting from 'components/settings/DateRangeSetting';
+import LanguageSetting from 'components/settings/LanguageSetting';
+import ThemeSetting from 'components/settings/ThemeSetting';
 import useUser from 'hooks/useUser';
 
-import { FormattedMessage } from 'react-intl';
-import DateRangeSetting from './DateRangeSetting';
-import LanguageSetting from './LanguageSetting';
-import styles from './ProfileDetails.module.css';
-import ThemeSetting from './ThemeSetting';
+const messages = defineMessages({
+  username: { id: 'label.username', defaultMessage: 'Username' },
+  role: { id: 'label.role', defaultMessage: 'Role' },
+  timezone: { id: 'label.timezone', defaultMessage: 'Timezone' },
+  dateRange: { id: 'label.default-date-range', defaultMessage: 'Default date range' },
+  language: { id: 'label.language', defaultMessage: 'Language' },
+  theme: { id: 'label.theme', defaultMessage: 'Theme' },
+});
 
 export default function ProfileDetails() {
   const user = useUser();
+  const { formatMessage } = useIntl();
 
   if (!user) {
     return null;
   }
 
-  const { username } = user;
+  const { username, role } = user;
 
   return (
-    <>
-      <dl className={styles.list}>
-        <dt>
-          <FormattedMessage id="label.username" defaultMessage="Username" />
-        </dt>
-        <dd>{username}</dd>
-        <dt>
-          <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
-        </dt>
-        <dd>
-          <TimezoneSetting />
-        </dd>
-        <dt>
-          <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
-        </dt>
-        <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>
-    </>
+    <Form>
+      <FormRow label={formatMessage(messages.username)}>{username}</FormRow>
+      <FormRow label={formatMessage(messages.role)}>{role}</FormRow>
+      <FormRow label={formatMessage(messages.language)} inline>
+        <LanguageSetting />
+      </FormRow>
+      <FormRow label={formatMessage(messages.timezone)} inline>
+        <TimezoneSetting />
+      </FormRow>
+      <FormRow label={formatMessage(messages.dateRange)} inline>
+        <DateRangeSetting />
+      </FormRow>
+      <FormRow label={formatMessage(messages.theme)}>
+        <ThemeSetting />
+      </FormRow>
+    </Form>
   );
 }

components/settings/TimezoneSetting.js

@@ -1,14 +1,17 @@
-import { FormattedMessage } from 'react-intl';
+import { Dropdown, Item, Button } from 'react-basics';
+import { useIntl, defineMessages } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
-import DropDown from 'components/common/DropDown';
-import { Button } from 'react-basics';
 import useTimezone from 'hooks/useTimezone';
 import { getTimezone } from 'lib/date';
-import styles from './TimezoneSetting.module.css';
+
+const messages = defineMessages({
+  reset: { id: 'label.reset', defaultMessage: 'Reset' },
+});
 
 export default function TimezoneSetting() {
+  const { formatMessage } = useIntl();
   const [timezone, saveTimezone] = useTimezone();
-  const options = listTimeZones().map(n => ({ label: n, value: n }));
+  const options = listTimeZones();
 
   function handleReset() {
     saveTimezone(getTimezone());
@@ -16,15 +19,10 @@ export default function TimezoneSetting() {
 
   return (
     <>
-      <DropDown
-        menuClassName={styles.menu}
-        value={timezone}
-        options={options}
-        onChange={saveTimezone}
-      />
-      <Button className={styles.button} size="sm" onClick={handleReset}>
-        <FormattedMessage id="label.reset" defaultMessage="Reset" />
-      </Button>
+      <Dropdown items={options} value={timezone} onChange={saveTimezone}>
+        {item => <Item key={item}>{item}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
     </>
   );
 }

components/settings/TimezoneSetting.module.css

@@ -1,8 +0,0 @@
-.menu {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.button {
-  margin-left: 10px;
-}

components/settings/UserButton.js

@@ -1,4 +1,3 @@
-import User from 'assets/user.svg';
 import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 import { AUTH_TOKEN } from 'lib/constants';
@@ -7,8 +6,9 @@ import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
 import { Button, Icon, Item, Menu, Popup, Text } from 'react-basics';
 import { FormattedMessage } from 'react-intl';
+import useDocumentClick from 'hooks/useDocumentClick';
+import Profile from 'assets/profile.svg';
 import styles from './UserButton.module.css';
-import useDocumentClick from '../../hooks/useDocumentClick';
 
 export default function UserButton() {
   const [show, setShow] = useState(false);
@@ -61,7 +61,7 @@ export default function UserButton() {
     <div className={styles.button} ref={ref}>
       <Button variant="light" onClick={handleClick}>
         <Icon className={styles.icon} size="large">
-          <User />
+          <Profile />
         </Icon>
       </Button>
       {show && (