Added settings button.

components/layout/Header.js

@@ -13,6 +13,7 @@ import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
+import SettingsButton from '../settings/SettingsButton';
 
 export default function Header() {
   const { user } = useUser();
@@ -46,6 +47,7 @@ export default function Header() {
         <div className={styles.buttons}>
           <ThemeButton />
           <LanguageButton menuAlign="right" />
+          <SettingsButton />
           {user && !adminDisabled && <UserButton />}
         </div>
       </header>

components/settings/SettingsButton.js

@@ -0,0 +1,45 @@
+import React, { useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import TimezoneSetting from './TimezoneSetting';
+import DateRangeSetting from './DateRangeSetting';
+import Button from 'components/common/Button';
+import styles from './SettingsButton.module.css';
+import Gear from 'assets/gear.svg';
+import useDocumentClick from '../../hooks/useDocumentClick';
+
+export default function SettingsButton() {
+  const [show, setShow] = useState(false);
+  const ref = useRef();
+
+  function handleClick() {
+    setShow(state => !state);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current?.contains(e.target)) {
+      setShow(false);
+    }
+  });
+
+  return (
+    <div className={styles.button} ref={ref}>
+      <Button icon={<Gear />} variant="light" onClick={handleClick} />
+      {show && (
+        <div className={styles.panel}>
+          <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>
+        </div>
+      )}
+    </div>
+  );
+}

components/settings/SettingsButton.module.css

@@ -0,0 +1,20 @@
+.button {
+  position: relative;
+}
+
+.panel {
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  padding: 20px;
+  z-index: 100;
+}
+
+.panel dd {
+  display: flex;
+}