aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 23:18:10 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 23:18:27 +0800
commitbc64c9566c4f1410dc7c22e287533473a6052085 (patch)
tree4bd7f7a4faed4f15b45a44adbf5ba6508ae9470e
parentd068956b695b1eef7a721e9b428375e73380c747 (diff)
downloaddexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar.gz
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar.bz2
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar.lz
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar.xz
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.tar.zst
dexon-sol-tools-bc64c9566c4f1410dc7c22e287533473a6052085.zip
Header changes, mobile alignments
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx42
-rw-r--r--packages/website/ts/@next/components/header.tsx39
-rw-r--r--packages/website/ts/@next/components/layout.tsx4
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx2
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx2
5 files changed, 72 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 532aa7314..8f5f988d5 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -65,22 +65,39 @@ export const DropdownDevelopers = withTheme((props: Props) => (
<>
<DropdownWrap>
<div>
- <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
+ <Heading
+ asElement="h4"
+ size={14}
+ color="inherit"
+ marginBottom="15px"
+ isMuted={0.35}
+ >
Getting Started
</Heading>
- <WrapGrid isCentered={false} isWrapped={true}>
+ <StyledGrid isCentered={false} isWrapped={true}>
{_.map(introData, (item, index) => (
- <RouterLink key={`introLink-${index}`} to={item.url}>
- {item.label}
- </RouterLink>
+ <li>
+ <RouterLink
+ key={`introLink-${index}`}
+ to={item.url}
+ >
+ {item.label}
+ </RouterLink>
+ </li>
))}
- </WrapGrid>
+ </StyledGrid>
</div>
<StyledWrap>
<Column colWidth="1/2" isNoPadding={true}>
- <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
+ <Heading
+ asElement="h4"
+ size={14}
+ color="inherit"
+ marginBottom="15px"
+ isMuted={0.35}
+ >
Popular Docs
</Heading>
@@ -125,6 +142,17 @@ const DropdownWrap = styled.div`
a {
color: inherit;
}
+
+ li {
+ margin: 8px 0;
+ }
+`;
+
+const StyledGrid = styled(WrapGrid.withComponent('ul'))`
+ li {
+ width: 50%;
+ flex-shrink: 0;
+ }
`;
const StyledWrap = styled(Wrap)`
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b0dabf98d..73f615643 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -36,7 +36,11 @@ const mobileProductLinks = [
];
const navItems: NavItem[] = [
- { id: 'why', url: '/next/why', text: 'Why 0x' },
+ {
+ id: 'why',
+ url: '/next/why',
+ text: 'Why 0x',
+ },
{
id: 'products',
url: '/next/0x-instant',
@@ -49,10 +53,18 @@ const navItems: NavItem[] = [
url: '#',
text: 'Developers',
dropdownComponent: DropdownDevelopers,
- dropdownWidth: 450,
+ dropdownWidth: 480,
+ },
+ {
+ id: 'about',
+ url: '/next/about/mission',
+ text: 'About',
+ },
+ {
+ id: 'blog',
+ url: '#',
+ text: 'Blog',
},
- { id: 'about', url: '/next/about/mission', text: 'About' },
- { id: 'blog', url: '#', text: 'Blog' },
];
class HeaderBase extends React.Component<HeaderProps, HeaderState> {
@@ -72,13 +84,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
return (
<Wrapper key={`nav-${index}`}>
- <Link
+ <NavLink
href={link.url}
isTransparent={true}
isNoBorder={true}
>
{link.text}
- </Link>
+ </NavLink>
{link.dropdownComponent &&
<DropdownWrap width={link.dropdownWidth}>
@@ -118,7 +130,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
</MobileProductLinksWrap>
<StyledButtonWrap>
- {_.map(navItems, (link, index) => this.getNavItem(link, index))}
+ {_.map(navItems, (link, index) => (
+ this.getNavItem(link, index)
+ ))}
</StyledButtonWrap>
</Nav>
@@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
}
`;
+const NavLink = styled(Link).attrs({
+ activeStyle: { opacity: 1 },
+})`
+ opacity: 0.5;
+ transition: opacity 0.35s;
+
+ &:hover {
+ opacity: 1;
+ }
+`;
+
const HeaderWrap = styled(Wrap)`
justify-content: space-between;
align-items: center;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 682ffbc5a..bba21d593 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -35,6 +35,7 @@ interface ColumnProps {
isNoPadding?: boolean;
isPadLarge?: boolean;
isFlexGrow?: boolean;
+ isMobileCentered?: boolean;
bgColor?: string;
}
@@ -97,7 +98,7 @@ export const Section = styled.section<SectionProps>`
@media (max-width: ${BREAKPOINTS.mobile}) {
margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`};
- padding: ${PADDING_SIZES.default};
+ padding: ${props => props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
}
`;
@@ -148,6 +149,7 @@ export const Column = styled.div<ColumnProps>`
@media (max-width: ${BREAKPOINTS.mobile}) {
padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')};
margin-bottom: 20px;
+ text-align: ${props => props.isMobileCentered && 'center'};
}
`;
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index d94da18ec..9e7ed7402 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -14,7 +14,7 @@ export const SectionLandingHero = () => (
</WrapCentered>
</Column>
- <Column colWidth="1/2">
+ <Column colWidth="1/2" isMobileCentered={true}>
<Heading size="large">
Powering Decentralized Exchange
</Heading>
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 34b7031b3..28d8e4b5e 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -72,7 +72,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
--defaultParagraph: 16px; // TO DO
--mediumParagraph: 16px; // TO DO
--largeParagraph: 18px; // TO DO
- --smallIcon: 45px;
+ --smallIcon: 55px;
--mediumIcon: 55px;
--largeIcon: 115px;
}