From 4953ae36ea73f4a756fde7d7e8063d4e356078bf Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Fri, 13 Jan 2017 17:57:42 +0000 Subject: [PATCH] Fixing fonts --- frontend/webpack/base.js | 9 +++++ ui/src/components/base/global.js | 17 ++++++++++ ui/src/components/base/index.js | 16 +-------- ui/src/components/horizontal-list/li.js | 19 ++++++++--- ui/src/components/horizontal-list/story.js | 38 ++++++++++++++++++++++ ui/src/components/topology/index.js | 10 +++--- ui/src/shared/constants/colors.js | 6 ++-- ui/src/shared/functions.js | 33 +++++++++++-------- 8 files changed, 108 insertions(+), 40 deletions(-) create mode 100644 ui/src/components/horizontal-list/story.js 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; } `; });