Fixing fonts

frontend/webpack/base.js

@@ -71,6 +71,15 @@ module.exports = {
       loader: [
         'url-loader'
       ]
+    },
+    {
+      test: /\.(eot|svg|ttf|woff|woff2)$/,
+      exclude: /node_modules/,
+      loader: 'file-loader',
+      include: [
+        FRONTEND,
+        UI
+      ]
     }]
   }
 };

ui/src/components/base/global.js

@@ -1,10 +1,27 @@
 const Styled = require('styled-components');
+const fncs = require('../../shared/functions');
+
+const {
+  generateFonts
+} = fncs;
 
 const {
   css
 } = Styled;
 
+// The name that will be used in the 'font-family' property
+const fontFamilies = [
+  'LibreFranklin'
+];
+
+// The name the font file without the extension
+const fontFilenames = [
+  'librefranklin-webfont'
+];
+
 module.exports = css`
+  ${generateFonts(fontFamilies, fontFilenames)}
+
   html, body {
     font-size: 16px;
     margin: 0;

ui/src/components/base/index.js

@@ -15,25 +15,11 @@ const {
 } = Styled;
 
 const {
-  generateFonts,
   remcalc
 } = fncs;
 
-// The name that will be used in the 'font-family' property
-const fontFamilies = [
-  'LibreFranklin'
-];
-
-// The name the font file without the extension
-const fontFilenames = [
-  'librefranklin-webfont'
-];
-
 module.exports = styled.div`
-  ${generateFonts(fontFamilies, fontFilenames)};
+  font-family: 'LibreFranklin', sans-serif;
-
-  font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
   color: ${colors.fonts.regular};

ui/src/components/horizontal-list/li.js

@@ -1,23 +1,34 @@
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 const Styled = require('styled-components');
 
 const {
   remcalc
 } = fns;
 
+const {
+  colors
+} = constants;
+
 const {
   default: styled
 } = Styled;
 
 module.exports = styled.li`
   display: inline-block;
-  margin-right: ${remcalc(10)};
+  margin-right: ${remcalc(64)};
   padding-top: ${remcalc(10)};
   padding-bottom: ${remcalc(10)};
 
-  & a.active {
+  & a {
-    cursor: default;
+    color: ${colors.fonts.regular};
-    color: #373A3C;
     text-decoration: none;
   }
+
+  & a.active {
+    cursor: default;
+    color: ${colors.brandPrimaryLink};
+    border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
+    padding-bottom: ${remcalc(6)};
+  }
 `;

ui/src/components/horizontal-list/story.js

@@ -0,0 +1,38 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base= require('../base');
+const Li = require('./li');
+const Ul = require('./ul');
+
+storiesOf('Unordered List', module)
+  .add('Default', () => (
+    <Base>
+      <Ul>
+        <Li>
+          <a className="active" href="">
+            <span>
+              One
+            </span>
+          </a>
+        </Li>
+        <Li>
+          <a href="">
+            <span>
+              Two
+            </span>
+          </a>
+        </Li>
+        <Li>
+          <a href="">
+            <span>
+              Three
+            </span>
+          </a>
+        </Li>
+      </Ul>
+    </Base>
+  ));

ui/src/shared/constants/colors.js

@@ -11,7 +11,8 @@ const brandPrimary = {
   borderPrimaryDark: '#2531BC',
   borderPrimaryDarkest: '#062BA0',
   brandPrimaryColor: '#FFFFFF',
-  brandPrimaryLink: '#364acd'
+  brandPrimaryLink: '#364ACD',
+  brandPrimaryLinkUnderline: '#3B47CC'
 };
 
 const brandSecondary = {
@@ -22,7 +23,8 @@ const brandSecondary = {
   borderSecondaryDark: '#D8D8D8',
   borderSecondaryDarkest: '#D8D8D8',
   brandSecondaryColor: '#464646',
-  brandSecondaryLink: '#ffffff'
+  brandSecondaryLink: '#FFFFFF',
+  brandSecondaryLinkUnderline: '#FFFFFF'
 };
 
 const brandInactive = {

ui/src/shared/functions.js

@@ -15,24 +15,29 @@ const rndId = (_code) => {
 };
 
 const generateFonts = (fontFamilies, fontFilenames) => {
-  const pathToFont = '../../shared/fonts/';
+  const pathToFont = './fonts/';
   let fontCSS = '';
 
   fontFamilies.forEach( (fontFamily, i) => {
+    const eot = require(`${pathToFont + fontFilenames[i]}.eot`);
+    const woff = require(`${pathToFont + fontFilenames[i]}.woff`);
+    const woff2 = require(`${pathToFont + fontFilenames[i]}.woff2`);
+    const ttf = require(`${pathToFont + fontFilenames[i]}.ttf`);
+    const svg = require(`${pathToFont + fontFilenames[i]}.svg`);
     fontCSS += `
       @font-face {
-        font-family: ${fontFamily};
+        font-family: '${fontFamily}';
-        src: url(${pathToFont + fontFilenames[i]}.eot);
+        src: url('${eot}'),
-        src: url(${pathToFont + fontFilenames[i]}.eot?#iefix) 
+          url('${eot}?#iefix')
-             format('embedded-opentype');
+               format('embedded-opentype'),
-        src: url(${pathToFont + fontFilenames[i]}.woff) 
+          url('${woff}')
-             format('woff');
+               format('woff'),
-        src: url(${pathToFont + fontFilenames[i]}.woff2) 
+          url('${woff2}')
-             format('woff2');
+               format('woff2'),
-        src: url(${pathToFont + fontFilenames[i]}.ttf) 
+          url('${ttf}')
-             format('truetype');
+               format('truetype'),
-        src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily}) 
+          url('${svg}#${fontFamily}')
-             format('svg');
+               format('svg')
         font-weight: normal;
         font-style: normal;
       }