not using sized SVG components so that they're more flexible (#255)

unlock-app/package.json

@@ -62,6 +62,6 @@
     "eject": "react-scripts eject",
     "lint": "./node_modules/eslint/bin/eslint.js .",
     "storybook": "start-storybook -p 9001 -c .storybook",
-    "svg-2-components": "./node_modules/@svgr/cli/bin/svgr --icon -d src/components/interface/icons/ public/images/icons/"
+    "svg-2-components": "./node_modules/@svgr/cli/bin/svgr --no-dimensions -d src/components/interface/icons/ public/images/icons/"
   }
 }

unlock-app/src/__tests__/components/helpers/Balance.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from 'enzyme'
 // Note, we use name import to import the non connected version of the component for testing
 import { Balance } from '../../../components/helpers/Balance'
 
@@ -8,21 +8,19 @@ describe('Balance Component', () => {
   const amount = '100000000'
   const unit = 'szabo'
 
-  const wrapper = shallow(<Balance
+  const wrapper = render(<Balance
     amount={amount}
     unit={unit} />)
 
-  const wrapperNoSymbol = shallow(<Balance
-    amount={amount}
-    unit={unit}
-    symbol={false} />)
-
   it('shows the balance in Eth', () => {
-    expect(wrapper.text()).toEqual('Ξ 100')
+    expect(wrapper.text()).toEqual('100')
   })
 
-  it('respects request to hide Eth symbol', () => {
-    expect(wrapperNoSymbol.text()).toEqual('100')
+  /**
+   * Probably a bit brittle...
+   */
+  it('shows the Eth icon', () => {
+    expect(wrapper.find('svg').toString()).toEqual('<svg width="1em" height="1em"><path d="M1 6V5h5v1H1zm-1 5v-1h7v1H0zM0 1V0h7v1H0z" fill="#333" fill-rule="evenodd"/></svg>')
   })
 
 })

unlock-app/src/components/creator/CreatorLock.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import UnlockPropTypes from '../../propTypes'
-import CreatorLockSaved from './lock/CreatorLockSaved'
+import LockIconBar from './lock/LockIconBar'
 import CreatorLockConfirming from './lock/CreatorLockConfirming'
 import Icon from '../lock/Icon'
 import Duration from '../helpers/Duration'
-import Icons from '../interface/icons'
 import Balance from '../helpers/Balance'
 import styled from 'styled-components'
 
@@ -15,7 +14,7 @@ export function CreatorLock({ lock, status = 'deployed' }) {
   let lockComponentStatusBlock
 
   if (status === 'deployed') { // the transaction was mined and confirmed at least 12 times
-    lockComponentStatusBlock = <CreatorLockSaved lock={lock} />
+    lockComponentStatusBlock = <LockIconBar lock={lock} />
   }
   if (status === 'confirming') { // the transaction was mined but hasn't yet been confirmed at least 12 times
     lockComponentStatusBlock = <CreatorLockConfirming lock={lock} />
@@ -25,21 +24,17 @@ export function CreatorLock({ lock, status = 'deployed' }) {
   // TODO add all-time balance to lock
   return (
     <LockRow status={status}>
-      <LockIcon><Icon lock={lock} address={lock.address} size={'3'} /></LockIcon>
+      <Icon lock={lock} address={lock.address} />
       <LockName>
         {name}
         <LockAddress>{lock.address}</LockAddress>
       </LockName>
       <LockDuration>
         <Duration seconds={lock.expirationDuration} />
       </LockDuration>
-      <LockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</LockKeys>
-      <LockValue>
-        <LockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></LockValueEth>
-      </LockValue>
-      <LockValue>
-        <LockValueMain><LockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></LockValueEth></LockValueMain>
-      </LockValue>
+      <LockKeys>{outstandingKeys}/{lock.maxNumberOfKeys}</LockKeys>
+      <Balance amount={lock.keyPrice} />
+      <Balance amount={lock.balance} />
       {lockComponentStatusBlock}
     </LockRow>
   )
@@ -53,26 +48,18 @@ CreatorLock.propTypes = {
 export default CreatorLock
 
 const LockRow = styled.div`
-  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-  grid-gap: 8px;
   font-family: 'IBM Plex Mono', 'Courier New', Serif;
   font-weight: 200;
+  min-height: 60px;
+  padding-left: 8px;
   color: var(--slate);
-  padding: 10px 0 10px 0;
-  height: 64px;
+  font-size: 14px;
+  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
   display: grid;
-  ${(props) => {
-    if (props.status == 'confirming') {
-      return 'grid-template-columns: 1fr 2fr repeat(3, 1fr) 2fr 1fr;'
-    } else {
-      return 'grid-template-columns: 1fr 2fr repeat(4, 1fr) 2fr;'
-    }
-  }}
-`
-
-const LockIcon = styled.div`
-  padding-left: 5px;
+  grid-gap: 16px;
+  grid-template-columns: 32px minmax(100px, 3fr) repeat(4, minmax(56px, 100px)) minmax(174px, 1fr);
+  align-items: center;
 `
 
 const LockName = styled.div`
@@ -83,9 +70,8 @@ const LockName = styled.div`
 const LockAddress = styled.div`
   color: var(--grey);
   font-weight: 200;
-  font-size: 0.75em;
-  max-width: 150px;
   white-space: nowrap;
+  font-size: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
 `
@@ -96,9 +82,6 @@ const LockDuration = styled.div`
 const LockKeys = styled.div`
 `
 
-const LockValue = styled.div`
-`
-
 /* Saving for use with sub-values that need to be added in a future PR
 const LockValueSub = styled.div`
   font-size: 0.6em;
@@ -107,21 +90,10 @@ const LockValueSub = styled.div`
 `
 */
 
-const LockValueMain = styled.div`
-  font-weight: bold;
-`
-
-const LockValueEth = styled.div`
-`
-
 /* Saving for use with sub-values that need to be added in a future PR
 const LockValueUsd = styled.div`
   &:before {
     content: "$ ";
   }
 `
 */
-
-const LockCurrency = styled.span`
-  font-size: 0.7em;
-`

unlock-app/src/components/creator/lock/CreatorLockConfirming.js

@@ -5,9 +5,7 @@ import UnlockPropTypes from '../../../propTypes'
 export function CreatorLockConfirming({ lock }) {
   return (
     <LockStatus>
-      <LockStatusLabel>
-        Pending
-      </LockStatusLabel>
+      Pending
     </LockStatus>
   )
 }
@@ -19,17 +17,12 @@ CreatorLockConfirming.propTypes = {
 export default CreatorLockConfirming
 
 const LockStatus = styled.div`
-  padding: -10px;
-  margin: 0;
-  margin-top: -10px;
-  margin-bottom: -10px;
+  align-self: stretch;
+  justify-content: center;
+  align-content: center;
+  display: grid;
   background-color: var(--lightgrey);
-  text-align: center;
   font-family: "IBM Plex Sans", sans-serif;
   font-weight: 200;
   color: var(--grey);
 `
-
-const LockStatusLabel = styled.div`
-  margin-top: 30px;
-`

unlock-app/src/components/creator/lock/LockIconBar.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+import UnlockPropTypes from '../../../propTypes'
+import Icons from '../../interface/icons'
+
+export function LockIconBar({ lock }) {
+  return (
+    <IconBar>
+      <Button>
+        <Icons.Withdraw width="100%" height="100%" />
+      </Button>
+      <Button>
+        <Icons.Edit width="100%" height="100%" />
+      </Button>
+      <Button>
+        <Icons.Download width="100%" height="100%" />
+      </Button>
+      <Button>
+        <Icons.Code width="100%" height="100%" />
+      </Button>
+    </IconBar>
+  )
+}
+
+LockIconBar.propTypes = {
+  lock: UnlockPropTypes.lock,
+}
+
+export default LockIconBar
+
+const IconBar = styled.div`
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(4, 24px);
+`
+
+const Button = styled.a`
+  height: 24px;
+  display: grid;
+`

unlock-app/src/components/helpers/Balance.js

@@ -1,19 +1,23 @@
+import styled from 'styled-components'
 import React from 'react'
 import PropTypes from 'prop-types'
 import Web3Utils from 'web3-utils'
+import Icons from '../interface/icons'
 
 /**
  * Component which shows a balance in Eth
  * @param {*} amount: the amount to convert to Eth
  * @param {string} unit: the unit of the amount to convert to Eth
  */
-export function Balance({ amount, unit = 'wei', symbol=true }) {
+export function Balance({ amount, unit = 'wei' }) {
   let inWei = Web3Utils.toWei(amount || '0', unit)
   let inEth = Web3Utils.fromWei(inWei, 'ether')
-  if (symbol) {
-    inEth = 'Ξ ' + inEth
-  }
-  return (<span>{inEth}</span>)
+  return (<BalanceWithUnit>
+    <Unit>
+      <Icons.Eth width="1em" height="1em" />
+    </Unit>
+    <Amount>{inEth}</Amount>
+  </BalanceWithUnit>)
 }
 
 Balance.propTypes = {
@@ -22,4 +26,18 @@ Balance.propTypes = {
   symbol: PropTypes.bool,
 }
 
+const BalanceWithUnit = styled.div`
+  display: grid;
+  align-content: stretch;
+  grid-auto-flow: column;
+`
+
+const Amount = styled.span``
+
+const Unit = styled.span`
+  display: grid;
+  align-items: end;
+  justify-items: end;
+`
+
 export default Balance

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

@@ -29,10 +29,9 @@ Header.propTypes = {
 const TopHeader = styled.header`
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr repeat(3, 24px);
   grid-auto-flow: column;
   align-items: center;
-  font-size: 24px;
 `
 
 const Logo = styled.span`
@@ -42,6 +41,6 @@ const Logo = styled.span`
   `
 
 const Button = styled.a`
+  height: 24px;
   display: grid;
-  align-items: center;
 `

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

@@ -29,14 +29,13 @@ Layout.propTypes = {
 
 const Container = styled.div`
   display: grid;
-  padding: 16px;
   grid-template-columns: 1fr minmax(300px, 65%) 1fr;
 `
 
 const Left = styled.div`
   display: grid;
-  font-size: 56px;
-  align-items: top;
+  align-items: start;
+  height: 24px;
 `
 
 const Right = styled.div`

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const About = props => (
-  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
+  <svg {...props}>
     <path
       fill="#A6A6A6"
       d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm1.2 18h-2.4v-7.2h2.4V18zm0-9.6h-2.4V6h2.4v2.4z"

unlock-app/src/components/interface/icons/Code.js

@@ -1,13 +1,7 @@
 import React from 'react'
 
 const Code = props => (
-  <svg
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 24 24"
-    width="1em"
-    height="1em"
-    {...props}
-  >
+  <svg xmlnsXlink="http://www.w3.org/1999/xlink" {...props}>
     <defs>
       <circle id="a" cx={12} cy={12} r={12} />
       <path