Updated timezone hook, fixed chart rendering, added icons.

src/app/(main)/profile/DateRangeSetting.module.css

@@ -0,0 +1,3 @@
+.field {
+  width: 200px;
+}

src/app/(main)/profile/DateRangeSetting.tsx

@@ -3,6 +3,7 @@ import { Button, Flexbox } from 'react-basics';
 import { useDateRange, useMessages } from 'components/hooks';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
 import { DateRange } from 'lib/types';
+import styles from './DateRangeSetting.module.css';
 
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
@@ -13,8 +14,9 @@ export function DateRangeSetting() {
   const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
 
   return (
-    <Flexbox gap={10}>
+    <Flexbox gap={10} width={300}>
       <DateFilter
+        className={styles.field}
         value={value}
         startDate={dateRange.startDate}
         endDate={dateRange.endDate}

src/app/(main)/profile/TimezoneSetting.module.css

@@ -1,3 +1,7 @@
+.dropdown {
+  width: 200px;
+}
+
 div.menu {
   max-height: 300px;
   width: 300px;

src/app/(main)/profile/TimezoneSetting.tsx

@@ -1,26 +1,29 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { listTimeZones } from 'timezone-support';
+import moment from 'moment-timezone';
 import { useTimezone, useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 
+const timezones = moment.tz.names();
+
 export function TimezoneSetting() {
   const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
-  const [timezone, saveTimezone] = useTimezone();
+  const { timezone, saveTimezone } = useTimezone();
   const options = search
-    ? listTimeZones().filter(n => n.toLowerCase().includes(search.toLowerCase()))
-    : listTimeZones();
+    ? timezones.filter(n => n.toLowerCase().includes(search.toLowerCase()))
+    : timezones;
 
   const handleReset = () => saveTimezone(getTimezone());
 
   return (
     <Flexbox gap={10}>
       <Dropdown
+        className={styles.dropdown}
         items={options}
         value={timezone}
-        onChange={saveTimezone}
+        onChange={(value: any) => saveTimezone(value)}
         menuProps={{ className: styles.menu }}
         allowSearch={true}
         onSearch={setSearch}