From a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 13:33:38 +0100
Subject: Dropdown menu theming

---
 .../components/dropdowns/dropdown_developers.tsx   | 40 ++++++++++++++++------
 1 file changed, 30 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx')

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)`
-- 
cgit v1.2.3