Page MenuHomePhorge
Files F32223255

D7839.1765208146.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D7839.1765208146.diff
View Options

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 (
<nav className={css.headerContainer}>
<div className={css.headerNavContentContainer}>
- <NavLink to="/" className={css.logo}>
- <h1>Comm</h1>
- </NavLink>
- <div className={css.pageNav}>
- <NavLink to="/" exact {...navLinkProps}>
- App
+ <div className={css.logo}>
+ <NavLink to="/">
+ <h1 className={logoTextClassName}>Comm</h1>
</NavLink>
- <NavLink to="/keyservers" exact {...navLinkProps}>
+ <div className={badgeClassName}>Beta</div>
+ </div>
+ <div className={css.pageNav}>
+ <NavLink
+ to="/keyservers"
+ exact
+ className={navLinkClassName}
+ activeClassName={css.activeTab}
+ >
Keyserver
</NavLink>
+ <NavLink
+ to="/team"
+ exact
+ className={navLinkClassName}
+ activeClassName={css.activeTab}
+ >
+ Team
+ </NavLink>
+ <NavLink
+ to="/investors"
+ exact
+ className={navLinkClassName}
+ activeClassName={css.activeTab}
+ >
+ Investors
+ </NavLink>
</div>
<div className={css.socialIconsContainer}>
<a href="https://web.comm.app">
<div className={css.webappIcon}>
- <FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />
+ <FontAwesomeIcon
+ icon={faExternalLinkAlt}
+ className={css.icon}
+ {...iconProps}
+ />
</div>
</a>
<a href="https://twitter.com/commdotapp">
<div className={css.twitterIcon}>
- <FontAwesomeIcon icon={faTwitter} {...iconProps} />
+ <FontAwesomeIcon
+ icon={faTwitter}
+ className={css.icon}
+ {...iconProps}
+ />
</div>
</a>
<a href="https://github.com/CommE2E/comm">
<div className={css.githubIcon}>
- <FontAwesomeIcon icon={faGithub} {...iconProps} />
+ <FontAwesomeIcon
+ icon={faGithub}
+ className={css.icon}
+ {...iconProps}
+ />
</div>
</a>
<div className={css.menuIcon}>
- <FontAwesomeIcon icon={faBars} {...iconProps} />
+ <FontAwesomeIcon
+ icon={faBars}
+ className={css.icon}
+ {...iconProps}
+ />
</div>
</div>
</div>

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 8, 3:35 PM (8 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5848863
Default Alt Text
D7839.1765208146.diff (4 KB)

Event Timeline