updating metric component - removed !importants and used new constants

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) => (

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 = ({

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)};

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 = ({

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;

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({

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)};
   }
 `;

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}`
   }
 };

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
 };