Update header and footer designs

pull/13/head
J M Rossy 2 years ago
parent 3678a0c538
commit 70af6e86ea
  1. 8
      src/components/buttons/IconButton.tsx
  2. 49
      src/components/icons/BigChevron.tsx
  3. 2
      src/components/input/SelectField.tsx
  4. 64
      src/components/nav/Footer.tsx
  5. 14
      src/components/nav/Header.tsx
  6. 2
      src/consts/links.ts
  7. 1
      src/images/logos/discord-alt.svg
  8. 3
      src/images/logos/github copy.svg
  9. 1
      src/images/logos/medium.svg

@ -2,8 +2,8 @@ import Image from 'next/future/image';
import { PropsWithChildren } from 'react';
export interface IconButtonProps {
width: number;
height: number;
width?: number;
height?: number;
classes?: string;
onClick?: () => void;
disabled?: boolean;
@ -13,7 +13,8 @@ export interface IconButtonProps {
}
export function IconButton(props: PropsWithChildren<IconButtonProps>) {
const { width, height, classes, onClick, imgSrc, disabled, title, passThruProps } = props;
const { width, height, classes, onClick, imgSrc, disabled, title, children, passThruProps } =
props;
const base = 'flex items-center justify-center transition-all';
const onHover = 'hover:opacity-70';
@ -31,6 +32,7 @@ export function IconButton(props: PropsWithChildren<IconButtonProps>) {
{...passThruProps}
>
<Image src={imgSrc} alt={title || ''} width={width} height={height} />
{children}
</button>
);
}

@ -0,0 +1,49 @@
import { memo } from 'react';
import { Color } from '../../styles/Color';
interface Props {
width?: string | number;
height?: string | number;
direction: 'n' | 'e' | 's' | 'w';
color?: string;
classes?: string;
}
function _BigChevron({ width, height, direction, color, classes }: Props) {
let directionClass;
switch (direction) {
case 'n':
directionClass = '-rotate-90';
break;
case 'e':
directionClass = '';
break;
case 's':
directionClass = 'rotate-90';
break;
case 'w':
directionClass = 'rotate-180';
break;
default:
throw new Error(`Invalid chevron direction ${direction}`);
}
return (
<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="1.2 1 139.1 322"
width={width}
height={height}
className={`${directionClass} ${classes}`}
>
<path
d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z"
fill={color || Color.primaryBlack}
></path>
</svg>
);
}
export const BigChevron = memo(_BigChevron);

@ -19,7 +19,7 @@ export function SelectField(props: Props) {
return (
<select
className={`px-2 py-1 text-sm border border-gray-500 rounded bg-transparent invalid:text-gray-400 ${
className={`px-2 py-1 text-sm border border-gray-400 rounded bg-transparent invalid:text-gray-400 ${
classes || ''
}`}
{...passThruProps}

@ -1,55 +1,79 @@
import Image from 'next/future/image';
import Link from 'next/link';
import { links } from '../../consts/links';
import Book from '../../images/icons/book.svg';
import Briefcase from '../../images/icons/briefcase.svg';
import InfoCircle from '../../images/icons/info-circle.svg';
import Discord from '../../images/logos/discord.svg';
import Github from '../../images/logos/github.svg';
import Hyperlane from '../../images/logos/hyperlane-logo.svg';
import Medium from '../../images/logos/medium.svg';
import Twitter from '../../images/logos/twitter.svg';
export function Footer() {
return (
<footer className="mt-3 px-4 py-4 sm:pl-6 sm:pr-8 opacity-80">
<div className="flex justify-between items-center">
<footer className="mt-2 px-4 py-6 sm:px-10 opacity-80">
<div className="flex flex-col sm:flex-row sm:justify-between items-center gap-6 sm:gap-0">
<div className="flex items-center">
<div className="flex scale-90 sm:scale-100">
<Image src={Hyperlane} width={52} height={52} alt="" />
<Image src={Hyperlane} width={56} height={56} alt="" />
</div>
<div className="flex flex-col ml-3">
<p className="text-sm font-light">
<p className="text-sm font-light leading-5">
<span className="text-base font-medium">Hyperlane</span> is the platform
<br />
for developers building
<br />
the interchain universe
the interchain universe.
</p>
</div>
</div>
<div className="grid grid-rows-2 grid-cols-3 gap-y-4 gap-x-5 md:gap-x-8">
<FooterIconLink to={links.twitter} imgSrc={Twitter} text="Twitter" />
<FooterIconLink to={links.docs} imgSrc={Book} text="Docs" />
<FooterIconLink to={links.home} imgSrc={InfoCircle} text="About" />
<FooterIconLink to={links.discord} imgSrc={Discord} text="Discord" />
<FooterIconLink to={links.github} imgSrc={Github} text="Github" />
<FooterIconLink to={links.jobs} imgSrc={Briefcase} text="Jobs" />
<div className="flex">
<div className="flex flex-col">
<FooterLink href={links.home} text="About" />
<FooterLink href={links.docs} text="Docs" />
<FooterLink href={links.chains} text="Chains" />
<FooterLink href={links.jobs} text="Jobs" />
</div>
<div className="flex flex-col ml-24 sm:ml-16">
<FooterIconLink href={links.twitter} imgSrc={Twitter} text="Twitter" />
<FooterIconLink href={links.discord} imgSrc={Discord} text="Discord" />
<FooterIconLink href={links.github} imgSrc={Github} text="Github" />
<FooterIconLink href={links.blog} imgSrc={Medium} text="Blog" />
</div>
</div>
</div>
</footer>
);
}
function FooterIconLink({ to, imgSrc, text }: { to: string; imgSrc: any; text: string }) {
function FooterLink({ href, text }: { href: string; text: string }) {
const aClasses =
'mt-1.5 text-sm hover:underline underline-offset-4 hover:opacity-70 transition-all';
if (href[0] === '/') {
return (
<Link href={href}>
<a className={aClasses}>{text}</a>
</Link>
);
} else {
return (
<a href={href} target="_blank" rel="noopener noreferrer" className={aClasses}>
{text}
</a>
);
}
}
function FooterIconLink({ href, imgSrc, text }: { href: string; imgSrc: any; text: string }) {
return (
<a
href={to}
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center hover:underline hover:opacity-70 transition-all"
className="mt-1.5 flex items-center hover:underline underline-offset-4 hover:opacity-70 transition-all"
>
<Image src={imgSrc} alt={text} width={18} height={18} />
<span className="hidden sm:inline ml-2 text-sm">{text}</span>
<Image src={imgSrc} width={18} height={18} alt="" />
<span className="ml-2.5 text-sm">{text}</span>
</a>
);
}

@ -18,20 +18,22 @@ export function Header({ pathName }: { pathName: string }) {
};
return (
<header className="p-2 sm:py-3 sm:pl-6 sm:pr-10 w-full">
<header className="px-2 pt-4 pb-3 sm:pt-5 sm:pb-3 sm:pl-6 sm:pr-10 w-full">
<div className="flex items-center justify-between">
<Link href="/">
<a className="flex items-center">
<div className="flex items-center scale-90 sm:scale-100">
<Image src={Logo} width={24} height={28} alt="" />
<Image src={Name} width={124} height={28} alt="Hyperlane" className="ml-2 pt-px" />
<div className="font-serif text-[1.85rem] text-blue-500 ml-2">Explorer</div>
<Image src={Logo} width={22} height={22} alt="" />
<Image src={Name} width={110} height={22} alt="Hyperlane" className="ml-2 pt-1" />
<div className="font-serif text-[1.8rem] xs:text-[1.65rem] leading-[1.2rem] text-blue-500 ml-2">
Explorer
</div>
</div>
</a>
</Link>
<nav className="hidden sm:flex sm:space-x-8 sm:items-center md:space-x-10">
<Link href="/">
<a className={styles.navLink + (pathName === '/' ? ' underline' : '')}>Home</a>
<a className={styles.navLink}>Home</a>
</Link>
<Link href="/debugger">
<a className={styles.navLink + (pathName === '/debugger' ? ' underline' : '')}>
@ -96,7 +98,7 @@ function DropdownItemContent({ icon, text }: { icon: any; text: string }) {
const styles = {
navLink:
'flex items-center tracking-wide text-gray-600 text-[0.95rem] hover:underline hover:opacity-70 decoration-2 underline-offset-[6px] transition-all',
'pt-px flex items-center tracking-wide text-gray-600 text-[0.95rem] hover:underline hover:opacity-80 active:opacity-70 decoration-2 underline-offset-[6px] transition-all',
dropdownContainer: 'dropdown-menu w-[7.5rem] mt-1 mr-px bg-gray-50',
dropdownOption:
'flex items-center cursor-pointer p-2 mt-1 rounded text-gray-600 hover:underline decoration-2 underline-offset-4 transition-all',

@ -3,6 +3,8 @@ export const links = {
discord: 'https://discord.gg/VK9ZUy3aTV',
github: 'https://github.com/hyperlane-xyz',
docs: 'https://docs.hyperlane.xyz/hyperlane-docs',
chains: 'https://docs.hyperlane.xyz/hyperlane-docs/developers/domains',
jobs: 'https://jobs.lever.co/Hyperlane',
twitter: 'https://twitter.com/hyperlane_xyz',
blog: 'https://medium.com/hyperlane',
};

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 55"><g clip-path="url(#a)"><path d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z" fill="#010101"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h71v55H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 766 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>

After

Width:  |  Height:  |  Size: 716 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 3 24 19.1"><path d="M2.8 6.9c0-.3 0-.6-.3-.8L.3 3.4V3h7l5.3 11.8L17.4 3H24v.4l-2 1.8c0 .2-.2.4-.1.6v13.5c0 .2 0 .4.2.5l1.9 1.8v.5h-9.5v-.5l2-1.8c.2-.2.2-.3.2-.6V8.3L11.3 22h-.7L4.3 8.3v9.2c0 .4 0 .8.3 1l2.5 3.1v.4H0v-.4l2.5-3c.3-.3.4-.7.3-1.1V6.9z"/></svg>

After

Width:  |  Height:  |  Size: 347 B

Loading…
Cancel
Save