Updated timezone hook, fixed chart rendering, added icons.

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}