Merge remote-tracking branch 'origin/dev' into testing-{city,-region}

components/common/MenuButton.js

@@ -16,6 +16,7 @@ function MenuButton({
   menuAlign = 'right',
   onSelect,
   renderValue,
+  hideLabel,
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
@@ -44,7 +45,9 @@ function MenuButton({
         onClick={toggleMenu}
         variant="light"
       >
-        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+        {!hideLabel && (
+          <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+        )}
       </Button>
       {showMenu && (
         <Menu

components/layout/Footer.js

@@ -5,14 +5,13 @@ import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
-  const { locale } = useLocale();
+  const { dir } = useLocale();
 
   return (
-    <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <footer className="container" dir={dir}>
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">

components/layout/Header.js

@@ -12,21 +12,20 @@ import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 import XMark from 'assets/xmark.svg';
 import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const { locale } = useLocale();
+  const { locale, dir } = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <nav className="container" dir={dir}>
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className={styles.nav}>

components/layout/Layout.js

@@ -3,11 +3,9 @@ import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const { locale } = useLocale();
-  const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
+  const { dir } = useLocale();
 
   return (
     <>

components/layout/PageHeader.module.css

@@ -5,4 +5,5 @@
   align-content: center;
   min-height: 80px;
   align-self: stretch;
+  font-weight: bold;
 }

components/settings/LanguageButton.js

@@ -37,8 +37,8 @@ export default function LanguageButton() {
       options={menuOptions}
       value={locale}
       menuClassName={styles.menu}
-      renderValue={option => option?.display}
       onSelect={handleSelect}
+      hideLabel
     />
   );
 }