From 9378894c9bb00b4bf27841990dfc2a90c210410b Mon Sep 17 00:00:00 2001
From: wokeGit <wkalemba.net@gmail.com>
Date: Wed, 30 Aug 2017 10:14:02 +0200
Subject: [PATCH] #44 Adjust boxes to small screens

---
 .../forgot-confirmation.html                  |  2 +-
 .../forgot-password/forgot-password.html      |  2 +-
 .../reset-confirmation.html                   |  2 +-
 .../views/reset-password/reset-password.html  |  2 +-
 .../email-confirmation.html                   |  2 +-
 .../src/ui/src/app/views/setup/setup.scss     | 19 ++++++++++++++-----
 .../src/app/views/setup/sign-up/sign-up.html  |  2 +-
 7 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
index 6a59a227dff6..62dca8245d10 100644
--- a/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--forgot-password-confirm">
         <div class="setup__header">
             <h1>{{ 'Password Reset Email Sent' | translate }}</h1>
         </div>
diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
index 9a736d9ae0ad..36951b7c52de 100644
--- a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
+++ b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--forgot-password">
         <div class="setup__header">
             <h1>{{ 'Forgot Password' | translate }}?</h1>
         </div>
diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html b/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
index fa90e5b35f39..3ad7c8a0067c 100644
--- a/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--reset-password-confirm">
         <div class="setup__header">
             <h1>{{ 'Password Reset Complete' | translate }}</h1>
         </div>
diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-password.html b/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
index 87d68107c070..e0ea9e4d78de 100644
--- a/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
+++ b/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--reset-password">
         <div class="setup__header">
             <h1>{{ 'Reset Your Password' | translate }}</h1>
         </div>
diff --git a/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html b/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
index dbda719225dc..2d8670d3c176 100644
--- a/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--setup-confirm">
         <div class="setup__header">
             <h1>{{ 'Thanks for joining Argo!' | translate }}</h1>
         </div>
diff --git a/saas/axops/src/ui/src/app/views/setup/setup.scss b/saas/axops/src/ui/src/app/views/setup/setup.scss
index 594b3a589723..3e06a670eda6 100644
--- a/saas/axops/src/ui/src/app/views/setup/setup.scss
+++ b/saas/axops/src/ui/src/app/views/setup/setup.scss
@@ -25,7 +25,6 @@ $setup-box-content-shadow: 3px 3px 20px black;
         width: 150px;
         position: absolute;
         left: 47px;
-        z-index: -1;
     }
 
     &__shortcut {
@@ -53,19 +52,27 @@ $setup-box-content-shadow: 3px 3px 20px black;
     }
 
     &__box {
-        position: fixed;
-        top: 40%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        margin: auto auto 50px auto;
+
+        &--welcome {
+            margin-top: 50px;
+        }
+
+        &--forgot-password, &--reset-password, &--setup-confirm, &--forgot-password-confirm, &--reset-password-confirm {
+            margin-top: 130px;
+        }
     }
 
     &__header {
+        position: relative;
+
         h1 {
             line-height: 80px;
             font-size: 35px;
             font-weight: 300;
             color: white;
             text-align: center;
+            margin-bottom: 0;
         }
     }
 
@@ -76,6 +83,8 @@ $setup-box-content-shadow: 3px 3px 20px black;
         padding: 50px 60px;
         border: 1px solid black;
         box-shadow: $setup-box-content-shadow;
+        z-index: 1;
+        position: relative;
 
         p {
             font-size: 15px;
diff --git a/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html b/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
index 670a65b9d9bb..bcaf17b7cf1a 100644
--- a/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
+++ b/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
@@ -4,7 +4,7 @@
         <div class="logo"></div>
     </div>
 
-    <div class="setup__box">
+    <div class="setup__box setup__box--welcome">
         <div class="setup__header">
             <div class="setup__logo"></div>
             <div class="setup__welcome-text">