Separate more animations, removed unused less

src/js/components/Loader/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Paragraph from 'components/Paragraph';
 import { DASH, GREEN_COLOR } from 'config/animations';
@@ -38,10 +38,7 @@ const CircleWrapper = styled.circle`
 const Loader = ({
     className, text, size = 100,
 }) => (
-    <Wrapper
+    <Wrapper className={className} size={size}>
-        className={className}
-        size={size}
-    >
         <Paragraph>{text}</Paragraph>
         <SvgWrapper viewBox="25 25 50 50">
             <CircleWrapper

src/js/config/animations.js

@@ -2,13 +2,21 @@ import { keyframes } from 'styled-components';
 import colors from 'config/colors';
 
 export const ROTATE_180_UP = keyframes`
-    from { transform: rotate(0deg) }
+    from { 
-    to { transform: rotate(180deg) }
+        transform: rotate(0deg) 
+    }
+    to { 
+        transform: rotate(180deg) 
+    }
 `;
 
 export const ROTATE_180_DOWN = keyframes`
-    from { transform: rotate(180deg) }
+    from { 
-    to { transform: rotate(0deg) }
+        transform: rotate(180deg) 
+    }
+    to { 
+        transform: rotate(0deg) 
+    }
 `;
 
 export const DASH = keyframes`
@@ -39,4 +47,13 @@ export const GREEN_COLOR = keyframes`
     80%, 90% {
         stroke: ${colors.GREEN_TERTIARY};
     }
+`;
+
+export const PULSATE = keyframes`
+    0%, 100% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1.0;
+    }
 `;

src/js/views/Landing/components/ConnectDevice/index.js

@@ -5,6 +5,7 @@ import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import P from 'components/Paragraph';
 import Button from 'components/Button';
+import { PULSATE } from 'config/animations';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
@@ -65,20 +66,10 @@ class ConnectDevice extends Component<Props> {
             padding: 36px 0;
         `;
 
-        const animationPulsate = keyframes`
-            0%, 100% {
-                opacity: 0.5;
-            }
-            50% {
-                opacity: 1.0;
-            }
-        `;
-
         const ConnectTrezorWrapper = styled.div`
             position: relative;
             top: 1px;
-            animation: ${animationPulsate} 1.3s ease-out infinite;
+            animation: ${PULSATE} 1.3s ease-out infinite;
-
             color: ${colors.GREEN_PRIMARY};
             font-size: ${FONT_SIZE.BASE};
             font-weight: ${FONT_WEIGHT.BASE};

src/styles/index.less

@@ -12,7 +12,6 @@
 @import './receive.less';
 @import './summary.less';
 
-@import './landingPage.less';
 @import './notification.less';
 
 @import './inputs.less';

src/styles/landingPage.less

@@ -1,306 +0,0 @@
-.app {
-
-    &.landing {
-        //min-height: 100vh;
-        // overflow: hidden;
-        background: @color_landing;
-
-        .notification {
-            min-width: 100%;
-            padding: 24px 0px;
-            .notification-body {
-                max-width: 1170px;
-                margin: 0px auto;
-                padding: 0px 32px 0px 64px;
-                position: relative;
-            }
-            h2:before {
-                top: -7px;
-                left: 24px;
-            }
-        }
-
-        main {
-            flex-direction: column;
-            text-align: center;
-            padding-top: 65px;
-            margin-top: 0px;
-            background: @color_landing;
-        }
-
-        footer {
-            border: 0px;
-            justify-content: center;
-            width: 100%;
-            max-width: 1170px;
-            margin: 0px auto;
-        }
-
-    }
-
-    &.browser-not-supported {
-        main {
-            padding-top: 0px;
-            justify-content: center;
-            width: auto;
-            p {
-                padding: 24px 0px;
-                color: @color_text_secondary;
-            }
-        }
-
-        .row {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            div {
-                &:before {
-                    content: '';
-                    width: 43px;
-                    height: 43px;
-                    display: block;
-                    margin: 0 auto;
-                }
-                p {
-                    font-size: 12px;
-                    padding: 12px 0px;
-                }
-                a {
-                    display: block;
-                }
-
-                &.chrome {
-                    &:before {
-                        background-image: url('../images/browser-chrome.png');
-                    }
-                }
-                &.firefox {
-                    &:before {
-                        background-image: url('../images/browser-firefox.png');
-                    }
-                }
-            }
-        }
-    }
-
-    &.install-bridge {
-
-        main {
-            padding-top: 0px;
-            justify-content: center;
-            max-width: 500px;
-
-            p {
-                color: @color_text_secondary;
-                font-size: 16px;
-                line-height: 1.6;
-            }
-        }
-
-        .Select {
-            flex: 1;
-            height: 34px;
-            margin-right: 4px;
-
-            .Select-control {
-                height: 34px;
-                border: 1px solid @color_divider;
-                border-radius: 0px 2px 2px 0px;
-                background: @color_white;
-            }
-    
-            .Select-option {
-                .hover();
-                &.is-focused {
-                    background: @color_gray_light;
-                }
-        
-                &.is-selected { 
-                    background: @color_divider;
-                }
-            }
-        }
-
-        .claim {
-            font-size: 36px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-bottom: 24px;
-            span {
-                color: @color_green_primary;
-                padding: 6px 10px;
-                border: 1px solid @color_green_primary;
-                border-radius: 3px;
-                font-size: 14px;
-                font-weight: 300;
-                margin-left: 24px;
-            }
-        }
-
-        .row {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
-            padding: 24px 0px;
-
-            .button {
-                padding: 0px 24px;
-                height: 34px;
-                line-height: 34px;
-                text-align: left;
-                &:before {
-                    .icomoon-download;
-                    position: relative;
-                    top: 5px;
-                    margin-right: 10px;
-                }
-            }
-        }
-
-        .installers {
-            width: 120px;
-            text-align: left;
-        }
-    }
-
-    &.connect-device {
-
-        main {
-
-            .row {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                padding: 36px 0px;
-                margin: 0 auto;
-                // width: 420px;
-
-                p {
-                    // flex: 1;
-                    align-self: center;
-                }
-
-                // a {
-                //     color: @color_green_primary;
-                //     text-decoration: underline;
-                //     font-weight: 500;
-                //     .hover();
-                //     &:hover {
-                //         text-decoration: none;
-                //         color: @color_green_secondary;
-                //     }
-                // }
-                .webusb-and,
-                .trezor-webusb-button {
-                    display: none;
-                }
-
-                &.webusb {
-                    width: 400px;
-                    .webusb-and,
-                    .trezor-webusb-button {
-                        display: block;
-                    }
-                }
-            }
-
-            p {
-                color: @color_text_secondary;
-                line-height: 1.8;
-
-                &.connect {
-                    color: @color_green_primary;
-                    font-size: 16px;
-                    font-weight: 500;
-
-                    span {
-                        position: relative;
-                        top: 1px;
-                        animation: pulsate 1.3s ease-out infinite;
-                        position: relative;
-
-                        svg {
-                            position: absolute;
-                            top: -8px;
-                            left: -24px;
-                        }
-                    }
-                }
-            }
-
-            .image {
-                position: relative;
-                width: 100%;
-                height: calc(100vh - 143px);
-                min-height: 500px;
-                flex: 1;
-                background-image: url('../images/case.png');
-                background-repeat: no-repeat;
-                background-position: center 0px;
-                background-size: contain;
-                p {
-                    position: absolute;
-                    bottom: 32px;
-                    left: 0;
-                    right: 0;
-                    margin: 0px auto;
-
-                    span {
-                        display: block;
-                    }
-                }
-            }
-
-            img {
-                width: 90%;
-                height: auto;
-                margin: auto;
-            }
-        }
-
-        .connect-usb-pin,
-        .connect-usb-cable {
-            animation: connect 1.3s ease-out infinite;
-        }
-        
-       
-    }
-}
-
-
-.landing {
-    text-align: center;
-    position: relative;
-    min-height: 100vh;
-    background: @color_landing;
-
-    .loader-circle {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-}
-
-@keyframes pulsate {
-    0%, 100% {
-      opacity: 0.5;
-    }
-    50% {
-      opacity: 1.0;
-    }
-}
-
-@keyframes connect {
-    0%, 100% {
-      transform: translateY(0px);
-    }
-    50% {
-        transform: translateY(-4px)
-    }
-}
-