diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index ca982557..20345996 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -51,7 +51,7 @@ const StyledAvatarWrapper = styled.div` const StyledName = styled.span` color: ${colors.base.secondaryDark}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; height: ${remcalc(66)}; position: relative; top: ${remcalc(-12)}; diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index fc4c4cf5..12c65edb 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -53,7 +53,7 @@ const OrgName = styled.span` const NavLi = styled(NavLink)` display: inline-block; text-decoration: none; - font-size: 16px; + font-size: 15px; `; const StyledTabs = styled(Tabs)` diff --git a/frontend/src/components/new-project/billing.js b/frontend/src/components/new-project/billing.js index aeb835a4..8175027f 100644 --- a/frontend/src/components/new-project/billing.js +++ b/frontend/src/components/new-project/billing.js @@ -26,7 +26,7 @@ const Title = styled(H2)` const Description = styled.p` margin-bottom: ${remcalc(24)} - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; color: ${colors.brandSecondaryColor}; max-width: ${remcalc(380)}; `; diff --git a/frontend/src/components/new-project/index.js b/frontend/src/components/new-project/index.js index a2851005..1121a861 100644 --- a/frontend/src/components/new-project/index.js +++ b/frontend/src/components/new-project/index.js @@ -25,7 +25,7 @@ const Title = styled(H2)` const Description = styled.p` margin-bottom: ${remcalc(24)} - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; color: ${colors.brandSecondaryColor}; max-width: ${remcalc(380)}; `; diff --git a/frontend/src/components/new-project/new-billing.js b/frontend/src/components/new-project/new-billing.js index b8ec60ea..b2543b13 100644 --- a/frontend/src/components/new-project/new-billing.js +++ b/frontend/src/components/new-project/new-billing.js @@ -32,7 +32,7 @@ const Title = styled(H2)` const Description = styled.p` margin-bottom: ${remcalc(24)} - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; color: ${colors.brandSecondaryColor}; max-width: ${remcalc(380)}; `; diff --git a/frontend/src/components/services/topology-filter.js b/frontend/src/components/services/topology-filter.js index 2104c4af..b0f286dd 100644 --- a/frontend/src/components/services/topology-filter.js +++ b/frontend/src/components/services/topology-filter.js @@ -44,7 +44,7 @@ const TopologyFilter = ({ secondary onClick={handleAddService} > - Add A Service + Add a service ); diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js index 559d789c..69b77823 100644 --- a/ui/src/components/base-elements/index.js +++ b/ui/src/components/base-elements/index.js @@ -15,27 +15,27 @@ const elements = [{ font-stretch: normal; margin: 0; - ${typography.bold} + ${typography.medium} ` }, { name: 'H2', properties: css` font-size: ${remcalc(24)}; - ${typography.bold} + ${typography.medium} ` }, { name: 'H3', properties: css` - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; - ${typography.bold} + ${typography.medium} ` }, { name: 'P', properties: css` line-height: ${remcalc(24)}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; ` }, { name: 'Small', diff --git a/ui/src/components/base/global.js b/ui/src/components/base/global.js index df6e3514..a801e3b2 100644 --- a/ui/src/components/base/global.js +++ b/ui/src/components/base/global.js @@ -8,7 +8,7 @@ export default css` ${libreFranklin.bold} html, body { - font-size: 16px; + font-size: 15px; margin: 0; padding: 0; background: ${colors.base.background}; diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 5c36f505..c8600ae5 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -72,13 +72,13 @@ const style = css` align-items: center; margin: 0; - padding: ${remcalc(14)} ${remcalc(16)}; + padding: ${remcalc(15)} ${remcalc(18)}; position: relative; ${typography.libreFranklin}; ${typography.normal}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; text-align: center; font-style: normal; font-stretch: normal; diff --git a/ui/src/components/fonts/index.js b/ui/src/components/fonts/index.js index f1d09b8b..810379d9 100644 --- a/ui/src/components/fonts/index.js +++ b/ui/src/components/fonts/index.js @@ -16,6 +16,12 @@ import woff2Bold from './libre-franklin/bold.woff2'; import ttfBold from './libre-franklin/bold.ttf'; import svgBold from './libre-franklin/bold.svg'; +import eotMedium from './libre-franklin/medium.eot'; +import woffMedium from './libre-franklin/medium.woff'; +import woff2Medium from './libre-franklin/medium.woff2'; +import ttfMedium from './libre-franklin/medium.ttf'; +import svgMedium from './libre-franklin/medium.svg'; + const fontFaces = { normal: { family: 'Libre Franklin', @@ -29,6 +35,18 @@ const fontFaces = { svg: svgNormal } }, + medium: { + family: 'Libre Franklin', + style: 'normal', + weight: 500, + filenames: { + eot: eotMedium, + woff: woffMedium, + woff2: woff2Medium, + ttf: ttfMedium, + svg: svgMedium + } + }, semibold: { family: 'Libre Franklin', style: 'normal', @@ -76,6 +94,7 @@ const generate = (name) => css` export const libreFranklin = { normal: generate('normal'), + medium: generate('medium'), semibold: generate('semibold'), bold: generate('bold') }; diff --git a/ui/src/components/fonts/libre-franklin/medium.eot b/ui/src/components/fonts/libre-franklin/medium.eot new file mode 100644 index 00000000..e92ada7f Binary files /dev/null and b/ui/src/components/fonts/libre-franklin/medium.eot differ diff --git a/ui/src/components/fonts/libre-franklin/medium.svg b/ui/src/components/fonts/libre-franklin/medium.svg new file mode 100644 index 00000000..cc7f6a6a --- /dev/null +++ b/ui/src/components/fonts/libre-franklin/medium.svg @@ -0,0 +1,474 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/fonts/libre-franklin/medium.ttf b/ui/src/components/fonts/libre-franklin/medium.ttf new file mode 100755 index 00000000..41daf855 Binary files /dev/null and b/ui/src/components/fonts/libre-franklin/medium.ttf differ diff --git a/ui/src/components/fonts/libre-franklin/medium.woff b/ui/src/components/fonts/libre-franklin/medium.woff new file mode 100644 index 00000000..b7ed6520 Binary files /dev/null and b/ui/src/components/fonts/libre-franklin/medium.woff differ diff --git a/ui/src/components/fonts/libre-franklin/medium.woff2 b/ui/src/components/fonts/libre-franklin/medium.woff2 new file mode 100644 index 00000000..c3aabdea Binary files /dev/null and b/ui/src/components/fonts/libre-franklin/medium.woff2 differ diff --git a/ui/src/components/form/base-input.js b/ui/src/components/form/base-input.js index 35b6bbd7..c20d519d 100644 --- a/ui/src/components/form/base-input.js +++ b/ui/src/components/form/base-input.js @@ -52,7 +52,7 @@ const style = css` border-color: ${colors.base.green} `}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; line-height: normal !important; ${typography.normal}; diff --git a/ui/src/components/label/index.js b/ui/src/components/label/index.js index fe0c9714..2612a000 100644 --- a/ui/src/components/label/index.js +++ b/ui/src/components/label/index.js @@ -5,7 +5,7 @@ import styled from 'styled-components'; const Label = styled.label` ${typography.semibold}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; font-style: normal; font-stretch: normal; color: ${colors.base.secondary}; diff --git a/ui/src/components/list/title.js b/ui/src/components/list/title.js index fea47b6c..a8f09b2e 100644 --- a/ui/src/components/list/title.js +++ b/ui/src/components/list/title.js @@ -7,7 +7,7 @@ import styled from 'styled-components'; import React from 'react'; const Container = styled.div` - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; line-height: 1.5; color: ${colors.base.secondary}; diff --git a/ui/src/components/metric/full/select.js b/ui/src/components/metric/full/select.js index 64c70f9a..62edf6e6 100644 --- a/ui/src/components/metric/full/select.js +++ b/ui/src/components/metric/full/select.js @@ -24,7 +24,7 @@ const SelectWrapper = styled.div` const StyledSelect = styled.select` padding: ${remcalc(18)} ${remcalc(24)}; min-width: ${remcalc(154)}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; text-align: right !important; border-radius: 0; color: ${colors.base.white}; diff --git a/ui/src/components/metric/full/title.js b/ui/src/components/metric/full/title.js index fc7c110d..c06f2b68 100644 --- a/ui/src/components/metric/full/title.js +++ b/ui/src/components/metric/full/title.js @@ -10,7 +10,7 @@ const Title = styled.h3` margin: ${remcalc(18)} auto ${remcalc(18)} ${remcalc(24)} !important; ${typography.normal}; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; font-style: normal; line-height: 1.5; color: ${colors.base.white}; diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js index e2fd994d..b3e04393 100644 --- a/ui/src/components/tabs/tab/index.js +++ b/ui/src/components/tabs/tab/index.js @@ -55,7 +55,7 @@ const StyledContent = styled.div` box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2); display: block; float: left; - font-size: ${remcalc(16)}; + font-size: ${remcalc(15)}; margin-top: ${remcalc(-9)}; padding: ${remcalc(20)} ${remcalc(25)}; width: 100%; diff --git a/ui/src/shared/composers/index.js b/ui/src/shared/composers/index.js index 64708119..5483c91d 100644 --- a/ui/src/shared/composers/index.js +++ b/ui/src/shared/composers/index.js @@ -8,6 +8,7 @@ import { libreFranklin, bold, semibold, + medium, normal } from './typography'; @@ -129,5 +130,6 @@ export const typography = { libreFranklin, bold, semibold, + medium, normal }; diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js index 02f4bfe6..ad67d022 100644 --- a/ui/src/shared/composers/typography.js +++ b/ui/src/shared/composers/typography.js @@ -21,6 +21,10 @@ export const semibold = css` font-weight: 600; `; +export const medium = css` + font-weight: 500; +`; + export const normal = css` font-weight: 400; `;