Split passphrase/create css into smaller files - subTask #513

src/components/passphrase/create/create.css

@@ -9,20 +9,6 @@
   --second-header-animation-delay: 1000ms;
 }
 
-.circle,
-.smallCircle,
-.triangle,
-.smallTriangle,
-.squareLeft,
-.squareRight,
-.triangleLeft,
-.verySmallCircle,
-.circleLeft {
-  position: absolute;
-  z-index: 0;
-  transform: translateX(-50%) translateY(50%);
-}
-
 .wrapper {
   flex-direction: row;
   height: calc(100% - 22px);
@@ -62,16 +48,6 @@
   }
 }
 
-.shapesWrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  overflow: hidden;
-}
-
 hr {
   display: none;
 }

src/components/passphrase/create/index.js

@@ -6,7 +6,7 @@ import AccountVisual from '../../accountVisual';
 import styles from './create.css';
 import { FontIcon } from '../../fontIcon';
 import * as shapesSrc from '../../../assets/images/register-shapes/*.svg'; //eslint-disable-line
-import MovableShape from './movableShape';
+import Shapes from './shapes';
 import { PrimaryButton, Button } from '../../toolbox/buttons/button';
 import TransitionWrapper from '../../toolbox/transitionWrapper';
 
@@ -168,7 +168,6 @@ class Create extends React.Component {
 
   render() {
     const { t, nextStep } = this.props;
-    const { shapes } = this.state;
     const percentage = this.state.data ? this.state.data.percentage : 0;
     const hintTitle = this.isTouchDevice ? 'by tilting your device.' : 'by moving your mouse.';
     const modifyID = (id) => {
@@ -183,62 +182,7 @@ class Create extends React.Component {
         <div className={grid['col-xs-12']}
           ref={ (pageRoot) => { this.pageRoot = pageRoot; } }>
           {!this.state.address ?
-            <div className={styles.shapesWrapper}>
-              <MovableShape
-                hidden={shapes[0]}
-                src={shapesSrc.circle}
-                className={styles.circle}
-                percentage={percentage}
-                initial={['100%', '20%']} />
-              <MovableShape
-                hidden={shapes[1]}
-                src={shapesSrc.smallCircle}
-                className={styles.smallCircle}
-                percentage={percentage}
-                initial={['62%', '-2%']} />
-              <MovableShape
-                hidden={shapes[2]}
-                src={shapesSrc.triangle}
-                className={styles.triangle}
-                percentage={percentage}
-                initial={['80%', '-2%']} />
-              <MovableShape
-                hidden={shapes[4]}
-                src={shapesSrc.squareLeft}
-                className={styles.squareLeft}
-                percentage={percentage}
-                initial={['5%', '-1%']} />
-              <MovableShape
-                hidden={shapes[8]}
-                src={shapesSrc.squareRight}
-                className={styles.squareRight}
-                percentage={percentage}
-                initial={['70%', '-5%']} />
-              <MovableShape
-                hidden={shapes[5]}
-                src={shapesSrc.triangleLeft}
-                className={styles.triangleLeft}
-                percentage={percentage}
-                initial={['-2%', '30%']} />
-              <MovableShape
-                hidden={shapes[7]}
-                src={shapesSrc.circleLeft}
-                className={styles.circleLeft}
-                percentage={percentage}
-                initial={['20%', '2%']} />
-              <MovableShape
-                hidden={shapes[3]}
-                src={shapesSrc.smallTriangle}
-                className={styles.smallTriangle}
-                percentage={percentage}
-                initial={['40%', '-2%']} />
-              <MovableShape
-                hidden={shapes[6]}
-                src={shapesSrc.verySmallCircle}
-                className={styles.verySmallCircle}
-                percentage={percentage}
-                initial={['45%', '0%']} />
-            </div> :
+            <Shapes percentage={percentage} shapes={this.state.shapes} /> :
             null
           }
           <header className={this.state.headingClass}>

src/components/passphrase/create/shapes.css

@@ -0,0 +1,25 @@
+@import '../../app/variables';
+
+.shapesWrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.circle,
+.smallCircle,
+.triangle,
+.smallTriangle,
+.squareLeft,
+.squareRight,
+.triangleLeft,
+.verySmallCircle,
+.circleLeft {
+  position: absolute;
+  z-index: 0;
+  transform: translateX(-50%) translateY(50%);
+}

src/components/passphrase/create/shapes.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import * as shapesSrc from '../../../assets/images/register-shapes/*.svg'; //eslint-disable-line
+import MovableShape from './movableShape';
+import styles from './shapes.css';
+
+const Shapes = ({ shapes, percentage }) =>
+  (<div className={styles.shapesWrapper}>
+    <MovableShape
+      hidden={shapes[0]}
+      src={shapesSrc.circle}
+      className={styles.circle}
+      percentage={percentage}
+      initial={['100%', '20%']} />
+    <MovableShape
+      hidden={shapes[1]}
+      src={shapesSrc.smallCircle}
+      className={styles.smallCircle}
+      percentage={percentage}
+      initial={['62%', '-2%']} />
+    <MovableShape
+      hidden={shapes[2]}
+      src={shapesSrc.triangle}
+      className={styles.triangle}
+      percentage={percentage}
+      initial={['80%', '-2%']} />
+    <MovableShape
+      hidden={shapes[4]}
+      src={shapesSrc.squareLeft}
+      className={styles.squareLeft}
+      percentage={percentage}
+      initial={['5%', '-1%']} />
+    <MovableShape
+      hidden={shapes[8]}
+      src={shapesSrc.squareRight}
+      className={styles.squareRight}
+      percentage={percentage}
+      initial={['70%', '-5%']} />
+    <MovableShape
+      hidden={shapes[5]}
+      src={shapesSrc.triangleLeft}
+      className={styles.triangleLeft}
+      percentage={percentage}
+      initial={['-2%', '30%']} />
+    <MovableShape
+      hidden={shapes[7]}
+      src={shapesSrc.circleLeft}
+      className={styles.circleLeft}
+      percentage={percentage}
+      initial={['20%', '2%']} />
+    <MovableShape
+      hidden={shapes[3]}
+      src={shapesSrc.smallTriangle}
+      className={styles.smallTriangle}
+      percentage={percentage}
+      initial={['40%', '-2%']} />
+    <MovableShape
+      hidden={shapes[6]}
+      src={shapesSrc.verySmallCircle}
+      className={styles.verySmallCircle}
+      percentage={percentage}
+      initial={['45%', '0%']} />
+  </div>);
+
+export default Shapes;

src/components/register/register.css

@@ -8,13 +8,24 @@
   & > div {
     height: 100%;
     overflow: hidden;
+    margin-right: calc(-1 * var(--box-padding-left-XL));
+    margin-left: calc(-1 * var(--box-padding-left-XL));
   }
 }
 
 .hasPaddingTop {
   padding-top: var(--padding-top);
 }
 
+@media (--large-viewport) {
+  .hasPaddingTop {
+    & > div {
+      margin-right: calc(-1 * var(--box-padding-left-L));
+      margin-left: calc(-1 * var(--box-padding-left-L));
+    }
+  }
+}
+
 @media (--medium-viewport) {
   .hasPaddingTop {
     height: 100vh; /* stylelint-disable-line */
@@ -24,5 +35,10 @@
 @media (--small-viewport) {
   .hasPaddingTop {
     padding-top: var(--box-padding);
+
+    & > div {
+      margin-right: calc(-1 * var(--box-padding-left-M));
+      margin-left: calc(-1 * var(--box-padding-left-M));
+    }
   }
 }