Fixed sticky header scrolling. Updated settings button.

components/input/LanguageButton.js

@@ -7,7 +7,7 @@ import Icons from 'components/icons';
 import { labels } from 'components/messages';
 import styles from './LanguageButton.module.css';
 
-export default function LanguageButton({ tooltipPosition = 'top' }) {
+export default function LanguageButton({ tooltipPosition = 'top', menuPosition = 'right' }) {
   const { formatMessage } = useIntl();
   const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
@@ -25,7 +25,7 @@ export default function LanguageButton({ tooltipPosition = 'top' }) {
           </Icon>
         </Button>
       </Tooltip>
-      <Popup position="right" alignment="end">
+      <Popup position={menuPosition} alignment="end">
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (

components/input/SettingsButton.js

@@ -1,49 +1,33 @@
-import { useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import TimezoneSetting from '../pages/settings/profile/TimezoneSetting';
-import DateRangeSetting from '../pages/settings/profile/DateRangeSetting';
-import { Button, Icon } from 'react-basics';
+import { useIntl } from 'react-intl';
+import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
+import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
+import Icons from 'components/icons';
+import { labels } from 'components/messages';
 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);
-    }
-  });
+  const { formatMessage } = useIntl();
 
   return (
-    <div className={styles.button} ref={ref}>
-      <Button variant="light" onClick={handleClick}>
-        <Icon>
-          <Gear />
-        </Icon>
-      </Button>
-      {show && (
-        <div className={styles.panel}>
-          <dt>
-            <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
-          </dt>
-          <dd>
+    <PopupTrigger>
+      <Tooltip label={formatMessage(labels.settings)} position="bottom">
+        <Button variant="quiet">
+          <Icon>
+            <Icons.Gear />
+          </Icon>
+        </Button>
+      </Tooltip>
+      <Popup className={styles.popup} position="bottom" alignment="end">
+        <Form>
+          <FormRow label={formatMessage(labels.timezone)}>
             <TimezoneSetting />
-          </dd>
-          <dt>
-            <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
-          </dt>
-          <dd>
+          </FormRow>
+          <FormRow label={formatMessage(labels.defaultDateRange)}>
             <DateRangeSetting />
-          </dd>
-        </div>
-      )}
-    </div>
+          </FormRow>
+        </Form>
+      </Popup>
+    </PopupTrigger>
   );
 }

components/input/SettingsButton.module.css

@@ -1,8 +1,4 @@
-.button {
-  position: relative;
-}
-
-.panel {
+.popup {
   background: var(--base50);
   border: 1px solid var(--base500);
   border-radius: 4px;
@@ -14,7 +10,3 @@
   padding: 20px;
   z-index: 100;
 }
-
-.panel dd {
-  display: flex;
-}

components/input/ThemeButton.js

@@ -1,5 +1,5 @@
 import { useTransition, animated } from 'react-spring';
-import { Button, Icon, PopupTrigger, Tooltip } from 'react-basics';
+import { Button, Icon, Tooltip } from 'react-basics';
 import { useIntl } from 'react-intl';
 import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';

components/input/ThemeButton.module.css

@@ -1,6 +1,5 @@
 .button {
   width: 50px;
-  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;