From 078ec20aafb0734487b1c3b9d6feff473d18431e Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 2 Feb 2017 15:48:45 +0000
Subject: [PATCH] updating metric component - removed !importants and used new
 constants

---
 ui/src/components/add-metric/description.js | 2 +-
 ui/src/components/add-metric/link.js        | 2 +-
 ui/src/components/add-metric/tile.js        | 4 ++--
 ui/src/components/add-metric/title.js       | 2 +-
 ui/src/components/anchor/index.js           | 8 ++++----
 ui/src/components/button/index.js           | 4 ++--
 ui/src/components/horizontal-list/li.js     | 6 +++---
 ui/src/shared/constants/boxes.js            | 4 ++--
 ui/src/shared/constants/colors.js           | 6 +++---
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/add-metric/description.js b/ui/src/components/add-metric/description.js
index d47fe2ad..72aa0d89 100644
--- a/ui/src/components/add-metric/description.js
+++ b/ui/src/components/add-metric/description.js
@@ -12,7 +12,7 @@ const {
 
 const StyledDescription = styled.p`
   margin: 0;
-  color: ${colors.regular};
+  color: ${colors.base.secondary};
 `;
 
 const Description = (props) => (
diff --git a/ui/src/components/add-metric/link.js b/ui/src/components/add-metric/link.js
index d689593b..e9535a9a 100644
--- a/ui/src/components/add-metric/link.js
+++ b/ui/src/components/add-metric/link.js
@@ -6,7 +6,7 @@ const {
 } = Styled;
 
 const StyledLink = styled.a`
-  text-decoration: underline !important;
+  text-decoration: underline;
 `;
 
 const Link = ({
diff --git a/ui/src/components/add-metric/tile.js b/ui/src/components/add-metric/tile.js
index 50f60f39..955b5657 100644
--- a/ui/src/components/add-metric/tile.js
+++ b/ui/src/components/add-metric/tile.js
@@ -28,8 +28,8 @@ const StyledTile = styled.div`
   width: ${remcalc(300)};
   height: ${remcalc(247)};
   box-shadow: ${boxes.bottomShaddow};
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
-  background-color: ${colors.brandSecondary};
+  border: ${remcalc(1)} solid ${colors.base.greyLight};
+  background-color: ${colors.base.white};
 
   ${breakpoints.small`
     width: ${remcalc(300)};
diff --git a/ui/src/components/add-metric/title.js b/ui/src/components/add-metric/title.js
index dedda96e..c4a00e88 100644
--- a/ui/src/components/add-metric/title.js
+++ b/ui/src/components/add-metric/title.js
@@ -12,7 +12,7 @@ const {
 
 const StyledTitle = styled.h4`
   margin: 0;
-  color: ${colors.semibold};
+  color: ${colors.fonts.semibold};
 `;
 
 const Title = ({
diff --git a/ui/src/components/anchor/index.js b/ui/src/components/anchor/index.js
index 758ea827..655e09c2 100644
--- a/ui/src/components/anchor/index.js
+++ b/ui/src/components/anchor/index.js
@@ -3,16 +3,16 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  colors
-} = constants;
+  base,
+} = constants.colors;
 
 const {
   default: styled
 } = Styled;
 
 const color = (props) => props.secondary
-  ? colors.brandSecondaryLink
-  : colors.brandPrimaryLink;
+  ? base.secondary
+  : base.primary;
 
 const Anchor = styled.a`
   color: ${color} !important;
diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index f412430c..ba027867 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -39,8 +39,8 @@ const backgroundActive = match({
 }, base.primaryDark);
 
 const border = match({
-  secondary: base.white,
-  disabled: inactive.default
+  secondary: base.greyLight,
+  disabled: inactive.greyLight
 }, base.primary);
 
 const borderHover = match({
diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js
index 70ab8303..75bf4006 100644
--- a/ui/src/components/horizontal-list/li.js
+++ b/ui/src/components/horizontal-list/li.js
@@ -21,14 +21,14 @@ module.exports = styled.li`
   padding-bottom: ${remcalc(10)};
 
   & a {
-    color: ${colors.fonts.regular};
+    color: ${colors.base.primary};
     text-decoration: none;
   }
 
   & a.active {
     cursor: default;
-    color: ${colors.brandPrimaryLink};
-    border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
+    color: ${colors.base.primary};
+    border-bottom: 2px solid ${colors.base.primary};
     padding-bottom: ${remcalc(6)};
   }
 `;
diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js
index c01676a8..30a7efd1 100644
--- a/ui/src/shared/constants/boxes.js
+++ b/ui/src/shared/constants/boxes.js
@@ -16,7 +16,7 @@ module.exports = {
   insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
   border: {
     checked: `${remcalc(1)} solid ${base.primary}`,
-    unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
-    confirmed: `${remcalc(1)} solid ${base.secondaryLight}`
+    unchecked: `${remcalc(1)} solid ${base.greyLight}`,
+    confirmed: `${remcalc(1)} solid ${base.greyLight}`
   }
 };
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index db9490c6..40b78b0a 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -14,8 +14,8 @@ const base = {
   secondaryLight: '#919191',
   white: '#FFFFFF',
   grey:  '#f8f8f8',
-  greyDark: '#e9e9e9',
-  greyLight: '#919191',
+  greyLight: '#e9e9e9',
+  greyDark: '#919191',
   red: '#DA4B42',
   yellow: '#E4A800',
   green: '#00AF66',
@@ -28,7 +28,7 @@ const fonts = {
 
 const inactive = {
   default: '#FAFAFA',
-  border: '#D8D8D8',
+  border: base.greyLight,
   text: base.greyLight
 };