Updated settings components and date filter.

components/settings/DateRangeSetting.js

@@ -1,35 +1,21 @@
 import { FormattedMessage } from 'react-intl';
-import DateFilter, { filterOptions } from 'components/common/DateFilter';
-import { Button } from 'react-basics';
+import DateFilter from 'components/common/DateFilter';
+import { Button, Flexbox } from 'react-basics';
 import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import styles from './DateRangeSetting.module.css';
 
 export default function DateRangeSetting() {
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
-  const options = filterOptions.filter(e => e.value !== 'all');
 
-  function handleChange(value) {
-    setDateRange(value);
-  }
-
-  function handleReset() {
-    setDateRange(DEFAULT_DATE_RANGE);
-  }
+  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
 
   return (
-    <>
-      <DateFilter
-        options={options}
-        value={value}
-        startDate={startDate}
-        endDate={endDate}
-        onChange={handleChange}
-      />
-      <Button className={styles.button} size="sm" onClick={handleReset}>
+    <Flexbox width={400} gap={10}>
+      <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
+      <Button onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />
       </Button>
-    </>
+    </Flexbox>
   );
 }

components/settings/DateRangeSetting.module.css

@@ -1,3 +0,0 @@
-.button {
-  margin-left: 10px;
-}

components/settings/LanguageSetting.js

@@ -13,13 +13,13 @@ export default function LanguageSetting() {
   const { locale, saveLocale } = useLocale();
   const options = Object.keys(languages);
 
-  function handleReset() {
-    saveLocale(DEFAULT_LOCALE);
-  }
+  const handleReset = () => saveLocale(DEFAULT_LOCALE);
+
+  const renderValue = value => languages[value].label;
 
   return (
-    <Flexbox gap={10} style={{ width: 400 }}>
-      <Dropdown items={options} value={locale} onChange={saveLocale}>
+    <Flexbox width={400} gap={10}>
+      <Dropdown items={options} value={locale} renderValue={renderValue} onChange={saveLocale}>
         {item => <Item key={item}>{languages[item].label}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>

components/settings/ProfileDetails.js

@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 export default function ProfileDetails() {
-  const user = useUser();
+  const { user } = useUser();
   const { formatMessage } = useIntl();
 
   if (!user) {

components/settings/ThemeSetting.module.css

@@ -1,11 +1,8 @@
 .buttons {
   display: flex;
-}
-
-.buttons button {
-  margin-right: 20px;
+  gap: 10px;
 }
 
 .active {
-  border: 1px solid var(--primary400);
+  border: 2px solid var(--primary400);
 }

components/settings/TimezoneSetting.js

@@ -1,4 +1,4 @@
-import { Dropdown, Item, Button } from 'react-basics';
+import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { useIntl, defineMessages } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
 import useTimezone from 'hooks/useTimezone';
@@ -13,16 +13,14 @@ export default function TimezoneSetting() {
   const [timezone, saveTimezone] = useTimezone();
   const options = listTimeZones();
 
-  function handleReset() {
-    saveTimezone(getTimezone());
-  }
+  const handleReset = () => saveTimezone(getTimezone());
 
   return (
-    <>
+    <Flexbox width={400} gap={10}>
       <Dropdown items={options} value={timezone} onChange={saveTimezone}>
         {item => <Item key={item}>{item}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
-    </>
+    </Flexbox>
   );
 }

components/settings/UserButton.module.css

@@ -11,7 +11,6 @@
 }
 
 .icon svg {
-  font-size: 16px;
   height: 16px;
   width: 16px;
 }