diff --git a/frontend/test/_hook.js b/frontend/test/_hook.js
index f7a26ca3..c17f5dd6 100644
--- a/frontend/test/_hook.js
+++ b/frontend/test/_hook.js
@@ -3,6 +3,11 @@ const jsdom = require('jsdom');
const register = require('babel-register');
hook.hook('.png', () => '');
+hook.hook('.eot', () => '');
+hook.hook('.woff', () => '');
+hook.hook('.woff2', () => '');
+hook.hook('.ttf', () => '');
+hook.hook('.svg', () => '');
register({
extensions: ['.js']
@@ -14,4 +19,4 @@ if (!global.document || !global.window) {
global.document = jsdom.jsdom('');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
-}
\ No newline at end of file
+}
diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js
index 2bbdc38a..8b0b5919 100644
--- a/frontend/webpack/base.js
+++ b/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
+ ]
}]
}
};
diff --git a/ui/docs/webpack/base.js b/ui/docs/webpack/base.js
index 6a7d95d6..49584cbb 100644
--- a/ui/docs/webpack/base.js
+++ b/ui/docs/webpack/base.js
@@ -68,6 +68,12 @@ module.exports = {
exclude: [/node_modules/g],
include: INCLUDE,
loader: 'svg-react'
+ },
+ {
+ test: /\.(eot|svg|ttf|woff|woff2)$/,
+ exclude: /node_modules/,
+ loader: 'file-loader',
+ include: INCLUDE
}]
}
};
diff --git a/ui/package.json b/ui/package.json
index 99eaf728..377fe482 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -56,6 +56,7 @@
"eslint-plugin-standard": "^2.0.1",
"jsdom": "^9.9.1",
"memory-fs": "^0.4.1",
+ "node-hook": "^0.4.0",
"nyc": "^10.0.0",
"pre-commit": "^1.2.2",
"react-addons-test-utils": "^15.4.1",
@@ -69,7 +70,8 @@
"failFast": true,
"cache": false,
"require": [
- "babel-register"
+ "babel-register",
+ "./test/_hook.js"
],
"babel": "inherit"
},
diff --git a/ui/src/components/base/global.js b/ui/src/components/base/global.js
index 2e47091a..5c6c3443 100644
--- a/ui/src/components/base/global.js
+++ b/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;
diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index f0fd7f78..abd96976 100644
--- a/ui/src/components/base/index.js
+++ b/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', -apple-system, BlinkMacSystemFont,
- "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ font-family: 'LibreFranklin', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: ${colors.fonts.regular};
diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js
index 0e7d52c5..7b7e1661 100644
--- a/ui/src/components/horizontal-list/li.js
+++ b/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 {
- cursor: default;
- color: #373A3C;
+ & a {
+ color: ${colors.fonts.regular};
text-decoration: none;
}
+
+ & a.active {
+ cursor: default;
+ color: ${colors.brandPrimaryLink};
+ border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
+ padding-bottom: ${remcalc(6)};
+ }
`;
diff --git a/ui/src/components/horizontal-list/story.js b/ui/src/components/horizontal-list/story.js
new file mode 100644
index 00000000..a0fe085a
--- /dev/null
+++ b/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', () => (
+
+
+
+ ));
diff --git a/ui/src/components/topology/index.js b/ui/src/components/topology/index.js
index 5a8114e8..c4f9d7d4 100644
--- a/ui/src/components/topology/index.js
+++ b/ui/src/components/topology/index.js
@@ -81,7 +81,7 @@ const StyledSVGContainer = styled.svg`
}
.health, .health_warn {
- font-family: "Libre Franklin";
+ font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: bold;
font-style: normal;
@@ -94,7 +94,7 @@ const StyledSVGContainer = styled.svg`
}
.stat {
- font-family: "Libre Franklin";
+ font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@@ -103,7 +103,7 @@ const StyledSVGContainer = styled.svg`
}
.node_statistics {
- font-family: "Libre Franklin";
+ font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@@ -117,7 +117,7 @@ const StyledSVGContainer = styled.svg`
}
.primary, .secondary {
- font-family: "Libre Franklin";
+ font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@@ -126,7 +126,7 @@ const StyledSVGContainer = styled.svg`
}
.info_text {
- font-family: "Libre Franklin";
+ font-family: "LibreFranklin";
font-size: ${remcalc(16)};
font-weight: 600;
font-style: normal;
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 380ff3a5..d5f20123 100644
--- a/ui/src/shared/constants/colors.js
+++ b/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 = {
diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js
index c8c1512b..b33f48ed 100644
--- a/ui/src/shared/functions.js
+++ b/ui/src/shared/functions.js
@@ -15,26 +15,31 @@ 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};
- src: url(${pathToFont + fontFilenames[i]}.eot);
- src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
- format('embedded-opentype');
- src: url(${pathToFont + fontFilenames[i]}.woff)
- format('woff');
- src: url(${pathToFont + fontFilenames[i]}.woff2)
- format('woff2');
- src: url(${pathToFont + fontFilenames[i]}.ttf)
- format('truetype');
- src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
- format('svg');
+ font-family: '${fontFamily}';
+ src: url('${eot}'),
+ url('${eot}?#iefix')
+ format('embedded-opentype'),
+ url('${woff}')
+ format('woff'),
+ url('${woff2}')
+ format('woff2'),
+ url('${ttf}')
+ format('truetype'),
+ url('${svg}#${fontFamily}')
+ format('svg')
font-weight: normal;
- font-style: normal;
+ font-style: normal;
}
`;
});
diff --git a/ui/test/_hook.js b/ui/test/_hook.js
new file mode 100644
index 00000000..bc2f79e2
--- /dev/null
+++ b/ui/test/_hook.js
@@ -0,0 +1,7 @@
+const hook = require('node-hook');
+
+hook.hook('.eot', () => '');
+hook.hook('.woff', () => '');
+hook.hook('.woff2', () => '');
+hook.hook('.ttf', () => '');
+hook.hook('.svg', () => '');
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 0316ccc2..685d46e8 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -4407,6 +4407,10 @@ node-fetch@^1.0.1:
encoding "^0.1.11"
is-stream "^1.0.1"
+node-hook@^0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/node-hook/-/node-hook-0.4.0.tgz#782a3b3b4873388f93d087cd2971162f24eb6f2d"
+
node-libs-browser@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"