Updated timezone hook, fixed chart rendering, added icons.

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}