From fae7effeb3ad6298ba75af528b36a73f6be71409 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Thu, 4 Apr 2019 17:53:46 +0700
Subject: [PATCH] login form alignment

---
 src/containers/LoginLayout/index.tsx  | 11 +++++++----
 src/containers/LoginLayout/style.scss | 17 ++++++++++++++++-
 src/styles/global.scss                | 13 +++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/containers/LoginLayout/index.tsx b/src/containers/LoginLayout/index.tsx
index c2dec9a8..b03ac67e 100644
--- a/src/containers/LoginLayout/index.tsx
+++ b/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="default_container">
+  <div className={style.wrapper}>
+    <div className={style.header}>
+      <Header />
+    </div>
+    <div className={style.container}>
       <LoginForm />
     </div>
-  </MainLayout>
+  </div>
 );
diff --git a/src/containers/LoginLayout/style.scss b/src/containers/LoginLayout/style.scss
index d7feb87f..c0f140c1 100644
--- a/src/containers/LoginLayout/style.scss
+++ b/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 {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 45427fd0..6b75af29 100644
--- a/src/styles/global.scss
+++ b/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;
 }