diff --git a/landing/header.css b/landing/header.css --- a/landing/header.css +++ b/landing/header.css @@ -14,31 +14,38 @@ .logo { display: flex; align-items: center; - min-width: 85px; + min-width: 180px; } -.logo h1 { - font-size: 28px; - font-weight: 500; - color: var(--logo-color); +.logoText { + color: var(--white-100); + margin-right: 8px; +} + +.betaBadge { + padding: 4px 16px; + background-color: #ebebeb26; + backdrop-filter: blur(6px); + border-radius: 16px; + color: var(--white-100); } .tab { - font-size: 24px; - font-weight: 500; - color: #808080; - font-family: var(--sans-serif); + color: var(--black-60); transition: 150ms; transition-property: color; } .tab:hover { - color: #ffffff; + color: var(--white-100); +} + +.activeTab { + color: var(--white-100); } .pageNav { display: flex; - justify-content: space-evenly; - min-width: 225px; + column-gap: 72px; } .socialIconsContainer { @@ -47,6 +54,10 @@ align-items: center; } +.icon { + color: var(--white-100); +} + div.twitterIcon, div.githubIcon, div.webappIcon { @@ -90,7 +101,7 @@ transition: 300ms; } -@media screen and (max-width: 480px) { +@media screen and (max-width: 816px) { .pageNav { display: none; } diff --git a/landing/header.react.js b/landing/header.react.js --- a/landing/header.react.js +++ b/landing/header.react.js @@ -3,56 +3,91 @@ import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; import { faExternalLinkAlt, faBars } 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 css from './header.css'; +import typography from './typography.css'; const iconProps = { size: 'sm', - color: '#ebedee', -}; - -const navLinkProps = { - className: css.tab, - activeStyle: { - color: 'white', - }, }; function Header(): React.Node { + const logoTextClassName = classNames([typography.heading2, css.logoText]); + const badgeClassName = classNames([typography.paragraph2, css.betaBadge]); + const navLinkClassName = classNames([typography.subheading2, css.tab]); + return (