From 938e833358f37e308603acd98ee1063c836ce169 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 13 Oct 2020 20:18:06 +0200
Subject: [PATCH] WIP/ feature: setup initializing / ProgressBar

---
 .../containers/Setup/SetupInitializingForm.js | 13 +++-
 .../src/style/pages/register-wizard-page.scss | 71 +++++++++++++------
 2 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/client/src/containers/Setup/SetupInitializingForm.js b/client/src/containers/Setup/SetupInitializingForm.js
index d907a38b7..469bb1b7f 100644
--- a/client/src/containers/Setup/SetupInitializingForm.js
+++ b/client/src/containers/Setup/SetupInitializingForm.js
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useQuery } from 'react-query';
 import { withWizard } from 'react-albus'
+import { ProgressBar, Intent } from '@blueprintjs/core';
 
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';
 import withOrganization from 'containers/Organization/withOrganization'
@@ -29,7 +30,17 @@ function SetupInitializingForm({
 
   return (
     <div class="setup-initializing-form">
-      <h1>You organization is initializin...</h1>
+      <ProgressBar intent={Intent.PRIMARY} value={null} />
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          {/* You organization is initializin... */}
+          It's time to make your accounting really simple!
+        </h1>
+        <p className={'paragraph'}>
+          while we set up your account,please remember to verify your account by
+          clicking on the link we sent to yout registered email address
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss
index bb89bd906..32b769b20 100644
--- a/client/src/style/pages/register-wizard-page.scss
+++ b/client/src/style/pages/register-wizard-page.scss
@@ -1,6 +1,3 @@
-
-
-
 .setup-page {
   max-width: 1400px;
 
@@ -9,8 +6,8 @@
     flex-direction: row;
     width: 100%;
 
-    &:before{
-      content: "";
+    &:before {
+      content: '';
       display: block;
       width: 30%;
       height: 1px;
@@ -18,14 +15,14 @@
       max-width: 350px;
     }
 
-    h1{
+    h1 {
       font-size: 22px;
       font-weight: 600;
       color: #6d6d6d;
     }
   }
 
-  &__content{
+  &__content {
     width: 70%;
   }
 
@@ -83,14 +80,14 @@
         }
       }
 
-      &__divider{
+      &__divider {
         height: 3px;
         width: 100px;
         background: rgba(255, 255, 255, 0.15);
         margin: 20px 0;
       }
 
-      &__footer{
+      &__footer {
         margin-top: auto;
       }
 
@@ -102,19 +99,19 @@
         border-bottom: 1px solid rgba(255, 255, 255, 0.15);
       }
 
-      &__links{
+      &__links {
         text-align: left;
         opacity: 0.55;
-  
-        > div{
+
+        > div {
           font-size: 13px;
           margin-right: 15px;
           display: inline;
-  
-          a{
+
+          a {
             color: #fff;
-  
-            &:hover{
+
+            &:hover {
               text-decoration: underline;
             }
           }
@@ -125,18 +122,17 @@
 }
 
 .setup-page-steps {
-
   &-container {
     width: 80%;
     margin: 0 auto;
     padding: 50px 0 0;
   }
 
-  ul{
+  ul {
     display: flex;
   }
 
-  li{
+  li {
     position: relative;
     list-style-type: none;
     width: 25%;
@@ -192,5 +188,40 @@
 
 //Register Subscription form
 .register-subscription-form {
-  
+}
+
+// setup initializing form
+.setup-initializing-form {
+  width: 95%;
+  margin: 0 auto;
+  padding: 16% 0 0;
+
+  .bp3-progress-bar {
+    background: rgba(92, 112, 128, 0.2);
+    border-radius: 40px;
+    display: block;
+    height: 8px;
+    overflow: hidden;
+    position: relative;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  &__title {
+    text-align: center;
+    margin-top: 35px;
+    h1 {
+      font-size: 24px;
+      font-weight: 700;
+      color: #000;
+      // color: #6d6d6d;
+    }
+
+    .paragraph {
+      font-size: 15px;
+      line-height: 1.5;
+      padding: 0 20%;
+    }
+    
+  }
 }