fix(Footer/Nav): use theme

blockchain · Jun 4, 2018 · 657b33d · 657b33d
1 parent 659556c
commit 657b33d
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 29 deletions.
diff --git a/packages/blockchain-info-components/src/Footer/index.js b/packages/blockchain-info-components/src/Footer/index.js
@@ -9,8 +9,8 @@ import linkedinFooterLogo from '../Images/img/linkedin-footer-logo.svg'
 import twitterFooterLogo from '../Images/img/twitter-footer-logo.svg'
 
 const Container = styled.footer`
-  background: #e3eff5;
-  color: #004a7c;
+  background: ${props => props.theme['white-blue']};
+  color: ${props => props.theme['brand-primary']};
   font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 12px;
   line-height: normal;
@@ -22,7 +22,7 @@ const Container = styled.footer`
     font-weight: 300;
     &:hover { text-decoration: underline }
   }
-  a, a:active, a:hover, a:visited { color: #004a7c }
+  a, a:active, a:hover, a:visited { color: ${props => props.theme['brand-primary']} }
   .flex-container {
     display: flex;
     flex-flow: row nowrap;
@@ -71,7 +71,7 @@ const Container = styled.footer`
         img { width: inherit }
       }
       h6 {
-        color: #004a7c;
+        color: ${props => props.theme['brand-primary']};
         font-size: 12px;
         font-weight: 600;
         line-height: normal;
@@ -102,7 +102,7 @@ const Container = styled.footer`
             }
           }
           &:first-of-type, &:nth-of-type(6) {
-            border-top: 1px solid #004a7c;
+            border-top: 1px solid ${props => props.theme['brand-primary']};
             margin-top: 3px;
             padding-top: 8px;
             @media screen and (max-width: 768px) {
@@ -148,7 +148,7 @@ const Container = styled.footer`
     }
     .copyright {
       align-self: flex-end;
-      color: #004a7c;
+      color: ${props => props.theme['brand-primary']};
       flex-grow: 1;
       font-size: 10px;
       margin-right: 0;

diff --git a/packages/blockchain-info-components/src/Navigation/index.js b/packages/blockchain-info-components/src/Navigation/index.js
@@ -8,7 +8,7 @@ const Wrapper = styled.div`
   button:focus { outline: none !important }
 
   nav {
-    background: rgba(0, 74, 124, 1);
+    background: ${props => props.theme['brand-primary']};
     font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     height: 90px;
     position: fixed;
@@ -29,7 +29,7 @@ const Wrapper = styled.div`
   nav.open,
   nav.scrolling:hover,
   nav.searching,
-  body.opaque-nav nav, nav.opaque { background: rgba(0, 74, 124, 1) }
+  body.opaque-nav nav, nav.opaque { background: ${props => props.theme['brand-primary']}; }
 
   nav.open { height: 175px }
   nav.open .igation { overflow: visible }
@@ -39,7 +39,7 @@ const Wrapper = styled.div`
   nav ul { list-style: none }
 
   @media screen and (min-width: 1025px) {
-    nav:hover { background: rgba(0, 74, 124, 1) }
+    nav:hover { background: ${props => props.theme['brand-primary']}; }
   }
 
   /* NAVIGATION ITEMS */
@@ -77,7 +77,7 @@ const Wrapper = styled.div`
   nav .igation > li > a,
   nav .igation > li > a:hover,
   nav .igation > li > a:visited {
-    color: #fff;
+    color: ${props => props.theme['white']};
     position: relative;
     text-decoration: none;
     text-transform: uppercase;
@@ -136,7 +136,7 @@ const Wrapper = styled.div`
   /* NAVIGATION ITEM CHILDREN LINKS */
 
   nav .igation ul li a {
-    color: #fff;
+    color: ${props => props.theme['white']};
     display: block;
     font-size: 12px;
     font-weight: 300;
@@ -177,9 +177,9 @@ const Wrapper = styled.div`
   .search-bar {
     background: rgba(255, 255, 255, .05) url(${SearchIcon}) no-repeat 10px center;
     background-size: 14px;
-    border: 1px solid #fff;
+    border: 1px solid ${props => props.theme['white']};
     border-radius: 16px;
-    color: #fff;
+    color: ${props => props.theme['white']};
     font-size: 14px;
     font-weight: 300;
     height: 32px;
@@ -189,16 +189,16 @@ const Wrapper = styled.div`
     width: 260px;
 
     &:focus {
-      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.38 42.38'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23979797;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 2%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='surface1'%3E%3Cpath className='cls-1' d='M19.18.13a17,17,0,1,0,6.92,31.21L36.25,41.5a3,3,0,0,0,4.25,0h0a3,3,0,0,0,0-4.25l-10-10a16.88,16.88,0,0,0,3.37-12.36A17,17,0,0,0,19.18.13ZM17,4A13,13,0,1,1,4,17,13,13,0,0,1,17,4Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 10px center;
+      background: ${props => props.theme['white']} url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.38 42.38'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23979797;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 2%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='surface1'%3E%3Cpath className='cls-1' d='M19.18.13a17,17,0,1,0,6.92,31.21L36.25,41.5a3,3,0,0,0,4.25,0h0a3,3,0,0,0,0-4.25l-10-10a16.88,16.88,0,0,0,3.37-12.36A17,17,0,0,0,19.18.13ZM17,4A13,13,0,1,1,4,17,13,13,0,0,1,17,4Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 10px center;
       background-size: 14px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
-      color: #454545;
+      color: ${props => props.theme['gray-4']};
       outline: none;
       padding: 0 10px 0 32px;
     }
 
     &::placeholder { /* Chrome 57, Firefox 51, Opera 44, Safari 10.1 */
-      color: #fff;
+      color: ${props => props.theme['white']};
       font-size: 11px;
       font-weight: 300;
       line-height: 30px;
@@ -217,15 +217,15 @@ const Wrapper = styled.div`
     }
 
     &:-ms-input-placeholder { /* IE 10, 11 */
-      color: #fff;
+      color: ${props => props.theme['white']};
       font-size: 11px;
       font-weight: 300;
       line-height: normal;
       text-transform: uppercase;
     }
 
     &::-ms-input-placeholder { /* MS EDGE */
-      color: #fff;
+      color: ${props => props.theme['white']};
       font-size: 11px;
       font-weight: 300;
       line-height: normal;
@@ -236,7 +236,7 @@ const Wrapper = styled.div`
   /* GET FREE WALLET BUTTON */
 
   .wallet-button {
-    background: #00aee6;
+    background: ${props => props.theme['brand-secondary']};
     border-radius: 16px !important;
     display: block;
     font-size: 12px;
@@ -312,7 +312,7 @@ const Wrapper = styled.div`
     }
 
     nav.open .igation > li.with-children > a:after {
-      color: #10ADE4;
+      color: ${props => props.theme['brand-secondary']};
       font-family: 'icomoon';
       font-size: 14px;
       font-style: normal;
@@ -389,7 +389,7 @@ const Wrapper = styled.div`
     }
 
     .menu-button span {
-      background: #fff;
+      background: ${props => props.theme['white']};
       border-radius: 2px !important;
       display: block;
       height: 2px;
@@ -401,7 +401,7 @@ const Wrapper = styled.div`
 
     .menu-button span::before,
     .menu-button span::after {
-      background-color: #fff;
+      background-color: ${props => props.theme['white']};
       border-radius: 2px !important;
       content: "";
       display: block;
@@ -451,7 +451,7 @@ const Wrapper = styled.div`
       width: 20px;
 
       &::after {
-        color: #fff;
+        color: ${props => props.theme['white']};
         font-family: 'icomoon';
         font-size: 17px;
         font-style: normal;
@@ -481,19 +481,19 @@ const Wrapper = styled.div`
     }
 
     .search-bar, .search-bar:focus {
-      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.38 42.38'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23979797;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 2%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='surface1'%3E%3Cpath className='cls-1' d='M19.18.13a17,17,0,1,0,6.92,31.21L36.25,41.5a3,3,0,0,0,4.25,0h0a3,3,0,0,0,0-4.25l-10-10a16.88,16.88,0,0,0,3.37-12.36A17,17,0,0,0,19.18.13ZM17,4A13,13,0,1,1,4,17,13,13,0,0,1,17,4Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 12px center;
+      background: ${props => props.theme['white']} url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.38 42.38'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23979797;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 2%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='surface1'%3E%3Cpath className='cls-1' d='M19.18.13a17,17,0,1,0,6.92,31.21L36.25,41.5a3,3,0,0,0,4.25,0h0a3,3,0,0,0,0-4.25l-10-10a16.88,16.88,0,0,0,3.37-12.36A17,17,0,0,0,19.18.13ZM17,4A13,13,0,1,1,4,17,13,13,0,0,1,17,4Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 12px center;
       background-size: 16px;
       border: none;
       border-radius: 20px;
-      color: #454545;
+      color: ${props => props.theme['gray-4']};
       height: 40px;
       line-height: 14px;
       opacity: 0;
       padding: 0 10px 0 36px;
       width: inherit;
 
       &::placeholder {
-        color: #979797;
+        color: ${props => props.theme['gray-3']};
         font-size: 14px;
         line-height: 18px;
       }
@@ -503,7 +503,7 @@ const Wrapper = styled.div`
       }
 
       &::-webkit-input-placeholder {
-        color: #979797;
+        color: ${props => props.theme['gray-3']};
         font-size: 14px;
         line-height: 18px;
       }

diff --git a/packages/blockchain-info-components/src/index.js b/packages/blockchain-info-components/src/index.js
@@ -7,15 +7,13 @@ export { Carousel } from './Carousels'
 export { Color, Palette } from './Colors'
 export { SimpleDropdown, ComponentDropdown } from './Dropdowns'
 export { ConfirmationGauge, PasswordGauge, SecurityGauge } from './Gauges'
-export { Footer } from './Footer'
 export { CheckBoxInput, DateInput, NativeSelect, NumberInput, PasswordInput, RadioButtonInput, SelectInput, TextAreaInput, TextInput } from './Form'
 export { Icon } from './Icons'
 export { Background, Image } from './Images'
 export { Link } from './Links'
 export { BlockchainLoader, FlatLoader, FlatLoader2, HeartbeatLoader } from './Loaders'
 export { TabMenu, TabMenuItem } from './Menus'
 export { Modal, ModalHeader, ModalBody, ModalFooter } from './Modals'
-export { Navigation } from './Navigation'
 export { Pagination, PaginationItem } from './Paginations'
 export { Separator } from './Separators'
 export { SimpleSlider } from './Sliders'

diff --git a/packages/blockchain-info-components/stories/chapters/footer.js b/packages/blockchain-info-components/stories/chapters/footer.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+
+import Layout from '../components/layout'
+import Footer from '../../src/Footer'
+
+storiesOf('Footer', module)
+  .addDecorator(story => (<Layout>{story()}</Layout>))
+  .addDecorator((story, context) => withInfo({ text: 'Documentation', inline: true })(story)(context))
+  .add('Footer', () => <Footer />)
diff --git a/packages/blockchain-info-components/stories/chapters/navigation.js b/packages/blockchain-info-components/stories/chapters/navigation.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+
+import Layout from '../components/layout'
+import Navigation from '../../src/Navigation'
+
+storiesOf('Navigation', module)
+  .addDecorator(story => (<Layout>{story()}</Layout>))
+  .addDecorator((story, context) => withInfo({ text: 'Documentation', inline: true })(story)(context))
+  .add('Navigation', () => <Navigation />)
diff --git a/packages/blockchain-info-components/stories/index.js b/packages/blockchain-info-components/stories/index.js
@@ -7,13 +7,15 @@ import './chapters/colors'
 import './chapters/dropdowns'
 import './chapters/forms'
 import './chapters/fonts'
+import './chapters/footer'
 import './chapters/gauges'
 import './chapters/icons'
 import './chapters/images'
 import './chapters/links'
 import './chapters/loaders'
 import './chapters/menus'
 import './chapters/modals'
+import './chapters/navigation'
 import './chapters/paginations'
 import './chapters/separators'
 import './chapters/sliders'