updating more names in small components

ui/src/components/form/label.js

@@ -20,5 +20,5 @@ module.exports = styled.label`
   font-weight: 600;
   font-style: normal;
   font-stretch: normal;
-  color: ${colors.brandSecondaryColor};
+  color: ${colors.base.secondary};
 `;

ui/src/components/form/outlet.js

@@ -16,11 +16,11 @@ const {
 } = Styled;
 
 const colorWithDisabled = (props) => props.disabled
-  ? colors.brandInactiveColor
+  ? colors.inactive.default
   : colors.fonts.regular;
 
 const colorWithDefaultValue = (props) => props.value === props.defaultValue
-  ? colors.brandInactiveColor
+  ? colors.inactive.default
   : colorWithDisabled(props);
 
 const color = (props) => props.defaultValue
@@ -46,7 +46,7 @@ module.exports = css`
   padding: ${paddingTop} ${remcalc(18)};
 
   border-radius: ${boxes.borderRadius};
-  background-color: ${colors.brandPrimaryColor};
+  background-color: ${colors.base.primary};
   box-shadow: ${boxes.insetShaddow};
   border: ${boxes.border.unchecked};
 
@@ -61,7 +61,7 @@ module.exports = css`
   outline: 0;
 
   &:focus {
-    border-color: ${colors.brandPrimary};
+    border-color: ${colors.base.primary};
     outline: 0;
   }
 `;

ui/src/components/icon/index.js

@@ -8,19 +8,21 @@ const {
 
 const styles = css`
   font-size: inherit;
+
+  ${props => props.style}
 `;
 
 const Icon = ({
   name = 'beer',
   className,
   iconSet = 'fa',
-  style
+  style = '',
 }) => {
   const Icon = require(`react-icons/lib/${iconSet}/${name}`);
   const Component = styled(Icon)(styles);
 
   return (
-    <Component className={className} style={style} />
+    <Component className={className} />
   );
 };
 
@@ -28,7 +30,7 @@ Icon.propTypes = {
   className: React.PropTypes.string,
   iconSet: React.PropTypes.string.isRequired,
   name: React.PropTypes.string.isRequired,
-  style: React.PropTypes.object
+  style: React.PropTypes.string,
 };
 
 module.exports = Icon;

ui/src/components/icon/style.css

@@ -1,3 +0,0 @@
-.icon {
-  font-size: inherit;
-}