login form alignment

src/containers/LoginLayout/index.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { LoginForm } from '$components/login/LoginForm';
-import { MainLayout } from "$containers/MainLayout";
+import { Header } from "$components/main/Header";
 
 const style = require('./style.scss');
 
 export const LoginLayout: React.FunctionComponent<{}> = () => (
-  <MainLayout>
+  <div className={style.wrapper}>
-    <div className="default_container">
+    <div className={style.header}>
+      <Header />
+    </div>
+    <div className={style.container}>
       <LoginForm />
     </div>
-  </MainLayout>
+  </div>
 );

src/containers/LoginLayout/style.scss

@@ -1,5 +1,20 @@
-.container {
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
+}
 
+.header {}
+
+.container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-self: stretch;
 }
 
 .form {

src/styles/global.scss

@@ -1,7 +1,12 @@
 @import "~raleway-cyrillic/raleway.css";
 
+html {
+  min-height: 100vh;
+}
+
 body {
   background: $main_bg_color;
+  min-height: 100vh;
   //background: $main_bg_color url("../sprites/dots.svg");
   background: url("http://vault48.org/pixmaps/texture.jpg");
   //background: #111111;
@@ -25,6 +30,14 @@ body {
   }
 }
 
+:global(#app) {
+  min-height: 100vh;
+
+  & > div {
+    min-height: 100vh;
+  }
+}
+
 :global(.gap) {
   height: $gap;
 }