diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css index 052fffbc9..75c838d73 100644 --- a/landing/mobile-nav.css +++ b/landing/mobile-nav.css @@ -1,54 +1,57 @@ nav.mobileNav { position: absolute; top: -110vh; bottom: auto; left: 0; right: 0; height: 100vh; z-index: var(--mobile-nav-z-index); background-color: transparent; padding: 8px 32px 0; - transition: top 500ms, background-color 0ms 500ms; + transition: + top 500ms, + background-color 0ms 500ms; } nav.activeMobileNav { top: 0; transition: top 500ms; background-color: var(--comparison-cards); } div.tabContainer { border-bottom: 1px solid var(--black-90); -webkit-tap-highlight-color: transparent; } .tab { color: var(--white-60); transition: color 150ms; } .tab:hover, .activeTab { color: var(--white-100); } .tabContent { padding: 16px 0; } div.socialIconsContainer { display: flex; column-gap: 24px; margin-top: 16px; + align-items: center; } div.socialIconsContainer a { -webkit-tap-highlight-color: transparent; } .icon { color: var(--white-60); } .icon:hover { color: var(--white-100); } diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js index 8315f3036..46f8e7a85 100644 --- a/landing/mobile-nav.react.js +++ b/landing/mobile-nav.react.js @@ -1,91 +1,100 @@ // @flow import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; +import { faDownload } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; import { NavLink } from 'react-router-dom'; import type { SetState } from 'lib/types/hook-types.js'; import css from './mobile-nav.css'; import typography from './typography.css'; type Props = { +showMobileNav: boolean, +setShowMobileNav: SetState, }; function MobileNav(props: Props): React.Node { const { showMobileNav, setShowMobileNav } = props; const navLinkClassName = classNames([typography.paragraph2, css.tab]); const mobileNavClassName = classNames({ [css.mobileNav]: true, [css.activeMobileNav]: showMobileNav, }); - const onClickTab = React.useCallback(() => { + const dismissMobileNav = React.useCallback(() => { setShowMobileNav(false); }, [setShowMobileNav]); return ( ); } export default MobileNav;