not using fill anymore on SVG. They are now fully styled via CSS

unlock-protocol · Sep 28, 2018 · c41992a · c41992a
1 parent 189fab7
commit c41992a
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 17 deletions.
diff --git a/unlock-app/src/components/interface/buttons/Button.js b/unlock-app/src/components/interface/buttons/Button.js
@@ -3,7 +3,13 @@ import React from 'react'
 import styled from 'styled-components'
 
 export const LayoutButton = ({href, title, children}) => (
-  <Button href={href} backgroundColor={'var(--grey)'} hoverColor={'var(--link)'} >
+  <Button
+    href={href}
+    backgroundColor={'var(--grey)'}
+    fillColor={'white'}
+    backgroundHoverColor={'var(--link)'}
+    fillHoverColor={'white'}
+  >
     {children}
     <Label>{title}</Label>
   </Button>
@@ -13,31 +19,54 @@ LayoutButton.propTypes = {
   href: PropTypes.string,
   title: PropTypes.string,
   children: PropTypes.node,
+  backgroundColor: PropTypes.string,
+  backgroundHoverColor: PropTypes.string,
+  fillColor: PropTypes.string,
+  fillHoverColor: PropTypes.string,
 }
 
 export const LockButton = ({ href, children }) => (
-  <Button href={href} backgroundColor={'var(--lightgrey)'} hoverColor={'var(--link)'}>
+  <Button
+    href={href}
+    backgroundColor={'var(--lightgrey)'}
+    fillColor={'var(--grey)'}
+    backgroundHoverColor={'var(--link)'}
+    fillHoverColor={'white'}
+  >
     {children}
   </Button>
 )
 
 LockButton.propTypes = {
   href: PropTypes.string,
   children: PropTypes.node,
+  backgroundColor: PropTypes.string,
+  backgroundHoverColor: PropTypes.string,
+  fillColor: PropTypes.string,
+  fillHoverColor: PropTypes.string,
 }
 
 export const Button = styled.a`
-  background-color: ${props => props.backgroundColor};
+  background-color: ${props => props.backgroundColor || 'var(--grey)'};
   cursor: pointer;
   border-radius: 50%;
   height: 24px;
   width: 24px;
   display: grid;
 
+  > svg {
+    fill: ${props => props.fillColor || 'white'};
+  }
+
   &:hover {
-    background-color: ${props => props.hoverColor};
+    background-color: ${props => props.backgroundHoverColor || 'var(--link)'};
+
+    > svg {
+      fill: ${props => props.fillHoverColor || 'white'};
+    }
   }
 `
+
 export const Label = styled.small`
   display: none;
   position: relative;

diff --git a/unlock-app/src/components/interface/buttons/layout/About.js b/unlock-app/src/components/interface/buttons/layout/About.js
@@ -6,7 +6,7 @@ export default class About extends PureComponent {
   render() {
     return (
       <LayoutButton href="/about" title="About">
-        <Svg.About fill={'white'} />
+        <Svg.About />
       </LayoutButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/layout/Github.js b/unlock-app/src/components/interface/buttons/layout/Github.js
@@ -6,7 +6,7 @@ export default class Github extends PureComponent {
   render() {
     return (
       <LayoutButton href="https://github.com/unlock-protocol/unlock" title="Source Code">
-        <Svg.Github fill={'white'} />
+        <Svg.Github />
       </LayoutButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/layout/Jobs.js b/unlock-app/src/components/interface/buttons/layout/Jobs.js
@@ -6,7 +6,7 @@ export default class Jobs extends PureComponent {
   render() {
     return (
       <LayoutButton href="/jobs" title="Join us">
-        <Svg.Jobs fill={'white'} />
+        <Svg.Jobs />
       </LayoutButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Code.js b/unlock-app/src/components/interface/buttons/lock/Code.js
@@ -6,7 +6,7 @@ export default class Code extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Code fill={'var(--grey)'} />
+        <Svg.Code />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Download.js b/unlock-app/src/components/interface/buttons/lock/Download.js
@@ -6,7 +6,7 @@ export default class Download extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Download fill={'var(--grey)'} />
+        <Svg.Download />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Edit.js b/unlock-app/src/components/interface/buttons/lock/Edit.js
@@ -6,7 +6,7 @@ export default class Edit extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Edit fill={'var(--grey)'} />
+        <Svg.Edit />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Etherscan.js b/unlock-app/src/components/interface/buttons/lock/Etherscan.js
@@ -6,7 +6,7 @@ export default class Etherscan extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Etherscan fill={'var(--grey)'} />
+        <Svg.Etherscan />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/ExportLock.js b/unlock-app/src/components/interface/buttons/lock/ExportLock.js
@@ -6,7 +6,7 @@ export default class ExportLock extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Export fill={'var(--grey)'} />
+        <Svg.Export />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Upload.js b/unlock-app/src/components/interface/buttons/lock/Upload.js
@@ -6,7 +6,7 @@ export default class Upload extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Upload fill={'var(--grey)'} />
+        <Svg.Upload />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/interface/buttons/lock/Withdraw.js b/unlock-app/src/components/interface/buttons/lock/Withdraw.js
@@ -6,7 +6,7 @@ export default class Withdraw extends PureComponent {
   render() {
     return (
       <LockButton>
-        <Svg.Withdraw fill={'var(--grey)'} />
+        <Svg.Withdraw />
       </LockButton>
     )
   }

diff --git a/unlock-app/src/components/lock/Overlay.js b/unlock-app/src/components/lock/Overlay.js
@@ -40,9 +40,6 @@ Overlay.propTypes = {
 
 export default Overlay
 
-const Circle = styled.div`
-`
-
 const FullPage = styled.div`
   position: fixed; /* Sit on top of the page content */
   width: 100%; /* Full width (cover the whole page) */