Dropdown menu theming

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;