better buttons for layout (#260)

unlock-app/src/components/interface/Footer.js

@@ -1,14 +1,14 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
-import Icons from './icons'
+import Buttons from './buttons'
 
 export default class Footer extends PureComponent {
   render() {
     return (
       <Container>
-        <Button><Icons.About fill={'white'} /></Button>
-        <Button><Icons.Jobs fill={'white'} /></Button>
-        <Button><Icons.Github fill={'white'} /></Button>
+        <Buttons.About />
+        <Buttons.Jobs />
+        <Buttons.Github />
         <Colophon>Made with passion in Brooklyn, NY</Colophon>
       </Container>
     )
@@ -26,13 +26,6 @@ const Container = styled.footer`
   align-items: center;
 `
 
-const Button = styled.a`
-  background-color: var(--grey);
-  border-radius: 50%;
-  height: 24px;
-  display: grid;
-`
-
 const Colophon = styled.span`
   justify-self: end;
   font-size: 12px;

unlock-app/src/components/interface/Header.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 import Icons from './icons'
+import Buttons from './buttons'
 
 export default function Header({ forContent, title }) {
   return (
@@ -12,9 +13,9 @@ export default function Header({ forContent, title }) {
       {!!forContent &&
         <Icons.UnlockWordMark height={'28px'} />
       }
-      <Button><Icons.About fill={'white'} /></Button>
-      <Button><Icons.Jobs fill={'white'} /></Button>
-      <Button><Icons.Github fill={'white'} /></Button>
+      <Buttons.About />
+      <Buttons.Jobs />
+      <Buttons.Github />
     </TopHeader>
   )
 }
@@ -32,10 +33,3 @@ const TopHeader = styled.header`
   align-items: center;
   height: 70px;
 `
-
-const Button = styled.a`
-  background-color: var(--grey);
-  border-radius: 50%;
-  height: 24px;
-  display: grid;
-`

unlock-app/src/components/interface/buttons/About.js

@@ -0,0 +1,13 @@
+import Icons from '../icons'
+import React, { PureComponent } from 'react'
+import { LayoutButton } from './Button'
+
+export default class About extends PureComponent {
+  render() {
+    return (
+      <LayoutButton href="/about">
+        <Icons.About fill={'white'} />
+      </LayoutButton>
+    )
+  }
+}

unlock-app/src/components/interface/buttons/Button.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const LayoutButton = styled.a`
+  background-color: var(--grey);
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  display: grid;
+`

unlock-app/src/components/interface/buttons/Github.js

@@ -0,0 +1,13 @@
+import Icons from '../icons'
+import React, { PureComponent } from 'react'
+import { LayoutButton } from './Button'
+
+export default class Github extends PureComponent {
+  render() {
+    return (
+      <LayoutButton href="https://github.com/unlock-protocol/unlock">
+        <Icons.Github fill={'white'} />
+      </LayoutButton>
+    )
+  }
+}

unlock-app/src/components/interface/buttons/Jobs.js

@@ -0,0 +1,13 @@
+import Icons from '../icons'
+import React, { PureComponent } from 'react'
+import { LayoutButton } from './Button'
+
+export default class Jobs extends PureComponent {
+  render() {
+    return (
+      <LayoutButton href="/jobs">
+        <Icons.Jobs fill={'white'} />
+      </LayoutButton>
+    )
+  }
+}

unlock-app/src/components/interface/buttons/index.js

@@ -0,0 +1,9 @@
+import About from './About'
+import Github from './Github'
+import Jobs from './Jobs'
+
+export default {
+  About,
+  Github,
+  Jobs,
+}

unlock-app/src/stories/interface/Buttons.stories.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Buttons from '../../components/interface/buttons'
+
+storiesOf('Button')
+  .add('Github', () => {
+    return (
+      <Buttons.Github />
+    )
+  })
+  .add('About', () => {
+    return (
+      <Buttons.About />
+    )
+  })
+  .add('Jobs', () => {
+    return (
+      <Buttons.Jobs />
+    )
+  })