code cleanup

src/components/flow/Cell/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+
+interface IProps {
+  height?: number;
+  width?: number;
+  title?: string;
+}
+
+const Cell: FC<IProps> = ({
+  width = 1,
+  height = 1,
+  title,
+}) => (
+    <div
+      className={styles.cell}
+      style={{
+        gridRowEnd: `span ${height}`,
+        gridColumnEnd: `span ${width}`,
+      }}
+    >
+      { title && <div className={styles.title}>{title}</div> }
+    </div>
+);
+
+export { Cell };

src/components/flow/Cell/styles.scss

@@ -0,0 +1,17 @@
+.cell {
+  padding: $gap / 4;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0;
+  background: $cell_bg;
+  border-radius: 4px;
+
+  @include outer_shadow();
+}
+
+.title {
+  font-family: 'Montserrat';
+  font-weight: 700;
+  font-size: 32px;
+  text-transform: uppercase;
+}

src/components/flow/TestGrid/index.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { Cell } from "~/components/flow/Cell";
 
 const style = require('./style.scss');
 
 export const TestGrid = () => (
   <div className={style.grid_test}>
-    <div className={classnames([style.cell, style.vert_1, style.hor_4])} key="b" />
-    <div className={classnames([style.cell, style.vert_2, style.hor_1, style.pad_last])} key="a" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="c" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="d" />
-    <div className={classnames([style.cell, style.vert_2, style.hor_3])} key="e" />
-    <div className={classnames([style.cell, style.vert_2, style.hor_2])} key="f" />
-    <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="g" />
-    <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="h" />
-    <div className={classnames([style.cell, style.vert_4, style.hor_1])} key="i" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="j" />
+    <Cell
+      height={1}
+      width={4}
+      title="Example cell"
+    />
+
+    <Cell />
+    <Cell height={2} />
+    <Cell width={2} />
+    <Cell />
   </div>
 );

src/components/flow/TestGrid/style.scss

@@ -18,47 +18,6 @@ $cols: $content_width / $cell;
   grid-row-gap: $grid_line;
 }
 
-.cell {
-  padding: $gap / 4;
-  box-sizing: border-box;
-  display: flex;
-  flex: 0 0;
-  background: $cell_bg;
-  border-radius: 4px;
-
-  @include outer_shadow();
-  //&::after {
-  //  content: ' ';
-  //  background: transparentize(white, 0.9);
-  //  width: 100%;
-  //  height: 100%;
-  //}
-}
-
-.vert_2 {
-  grid-row-end: span 2;
-}
-
-.vert_3 {
-  grid-row-end: span 3;
-}
-
-.vert_4 {
-  grid-row-end: span 3;
-}
-
-.hor_2 {
-  grid-column-end: span 2;
-}
-
-.hor_3 {
-  grid-column-end: span 3;
-}
-
-.hor_4 {
-  grid-column-end: span 4;
-}
-
 .pad_last {
   grid-column-end: $cols + 1;
 }

src/components/login/LoginForm/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { TextInput } from "$components/input/TextInput";
-import { Button } from "$components/input/Button";
+import { TextInput } from "~/components/input/TextInput";
+import { Button } from "~/components/input/Button";
 import { connect } from 'react-redux';
 import { bindActionCreators } from "redux";
-import { userSendLoginRequest, userSetLoginError } from "$redux/user/actions";
-import { IUserFormStateLogin, IUserState } from "$redux/user/reducer";
-import { Info } from "$components/input/Info";
+import { userSendLoginRequest, userSetLoginError } from "~/redux/user/actions";
+import { IUserFormStateLogin, IUserState } from "~/redux/user/reducer";
+import { Info } from "~/components/input/Info";
 
-const login = require('$containers/LoginLayout/style');
+const login = require('~/containers/LoginLayout/style');
 const style = require('./style.scss');
 
 interface ILoginFormProps {

src/components/main/Header/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Logo } from "$components/main/Logo";
+import { Logo } from "~/components/main/Logo";
 import { connect } from 'react-redux';
-import { IUserProfile, IUserState } from "$redux/user/reducer";
+import { IUserProfile, IUserState } from "~/redux/user/reducer";
 
 const style = require('./style.scss');
 

src/components/main/SidePane/index.tsx

@@ -21,6 +21,7 @@ export const SidePane = ({ }) => {
   return (
     <div className={styles.pane} style={{ left }}>
       <div className={classNames(styles.group, 'logo')} />
+
       <div className={styles.group}>
         <div className={styles.btn} />
         <div className={styles.btn} />

src/components/main/SidePane/styles.scss

@@ -21,7 +21,8 @@
   &:global(.logo) {
     color: white;
     height: (54px * 1.5) + $gap / 2;
-    background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919;
+    //background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919;
+    background: white;
     // #c1543d
     background-size: 140px;
     font-weight: 600;