Split gobal styles

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';

src/support/PropTypes.js

@@ -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,
-});

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;

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;

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 {
+    ${animationStyles};
-        transform: translate(100%);
+    ${tooltipStyles};
-        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 baseStyles;