Increase authed/non-authed clarity for mobile view, change wording on…

… "Add Club" button (#737) Make login button more prominent in mobile view, change wording for Add Club
pennlabs · Oct 13, 2024 · c888c78 · c888c78
1 parent a4c1b2a
commit c888c78
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/frontend/components/DisplayButtons.tsx b/frontend/components/DisplayButtons.tsx
@@ -74,10 +74,10 @@ const DisplayButtons = ({
       <Link href="/create" className="button is-small is-primary">
         <Icon
           name="plus"
-          alt={`create ${OBJECT_NAME_SINGULAR}`}
+          alt={`register ${OBJECT_NAME_SINGULAR}`}
           style={iconStylesDark}
         />
-        Add {OBJECT_NAME_TITLE_SINGULAR}
+        Register {OBJECT_NAME_TITLE_SINGULAR}
       </Link>
     )}
   </DisplayButtonsTag>

diff --git a/frontend/components/Header/Burger.tsx b/frontend/components/Header/Burger.tsx
@@ -4,6 +4,9 @@ const Burger = ({ toggle }: BurgerProps): ReactElement => (
   <a
     role="button"
     className="navbar-burger burger"
+    style={{
+      marginLeft: '8px',
+    }}
     aria-label="menu"
     aria-expanded="false"
     data-target="navbarBasicExample"

diff --git a/frontend/components/Header/Links.tsx b/frontend/components/Header/Links.tsx
@@ -55,6 +55,20 @@ const LoginButton = styled.a`
   }
 `
 
+export const MobileLoginButton = styled(LoginButton)`
+  display: none;
+  margin-right: 0;
+  ${mediaMaxWidth(MD)} {
+    display: inline-flex;
+  }
+`
+const DesktopLoginButton = styled(LoginButton)`
+  margin-left: 20px;
+  ${mediaMaxWidth(MD)} {
+    display: none;
+  }
+`
+
 const StyledLinkAnchor = styled.a`
   padding: ${LINK_MARGIN} 20px;
   color: ${BANNER_TEXT} !important;
@@ -116,13 +130,13 @@ const Links = ({ userInfo, authenticated, show }: Props): ReactElement => {
           FAQ
         </StyledLink>
         {authenticated === false && (
-          <LoginButton
+          <DesktopLoginButton
             className="button"
             href={`${LOGIN_URL}?next=${router.asPath}`}
             onClick={() => logEvent('login', 'click')}
           >
             Login
-          </LoginButton>
+          </DesktopLoginButton>
         )}
         {authenticated && userInfo && (
           <StyledLink href={SETTINGS_ROUTE}>

diff --git a/frontend/components/Header/index.tsx b/frontend/components/Header/index.tsx
@@ -1,7 +1,11 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { ReactElement, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
+import { LOGIN_URL } from '~/utils'
+import { logEvent } from '~/utils/analytics'
+
 import { BANNER_BG, BANNER_TEXT, BORDER } from '../../constants/colors'
 import {
   ANIMATION_DURATION,
@@ -31,7 +35,7 @@ import {
 import Burger from './Burger'
 import Feedback from './Feedback'
 import Heading from './Head'
-import Links from './Links'
+import Links, { MobileLoginButton } from './Links'
 
 const Nav = styled.nav`
   height: ${NAV_HEIGHT};
@@ -164,6 +168,7 @@ const isHub = SITE_ID === 'fyh'
 
 const Header = ({ authenticated, userInfo }: HeaderProps): ReactElement => {
   const [show, setShow] = useState(false)
+  const router = useRouter()
 
   const toggle = () => setShow(!show)
 
@@ -184,6 +189,15 @@ const Header = ({ authenticated, userInfo }: HeaderProps): ReactElement => {
               <Title>{SITE_NAME}</Title>
             </LogoItem>
           </Link>
+          {authenticated === false && (
+            <MobileLoginButton
+              className="button"
+              href={`${LOGIN_URL}?next=${router.asPath}`}
+              onClick={() => logEvent('login', 'click')}
+            >
+              Login
+            </MobileLoginButton>
+          )}
           <Burger toggle={toggle} />
         </div>
         <Links userInfo={userInfo} authenticated={authenticated} show={show} />