aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 20:33:38 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 20:33:51 +0800
commita4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 (patch)
tree7290cd83b61ba5edfca5beacae09d15a8e350dc8 /packages/website/ts
parente001988dbe0046acd6adf0d9b1f7311e9611edf9 (diff)
downloaddexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.gz
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.bz2
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.lz
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.xz
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.tar.zst
dexon-sol-tools-a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97.zip
Dropdown menu theming
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx40
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx16
-rw-r--r--packages/website/ts/@next/components/header.tsx18
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx10
-rw-r--r--packages/website/ts/@next/components/text.tsx6
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx2
6 files changed, 73 insertions, 19 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index d87540511..8cd2798ce 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,11 +1,16 @@
import * as _ from 'lodash';
import * as React from 'react';
-import styled from 'styled-components';
-
import {Link as RouterLink} from 'react-router-dom';
+import styled, {withTheme} from 'styled-components';
+
import {Link} from 'ts/@next/components/button';
import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
import {Heading} from 'ts/@next/components/text';
+import {GlobalStyle} from 'ts/@next/constants/globalStyle';
+
+interface Props {
+ theme: GlobalStyle;
+}
const introData = [
{
@@ -56,11 +61,11 @@ const linksData = [
},
];
-export const DropdownDevelopers = () => (
+export const DropdownDevelopers = withTheme((props: Props) => (
<>
<DropdownWrap>
<div>
- <Heading size={14} color="#5d5d5d">
+ <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
Getting Started
</Heading>
@@ -75,7 +80,7 @@ export const DropdownDevelopers = () => (
<StyledWrap>
<Column colWidth="1/2" isNoPadding={true}>
- <Heading size={14} color="#5d5d5d">
+ <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
Popular Docs
</Heading>
@@ -91,7 +96,7 @@ export const DropdownDevelopers = () => (
</Column>
<Column colWidth="1/2" isNoPadding={true}>
- <Heading size={14} color="#5d5d5d">
+ <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
Useful Links
</Heading>
@@ -107,21 +112,36 @@ export const DropdownDevelopers = () => (
</Column>
</StyledWrap>
- <StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
+ <StyledLink to="#" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
View All Documentation
</StyledLink>
</DropdownWrap>
</>
-);
+));
const DropdownWrap = styled.div`
- padding: 15px 30px 75px 15px;
+ padding: 15px 30px 75px 30px;
+
+ a {
+ color: inherit;
+ }
`;
const StyledWrap = styled(Wrap)`
- border-top: 1px solid #dadada;
padding-top: 20px;
margin-top: 30px;
+ position: relative;
+
+ &:before {
+ content: '';
+ width: 100%;
+ height: 1px;
+ background-color: ${props => props.theme.dropdownColor};
+ opacity: 0.15;
+ position: absolute;
+ top: 0;
+ left:0;
+ }
`;
const StyledLink = styled(Link)`
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 0271daf84..6eb321aa6 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,5 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
+
import {Link} from 'react-router-dom';
import styled from 'styled-components';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -26,12 +27,22 @@ export const DropdownProducts = () => (
{_.map(navData, (item, index) => (
<li>
<Link to={item.url}>
- <Heading color="#000000" isNoMargin={true} size="small">
+ <Heading
+ asElement="h3"
+ color="inherit"
+ isNoMargin={true}
+ size="small"
+ >
{item.title}
</Heading>
{item.description &&
- <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+ <Paragraph
+ color="inherit"
+ isNoMargin={true}
+ size="small"
+ isMuted={0.5}
+ >
{item.description}
</Paragraph>
}
@@ -45,5 +56,6 @@ const List = styled.ul`
a {
padding: 15px 30px;
display: block;
+ color: inherit;
}
`;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 10e0ec09e..52207ddce 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -211,8 +211,10 @@ const LinkWrap = styled.div`
const DropdownWrap = styled.div`
width: ${props => props.width || 280}px;
padding: 15px 0;
- background-color: #ffffff;
- color: #000000;
+ border: 1px solid transparent;
+ border-color: ${props => props.theme.dropdownBorderColor};
+ background-color: ${props => props.theme.dropdownBg};
+ color: ${props => props.theme.dropdownColor};
position: absolute;
top: 100%;
left: calc(50% - ${props => (props.width || 280) / 2}px);
@@ -221,7 +223,7 @@ const DropdownWrap = styled.div`
transform: translate3d(0, -10px, 0);
transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
- &:after {
+ &:after, &:before {
bottom: 100%;
left: 50%;
border: solid transparent;
@@ -230,11 +232,19 @@ const DropdownWrap = styled.div`
width: 0;
position: absolute;
pointer-events: none;
+ }
+ &:after {
border-color: rgba(255, 255, 255, 0);
- border-bottom-color: #ffffff;
+ border-bottom-color: ${props => props.theme.dropdownBg};
border-width: 10px;
margin-left: -10px;
}
+ &:before {
+ border-color: rgba(255, 0, 0, 0);
+ border-bottom-color: ${props => props.theme.dropdownBorderColor};
+ border-width: 11px;
+ margin-left: -11px;
+ }
@media (max-width: ${BREAKPOINTS.mobile}) {
display: none;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 9b9bdfae6..395df68a9 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -28,16 +28,26 @@ const GLOBAL_THEMES: ThemeInterface = {
bgColor: '#000000',
textColor: '#FFFFFF',
linkColor: colors.brandLight,
+ dropdownBg: '#111A19',
+ dropdownButtonBg: '#003831',
+ dropdownColor: '#FFFFFF',
},
light: {
bgColor: '#FFFFFF',
textColor: '#000000',
linkColor: colors.brandDark,
+ dropdownBg: '#FBFBFB',
+ dropdownButtonBg: '#F3F6F4',
+ dropdownColor: '#003831',
+ dropdownBorderColor: '#E4E4E4',
},
gray: {
bgColor: '#e0e0e0',
textColor: '#000000',
linkColor: colors.brandDark,
+ dropdownBg: '#FFFFFF',
+ dropdownButtonBg: '#F3F6F4',
+ dropdownColor: '#003831',
},
};
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index bf471db2e..9251389ab 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -11,6 +11,7 @@ interface HeadingProps extends BaseTextInterface {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
isCentered?: boolean;
isNoMargin?: boolean;
+ isMuted?: boolean | number;
marginBottom?: string;
color?: string;
}
@@ -24,12 +25,13 @@ interface ParagraphProps extends BaseTextInterface {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
- padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
- margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
text-align: ${props => props.isCentered && 'center'};
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
margin-left: ${props => props.isCentered && 'auto'};
margin-right: ${props => props.isCentered && 'auto'};
+ margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
+ opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
font-weight: 400;
`;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 9ec1a5d35..29a8dc49f 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -1,7 +1,7 @@
import {createGlobalStyle, withTheme} from 'styled-components';
import {cssReset} from 'ts/@next/constants/cssReset';
-interface GlobalStyle {
+export interface GlobalStyle {
theme: {
bgColor: string;
textColor: string;