Adding header to locks dashboard (#268)

* Adding header to locks dashboard * Using shared grid variable
unlock-protocol · Sep 25, 2018 · 20d2d2a · 20d2d2a
1 parent 8b60e75
commit 20d2d2a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/unlock-app/src/components/creator/CreatorLock.js b/unlock-app/src/components/creator/CreatorLock.js
@@ -47,6 +47,8 @@ CreatorLock.propTypes = {
 
 export default CreatorLock
 
+export const LockRowGrid = 'grid-template-columns: 32px minmax(100px, 3fr) repeat(4, minmax(56px, 100px)) minmax(174px, 1fr);'
+
 const LockRow = styled.div`
   font-family: 'IBM Plex Mono', 'Courier New', Serif;
   font-weight: 200;
@@ -58,7 +60,7 @@ const LockRow = styled.div`
   border-radius: 4px;
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: 32px minmax(100px, 3fr) repeat(4, minmax(56px, 100px)) minmax(174px, 1fr);
+  ${LockRowGrid}
   align-items: center;
   margin-bottom: 32px;
 `

diff --git a/unlock-app/src/components/creator/CreatorLocks.js b/unlock-app/src/components/creator/CreatorLocks.js
@@ -2,12 +2,22 @@ import UnlockPropTypes from '../../propTypes'
 
 import React, { Component } from 'react'
 import { getLockStatusString } from '../../helpers/Locks'
-import CreatorLock from './CreatorLock'
+import CreatorLock, { LockRowGrid } from './CreatorLock'
+import styled from 'styled-components'
 
 export default class CreatorLocks extends Component {
   render() {
     return (
       <React.Fragment>
+        <LockHeaderRow>
+          <LockHeader>Locks</LockHeader>
+          <LockMinorHeader>Name / Address</LockMinorHeader>
+          <LockMinorHeader>Duration</LockMinorHeader>
+          <LockMinorHeader>Quantity</LockMinorHeader>
+          <LockMinorHeader>Price</LockMinorHeader>
+          <LockMinorHeader>Balance / Earnings</LockMinorHeader>
+          <LockHeaderButton>&nbsp;</LockHeaderButton>
+        </LockHeaderRow>
         {Object.values(this.props.locks).map((lock, index) => {
           let lockStatus = getLockStatusString(this.props.transactions, lock.address)
           return(<CreatorLock key={index} lock={lock} status={lockStatus}/>)
@@ -21,3 +31,40 @@ CreatorLocks.propTypes = {
   transactions: UnlockPropTypes.transactions,
   locks: UnlockPropTypes.locks,
 }
+
+const LockHeaderRow = styled.div`
+  font-family: 'IBM Plex Mono', 'Courier New', Serif;
+  font-weight: 200;
+  padding-left: 8px;
+  font-size: 14px;
+  display: grid;
+  grid-gap: 16px;
+  ${LockRowGrid}
+  align-items: center;
+`
+
+const LockHeader = styled.div`
+  font-family: 'IBM Plex Sans';
+  font-size: 13px;
+  font-weight: bold;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: var(--grey);
+`
+
+const LockMinorHeader = styled.div`
+  font-family: 'IBM Plex Mono';
+  font-size: 8px;
+  font-weight: thin;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--darkgrey);
+`
+
+const LockHeaderButton = styled.div`
+`
diff --git a/unlock-app/src/components/helpers/Balance.js b/unlock-app/src/components/helpers/Balance.js
@@ -37,7 +37,6 @@ const Amount = styled.span``
 const Unit = styled.span`
   display: grid;
   align-items: end;
-  justify-items: end;
 `
 
 export default Balance