diff --git a/src/index.js b/src/index.js index dc1da114..931e8c16 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ /* @flow */ import React from 'react'; import { render } from 'react-dom'; -import baseStyles from 'support/BaseStyles'; +import baseStyles from 'support/styles'; import { onBeforeUnload } from 'actions/WalletActions'; import App from 'views/index'; import store from './store'; diff --git a/src/support/PropTypes.js b/src/support/PropTypes.js deleted file mode 100644 index 86ac37a0..00000000 --- a/src/support/PropTypes.js +++ /dev/null @@ -1,7 +0,0 @@ -import PropTypes from 'prop-types'; - -export const DEVICE_PROP_TYPES = PropTypes.shape({ - id: PropTypes.number.isRequired, - text: PropTypes.string.isRequired, - author: authorPropType.isRequired, -}); \ No newline at end of file diff --git a/src/support/styles/Animations.js b/src/support/styles/Animations.js new file mode 100644 index 00000000..2fb9a057 --- /dev/null +++ b/src/support/styles/Animations.js @@ -0,0 +1,43 @@ +import { css } from 'styled-components'; + +const animationStyles = css` + .slide-left-enter { + transform: translate(100%); + pointer-events: none; + } + + .slide-left-enter.slide-left-enter-active { + transform: translate(0%); + transition: transform 300ms ease-in-out; + } + + .slide-left-exit { + transform: translate(-100%); + } + + .slide-left-exit.slide-left-exit-active { + transform: translate(0%); + transition: transform 300ms ease-in-out; + } + + .slide-right-enter { + transform: translate(-100%); + pointer-events: none; + } + + .slide-right-enter.slide-right-enter-active { + transform: translate(0%); + transition: transform 300ms ease-in-out; + } + + .slide-right-exit { + transform: translate(-100%); + } + + .slide-right-exit.slide-right-exit-active { + transform: translate(-200%); + transition: transform 300ms ease-in-out; + } +`; + +export default animationStyles; \ No newline at end of file diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js new file mode 100644 index 00000000..9a50d446 --- /dev/null +++ b/src/support/styles/Tooltip.js @@ -0,0 +1,165 @@ +import { css } from 'styled-components'; +import colors from 'config/colors'; + +const tooltipStyles = css` + .rc-tooltip { + min-width: 200px; + max-width: ${props => `${props.maxWidth}px` || 'auto'}; + position: absolute; + z-index: 1070; + visibility: visible; + border: none; + border-radius: 3px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); + } + + .rc-tooltip-hidden { + display: none; + } + + .rc-tooltip-inner { + padding: 8px 10px; + color: ${colors.WHITE}; + font-size: 12px; + line-height: 1.5; + text-align: left; + text-decoration: none; + background-color: ${colors.TOOLTIP_BACKGROUND}; + border-radius: 3px; + min-height: 34px; + border: none; + } + + .rc-tooltip-arrow, + .rc-tooltip-arrow-inner { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .rc-tooltip-placement-top .rc-tooltip-arrow, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow, + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + bottom: -6px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.BLACK}; + } + + .rc-tooltip-placement-top .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-topRight .rc-tooltip-arrow-inner { + bottom: 2px; + margin-left: -6px; + border-width: 6px 6px 0; + border-top-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-top .rc-tooltip-arrow { + left: 50%; + } + + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + left: 15%; + } + + .rc-tooltip-placement-topRight .rc-tooltip-arrow { + right: 15%; + } + + .rc-tooltip-placement-right .rc-tooltip-arrow, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + left: -5px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-right .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner { + left: 1px; + margin-top: -6px; + border-width: 6px 6px 6px 0; + border-right-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-right .rc-tooltip-arrow { + top: 50%; + } + + .rc-tooltip-placement-rightTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + + .rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + bottom: 15%; + } + + .rc-tooltip-placement-left .rc-tooltip-arrow, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + right: -5px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-left .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner, + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner { + right: 1px; + margin-top: -6px; + border-width: 6px 0 6px 6px; + border-left-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-left .rc-tooltip-arrow { + top: 50%; + } + + .rc-tooltip-placement-leftTop .rc-tooltip-arrow { + top: 15%; + margin-top: 0; + } + + .rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + bottom: 15%; + } + + .rc-tooltip-placement-bottom .rc-tooltip-arrow, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + top: -5px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-bottom .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner, + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner { + top: 1px; + margin-left: -6px; + border-width: 0 6px 6px; + border-bottom-color: ${colors.TOOLTIP_BACKGROUND}; + } + + .rc-tooltip-placement-bottom .rc-tooltip-arrow { + left: 50%; + } + + .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow { + left: 15%; + } + + .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + right: 15%; + } +`; + +export default tooltipStyles; \ No newline at end of file diff --git a/src/support/BaseStyles.js b/src/support/styles/index.js similarity index 70% rename from src/support/BaseStyles.js rename to src/support/styles/index.js index ffa328eb..500794c7 100644 --- a/src/support/BaseStyles.js +++ b/src/support/styles/index.js @@ -2,6 +2,9 @@ import { injectGlobal } from 'styled-components'; import colors from 'config/colors'; import normalize from 'styled-normalize'; +import tooltipStyles from './Tooltip'; +import animationStyles from './Animations'; + const baseStyles = () => injectGlobal` ${normalize}; @@ -69,44 +72,8 @@ const baseStyles = () => injectGlobal` url('/fonts/roboto/RobotoMonoRegular.svg#RobotoMono') format('svg'); /* Legacy iOS */ } - .slide-left-enter { - transform: translate(100%); - pointer-events: none; - } - - .slide-left-enter.slide-left-enter-active { - transform: translate(0%); - transition: transform 300ms ease-in-out; - } - - .slide-left-exit { - transform: translate(-100%); - } - - .slide-left-exit.slide-left-exit-active { - transform: translate(0%); - transition: transform 300ms ease-in-out; - } - - .slide-right-enter { - transform: translate(-100%); - pointer-events: none; - } - - .slide-right-enter.slide-right-enter-active { - transform: translate(0%); - transition: transform 300ms ease-in-out; - } - - .slide-right-exit { - transform: translate(-100%); - } - - .slide-right-exit.slide-right-exit-active { - transform: translate(-200%); - transition: transform 300ms ease-in-out; - } - + ${animationStyles}; + ${tooltipStyles}; `; export default baseStyles; \ No newline at end of file