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;

src/containers/App.tsx

@@ -3,10 +3,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from "connected-react-router";
-import { history } from "$redux/store";
+import { history } from "~/redux/store";
 import { NavLink, Switch, Route } from 'react-router-dom';
-import { FlowLayout } from "$containers/FlowLayout";
-import { LoginLayout } from "$containers/LoginLayout";
+import { FlowLayout } from "~/containers/FlowLayout";
+import { LoginLayout } from "~/containers/LoginLayout";
 
 interface IAppProps {}
 interface IAppState {}

src/containers/FlowLayout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { MainLayout } from "$containers/MainLayout";
-import { HeroPlaceholder } from "$components/flow/HeroPlaceholder";
-import { TestGrid } from "$components/flow/TestGrid";
+import { MainLayout } from "~/containers/MainLayout";
+import { HeroPlaceholder } from "~/components/flow/HeroPlaceholder";
+import { TestGrid } from "~/components/flow/TestGrid";
 // const style = require('./style.scss');
 
 export const FlowLayout = () => (

src/containers/LoginLayout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { LoginForm } from '$components/login/LoginForm';
-import { Header } from "$components/main/Header";
-import { GodRays } from "$components/main/GodRays";
+import { LoginForm } from '~/components/login/LoginForm';
+import { Header } from "~/components/main/Header";
+import { GodRays } from "~/components/main/GodRays";
 
 const style = require('./style.scss');
 

src/containers/MainLayout/index.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { SidePane } from "$components/main/SidePane";
+import { SidePane } from "~/components/main/SidePane";
+import { Header } from "~/components/main/Header";
 
-const style = require('./style.scss');
+import * as styles from './styles.scss';
 
 export const MainLayout = ({ children }) => (
-  <div className={style.wrapper}>
+  <div className={styles.wrapper}>
     {
       // <Header />
     }

src/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+        <link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>

src/index.tsx

@@ -8,8 +8,8 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { configureStore } from '$redux/store';
-import App from '$containers/App';
+import { configureStore } from '~/redux/store';
+import App from '~/containers/App';
 
 require('./styles/main.scss');
 

src/redux/store.ts

@@ -4,8 +4,8 @@ import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import createSagaMiddleware from 'redux-saga';
 import { connectRouter } from 'connected-react-router'
-import userReducer from '$redux/user/reducer';
-import userSaga from '$redux/user/sagas';
+import userReducer from '~/redux/user/reducer';
+import userSaga from '~/redux/user/sagas';
 import { createBrowserHistory } from 'history';
 import { PersistConfig, Persistor } from "redux-persist/es/types";
 import { routerMiddleware } from 'connected-react-router'

src/redux/user/actions.ts

@@ -1,5 +1,5 @@
-import { USER_ACTIONS } from "$redux/user/constants";
-import { IUserProfile } from "$redux/user/reducer";
+import { USER_ACTIONS } from "~/redux/user/constants";
+import { IUserProfile } from "~/redux/user/reducer";
 
 export const userSendLoginRequest = ({
   username, password

src/redux/user/api.ts

@@ -1,6 +1,6 @@
-import { api, authMiddleware } from "$utils/api";
-import { API } from "$constants/api";
-import { IApiUser } from "$redux/user/constants";
+import { api, authMiddleware } from "~/utils/api";
+import { API } from "~/constants/api";
+import { IApiUser } from "~/redux/user/constants";
 
 export const apiUserLogin = (
   { username, password }:

src/redux/user/reducer.ts

@@ -1,6 +1,6 @@
 import { createReducer } from 'reduxsauce';
-import * as ActionCreators from "$redux/user/actions";
-import { USER_ACTIONS } from "$redux/user/constants";
+import * as ActionCreators from "~/redux/user/actions";
+import { USER_ACTIONS } from "~/redux/user/constants";
 
 export interface IUserProfile {
   id: number,

src/redux/user/sagas.ts

@@ -1,9 +1,9 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
 import { SagaIterator } from 'redux-saga';
-import { IApiUser, USER_ACTIONS, USER_ERRORS, USER_STATUSES } from "$redux/user/constants";
-import * as ActionCreators from '$redux/user/actions';
-import { apiUserLogin } from "$redux/user/api";
-import { userSetLoginError, userSetUser } from "$redux/user/actions";
+import { IApiUser, USER_ACTIONS, USER_ERRORS, USER_STATUSES } from "~/redux/user/constants";
+import * as ActionCreators from '~/redux/user/actions';
+import { apiUserLogin } from "~/redux/user/api";
+import { userSetLoginError, userSetUser } from "~/redux/user/actions";
 import { push } from 'connected-react-router'
 
 function* sendLoginRequestSaga({ username, password }: ReturnType<typeof ActionCreators.userSendLoginRequest>): SagaIterator {

src/utils/api/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import { API } from "$constants/api";
-import { store } from '$redux/store';
+import { API } from "~/constants/api";
+import { store } from '~/redux/store';
 import { push } from "connected-react-router";
 
 export const authMiddleware = r => {

tsconfig.json

@@ -5,25 +5,24 @@
     "sourceMap": true,
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
+    "removeComments": true,
     "module": "commonjs",
-    "target": "es6",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "target": "es2018",
+    "isolatedModules": true,
     "jsx": "react",
     "lib": [ "es2015", "DOM", "es6" ],
-    "baseUrl": "./",
+    "baseUrl": ".",
     "paths": {
-      "$components/*": [ "src/components/*" ],
-      "$containers/*": [ "src/containers/*" ],
-      "$constants/*": [ "src/constants/*" ],
-      "$sprites/*": [ "src/sprites/*" ],
-      "$config/*": [ "./config/*" ],
-      "$styles/*": [ "src/styles/*" ],
-      "$redux/*": [ "src/redux/*" ],
-      "$utils/*": [ "src/utils/*" ]
+      "~/*": ["src/*"]
     }
   },
   "include": [
     "./src/**/*",
     "./custom.d.ts"
+  ],
+  "exclude": [
+    "./__tests__/**/*"
   ]
 }

webpack.config.js

@@ -25,14 +25,7 @@ const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map';
 const resolve = {
   alias: {
     'react-dom': '@hot-loader/react-dom',
-    $components: join(__dirname, 'src/components'),
-    $containers: join(__dirname, 'src/containers'),
-    $constants: join(__dirname, 'src/constants'),
-    $sprites: join(__dirname, 'src/sprites'),
-    $config: join(__dirname, './config'),
-    $styles: join(__dirname, 'src/styles'),
-    $redux: join(__dirname, 'src/redux'),
-    $utils: join(__dirname, 'src/utils'),
+    '~': join(__dirname, 'src'),
   },
   extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json', '.scss']
 };
@@ -171,7 +164,7 @@ module.exports = () => {
     },
     devServer: {
       historyApiFallback: true,
-      port: 8000,
+      port: 4848,
       // host: '192.168.88.40',
       contentBase: 'dist',
       publicPath: '/',