Fixing font colours and colours of list items

frontend/src/components/header/index.js

@@ -66,6 +66,8 @@ const StyledTooltipWrapper = styled.div`
 `;
 
 const StyledName = styled.span`
+  color: #646464;
+  font-size: ${remcalc(16)}
   position: relative;
   top: ${remcalc(-12)};
 `;

ui/src/components/button/index.js

@@ -69,14 +69,6 @@ const style = css`
   padding: ${remcalc('14 16')};
   position: relative;
 
-  font-family: -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    sans-serif;
-
   font-size: ${remcalc(16)};
   font-weight: 400;
   text-align: center;

ui/src/components/list/header.js

@@ -1,13 +1,8 @@
-const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Item = require('./item');
 const React = require('react');
 const Styled = require('styled-components');
 
-const {
-  colors
-} = constants;
-
 const {
   remcalc
 } = fns;
@@ -19,8 +14,9 @@ const {
 const StyledItem = styled(Item)`
   position: absolute;
 
-  background-color: ${colors.brandPrimary};
-  border: solid ${remcalc(1)} ${colors.borderPrimary};
+  background-color: #3B4AAF;
+
+  border: solid ${remcalc(1)} #2D3884;
   box-shadow: none;
 
   width: calc(100% + ${remcalc(2)});