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