refactoring and updating list item

ui/src/components/icon/index.js

@@ -1,36 +0,0 @@
-const React = require('react');
-const Styled = require('styled-components');
-
-const {
-  default: styled,
-  css
-} = Styled;
-
-const styles = css`
-  font-size: inherit;
-
-  ${props => props.style}
-`;
-
-const Icon = ({
-  name = 'beer',
-  className,
-  iconSet = 'fa',
-  style = '',
-}) => {
-  const Icon = require(`react-icons/lib/${iconSet}/${name}`);
-  const Component = styled(Icon)(styles);
-
-  return (
-    <Component className={className} />
-  );
-};
-
-Icon.propTypes = {
-  className: React.PropTypes.string,
-  iconSet: React.PropTypes.string.isRequired,
-  name: React.PropTypes.string.isRequired,
-  style: React.PropTypes.string,
-};
-
-module.exports = Icon;

ui/src/components/icon/readme.md

@@ -1,37 +0,0 @@
-# `<Icon>`
-
-## demo
-
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Icon = require('./index.js');
-const styles = require('./style.css');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Icon iconSet='fa' name='beer' />
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Icon = require('ui/icon');
-
-module.exports = () => {
-  return (
-    <Icon iconSet='fa' name='beer' />
-  );
-}
-```

ui/src/components/list/group-view.js

@@ -21,5 +21,5 @@ module.exports = styled(View)`
   padding-left: ${remcalc(23)};
   padding-right: ${remcalc(23)};
   padding-bottom: ${remcalc(5)};
-  background-color: ${colors.brandInactive};
+  background-color: ${colors.inactive.default};
 `;

ui/src/components/list/header.js

@@ -1,4 +1,5 @@
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 const Item = require('./item');
 const React = require('react');
 const Styled = require('styled-components');
@@ -7,6 +8,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  colors
+} = constants;
+
 const {
   default: styled
 } = Styled;
@@ -25,6 +30,11 @@ const StyledItem = styled(Item)`
   top: ${remcalc(-1)};
   left: ${remcalc(-1)};
   right: ${remcalc(-1)};
+  
+  & [name="list-item-subtitle"],
+  & [name="list-item-title"] {
+    color: ${colors.base.white};
+  }
 `;
 
 const addFromHeader = (children) => React.Children.map(children, (c) => {

ui/src/components/list/item.js

@@ -19,10 +19,10 @@ const {
 } = Styled;
 
 const paper = `
-  0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
-  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
-  0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
-  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
+  0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
+  0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark},
+  0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
+  0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark};
 `;
 
 const height = (props) => props.collapsed
@@ -52,8 +52,8 @@ const Item = styled(Row)`
   height: ${height};
   min-height: ${minHeight};
   box-shadow: ${shadow};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
-  background-color: ${colors.brandSecondary};
+  border: ${remcalc(1)} solid ${colors.base.grey};
+  background-color: ${colors.base.white};
   margin-bottom: ${marginBottom};
 `;
 

ui/src/components/list/options.js

@@ -22,8 +22,8 @@ const height = (props) => props.collapsed
   : remcalc(124);
 
 const borderLeftColor = (props) => !props.fromHeader
-  ? colors.borderSecondary
-  : colors.borderPrimary;
+  ? colors.base.greyLight
+  : colors.base.primary;
 
 const Nav = styled.nav`
   flex: 0 0 ${remcalc(47)};

ui/src/components/list/subtitle.js

@@ -1,13 +1,8 @@
-const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Title = require('./title');
 const React = require('react');
 const Styled = require('styled-components');
 
-const {
-  colors
-} = constants;
-
 const {
   remcalc
 } = fns;
@@ -20,10 +15,6 @@ const padding = (props) => !props.collapsed
   ? `0 ${remcalc(18)}`
   : 0;
 
-const color = (props) => props.fromHeader
-  ? colors.brandPrimaryColor
-  : '#646464';
-
 const display = (props) => !props.collapsed
   ? 'inline-block'
   : 'flex';
@@ -36,7 +27,6 @@ const Span = styled.span`
   font-style: normal;
   font-stretch: normal;
   font-size: ${remcalc(14)};
-  color: ${color};
 
   justify-content: flex-end;
 `;

ui/src/components/list/title.js

@@ -17,8 +17,8 @@ const {
 } = Styled;
 
 const color = (props) => !props.fromHeader
-  ? colors.brandSecondaryColor
-  : colors.brandPrimaryColor;
+  ? colors.base.secondary
+  : colors.base.primary;
 
 const padding = (props) => !props.collapsed
   ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`

ui/src/components/metric/close-button.js

@@ -24,17 +24,17 @@ const StyledButton = styled.button`
   display: flex;
   margin: 0;
   padding: ${remcalc(18)} ${remcalc(24)};
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
   float: right;
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryLight};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   cursor: pointer;
 `;
 
 const StyledIcon = styled(CloseIcon)`
-  fill: ${colors.brandPrimaryColor};
+  fill: ${colors.base.primary};
 `;
 
 const AddMetricButton = ({

ui/src/components/metric/graph.js

@@ -19,7 +19,7 @@ const Container = styled.div`
   position: relative;
   height: 100%;
   width: 100%;
-  background-color: ${colors.brandPrimaryColor};
+  background-color: ${colors.base.primary};
 `;
 
 const Canvas = styled.canvas`

ui/src/components/metric/header.js

@@ -22,8 +22,8 @@ const StyledHeader = styled.div`
   box-sizing: border-box;
   padding: 0;
   width: 100%;
-  background-color: ${colors.brandPrimaryDark};
-  border: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  background-color: ${colors.base.primaryDark};
+  border: solid ${remcalc(1)} ${colors.base.primaryDark};
 `;
 
 const Header = (props) => (

ui/src/components/metric/select.js

@@ -29,7 +29,7 @@ const SelectWrapper = styled.div`
   &:after {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid ${colors.brandPrimaryColor};
+    border-top: 5px solid ${colors.base.primary};
 
     ${pseudoEl({
       top: '28px',
@@ -44,10 +44,10 @@ const StyledSelect = styled.select`
   font-size:16px;
   text-align: right !important;
   border-radius: 0;
-  color: ${colors.brandPrimaryColor};
-  background-color: ${colors.brandPrimaryDark};
+  color: ${colors.base.primary};
+  background-color: ${colors.base.primaryLight};
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   -webkit-appearance: none;
   cursor: pointer;
 `;

ui/src/components/metric/settings-button.js

@@ -25,26 +25,26 @@ const StyledButton = styled(Button)`
   display: flex;
   margin: 0;
   padding: ${remcalc(18)} ${remcalc(24)};
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
   float: right;
-  background-color: ${colors.brandPrimaryDark};
+  background-color: ${colors.base.primaryLight};
   line-height: 1.5;
   border: none;
-  border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
 
   &:hover,
   &:focus,
   &:active,
   &:active:hover,
   &:active:focus {
-    background-color: ${colors.brandPrimaryDark};
+    background-color: ${colors.base.primaryLight};
     border: none;
-    border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
+    border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
   }
 `;
 
 const StyledIcon = styled(SettingsIcon)`
-  fill: ${colors.brandPrimaryColor};
+  fill: ${colors.base.primary};
   margin-right: ${remcalc(12)};
 `;
 

ui/src/components/metric/title.js

@@ -23,5 +23,5 @@ module.exports = styled.h3`
   font-weight: normal;
   font-style: normal;
   line-height: 1.5;
-  color: ${colors.brandPrimaryColor};
+  color: ${colors.base.primary};
 `;

ui/src/components/metric/view.js

@@ -23,7 +23,7 @@ const Container = styled.div`
   width: 100%;
   max-width: ${remcalc(940)};
   box-shadow: ${boxes.bottomShaddow};
-  border: 1px solid ${colors.borderSecondary};
+  border: 1px solid ${colors.base.greyLight};
 `;
 
 const View = (props) => (