Fix AuthButtons for mobile (#4653)

* Fix AuthButtons for mobile

* esf

app/javascript/components/home/AuthButtons.jsx

@@ -3,11 +3,12 @@ import { Form, Stack } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import { useLocation, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 import ButtonLink from '../shared_components/utilities/ButtonLink';
 import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 import useEnv from '../../hooks/queries/env/useEnv';
 
-export default function AuthButtons() {
+export default function AuthButtons({ direction }) {
   const { data: env } = useEnv();
   const { t } = useTranslation();
   const { search } = useLocation();
@@ -27,17 +28,19 @@ export default function AuthButtons() {
     return (
       <Form action="/auth/openid_connect" method="POST" data-turbo="false">
         <input type="hidden" name="authenticity_token" value={document.querySelector('meta[name="csrf-token"]').content} />
-        <Button variant="brand-outline-color" className="btn m-2" type="submit">{t('authentication.sign_up')}</Button>
-        <Button variant="brand" className="btn m-2" type="submit">{t('authentication.sign_in')}</Button>
+        <Stack direction={direction} gap={2}>
+          <Button variant="brand-outline-color" className="btn" type="submit">{t('authentication.sign_up')}</Button>
+          <Button variant="brand" className="btn" type="submit">{t('authentication.sign_in')}</Button>
+        </Stack>
       </Form>
     );
   }
 
   return (
-    <Stack direction="horizontal">
+    <Stack direction={direction} gap={2}>
       { showSignUp()
           && (
-            <ButtonLink to={`/signup${search}`} variant="brand-outline-color" className="btn me-2">
+            <ButtonLink to={`/signup${search}`} variant="brand-outline-color" className="btn">
               {t('authentication.sign_up')}
             </ButtonLink>
           ) }
@@ -45,3 +48,11 @@ export default function AuthButtons() {
     </Stack>
   );
 }
+
+AuthButtons.defaultProps = {
+  direction: 'horizontal',
+};
+
+AuthButtons.propTypes = {
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+};

app/javascript/components/home/NavbarNotSignedIn.jsx

 import React from 'react';
 import { Nav, Navbar } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import AuthButtons from './AuthButtons';
 
 export default function NavbarNotSignedIn() {
-  const { t } = useTranslation();
-
   return (
     <>
       <Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0" />
@@ -14,12 +10,7 @@ export default function NavbarNotSignedIn() {
       {/* Hidden Mobile */}
       <Navbar.Collapse id="navbar-menu" className="bg-white w-100 position-absolute">
         <Nav className="d-block d-sm-none text-black px-2">
-          <Nav.Link eventKey={1} as={Link} to="/signin">
-            {t('authentication.sign_in')}
-          </Nav.Link>
-          <Nav.Link eventKey={2} as={Link} to="/signup">
-            {t('authentication.sign_up')}
-          </Nav.Link>
+          <AuthButtons direction="vertical" />
         </Nav>
       </Navbar.Collapse>