diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index c393dfd8..57a27a5a 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -9,7 +9,7 @@ import { } from 'utils/device'; import TrezorImage from 'components/images/TrezorImage'; import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; const Wrapper = styled.div` position: relative; @@ -57,7 +57,7 @@ const Name = styled.div` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-weight: 500; + font-weight: ${FONT_WEIGHT.MEDIUM}; color: ${colors.TEXT_PRIMARY}; `; diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index bc34f262..9f40b7ad 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -7,7 +7,7 @@ import Icon from 'components/Icon'; import colors from 'config/colors'; import { getPrimaryColor, getSecondaryColor } from 'utils/notification'; import Loader from 'components/Loader'; -import { TRANSITION, FONT_SIZE } from 'config/variables'; +import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; type Props = { type: string; @@ -40,7 +40,7 @@ const Wrapper = styled.button` background: transparent; font-size: ${FONT_SIZE.SMALL}; position: relative; - font-weight: 300; + font-weight: ${FONT_WEIGHT.LIGHT}; cursor: pointer; color: ${props => getPrimaryColor(props.type)}; border: 1px solid ${props => getPrimaryColor(props.type)}; diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js index 1a9529a8..d46be2a4 100644 --- a/src/components/modals/pin/Pin/components/Button/index.js +++ b/src/components/modals/pin/Pin/components/Button/index.js @@ -4,6 +4,7 @@ import * as React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import colors from 'config/colors'; +import { FONT_WEIGHT } from 'config/variables'; type Props = { onClick: () => void; @@ -16,7 +17,7 @@ const Wrapper = styled.button` margin-top: 15px; margin-left: 10px; font-size: 22px; - font-weight: 600; + font-weight: ${FONT_WEIGHT.SEMIBOLD}; color: ${colors.TEXT_PRIMARY}; border: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; diff --git a/src/support/styles/index.js b/src/support/styles/index.js index 5de2aabd..0b445888 100644 --- a/src/support/styles/index.js +++ b/src/support/styles/index.js @@ -1,5 +1,6 @@ import { createGlobalStyle } from 'styled-components'; import colors from 'config/colors'; +import { FONT_WEIGHT } from 'config/variables'; import tooltipStyles from './Tooltip'; import animationStyles from './Animations'; @@ -10,7 +11,7 @@ const baseStyles = createGlobalStyle` height: 100%; position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; - font-weight: 400; + font-weight: ${FONT_WEIGHT.NORMAL}; font-size: 14px; color: ${colors.TEXT}; } diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index cb53b541..ecbd0776 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; import React from 'react'; -import { FONT_SIZE } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { NavLink } from 'react-router-dom'; import colors from 'config/colors'; @@ -26,7 +26,7 @@ const Wrapper = styled.div` `; const StyledNavLink = styled(NavLink)` - font-weight: 500; + font-weight: ${FONT_WEIGHT.MEDIUM}; font-size: ${FONT_SIZE.TOP_MENU}; color: ${colors.TEXT_SECONDARY}; margin: 0px 4px;