feat: optimize setup wizard style.

client/src/containers/Setup/SetupLeftSection.js

@@ -1,11 +1,21 @@
 import React, { useState, useCallback } from 'react';
-import { Icon } from 'components';
+import { Icon, For } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
 import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
 
+import footerLinks from 'config/footerLinks';
 import { compose } from 'utils';
 
+
+function FooterLinkItem({ title, link }) {
+  return (
+    <div class="">
+      <a href={link} target="_blank">{ title }</a>
+    </div>
+  );
+}
+
 /**
  * Wizard setup left section.
  */
@@ -13,8 +23,6 @@ function SetupLeftSection({
   // #withAuthenticationActions
   requestLogout,
 }) {
-  const [org] = useState('LibyanSpider');
-
   const onClickLogout = useCallback(() => {
     requestLogout();
   }, [requestLogout]);
@@ -22,44 +30,33 @@ function SetupLeftSection({
   return (
     <section className={'setup-page__left-section'}>
       <div className={'content'}>
-        <div className={'content-logo'}>
+        <div className={'content__logo'}>
-          <Icon
+          <Icon icon="bigcapital" className={'bigcapital--alt'} height={37} width={214} />
-            icon={'bigcapital'}
-            width={165}
-            height={28}
-            className="bigcapital--alt"
-          />
         </div>
 
-        <h1 className={'content-title'}>
+        <h1 className={'content__title'}>
           <T id={'register_a_new_organization_now'} />
         </h1>
 
-        <p className={'content-text'}>
+        <p className={'content__text'}>
           <T id={'you_have_a_bigcapital_account'} />
         </p>
 
-        <div className={'content-org'}>
+        <div className={'content__organization'}>
-          <span>
+          <span class="organization-id">Your oragnization ID: <span class="id">12342313</span>,</span><br />
-            <T id={'welcome'} />
+          <span class="signout"><a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a></span>
-            {org},
-          </span>
-          <span>
-            <a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a>
-          </span>
         </div>
 
-        <div className={'content-contact'}>
+        <span class="content__divider"></span>
-          <a href={'#!'}>
+
-            <p>
+        <div className={'content__footer'}>
-              <T id={'we_re_here_to_help'} /> {'+21892-791-8381'}
+          <div className={'content__contact-info'}> 
-            </p>
+            <p><T id={'we_re_here_to_help'} /> {'+21892-791-8381'}</p>
-          </a>
+          </div>
-          <a href={'#!'}>
+
-            <p>
+          <div className={'content__links'}>
-              <T id={'contact_us_technical_support'} />
+            <For render={FooterLinkItem} of={footerLinks} />
-            </p>
+          </div>
-          </a>
         </div>
       </div>
     </section>

client/src/containers/Setup/SetupRightSection.js

@@ -52,7 +52,7 @@ function SetupRightSection ({
         basename={'/setup'}
         history={history}
         render={({ step, steps }) => (
-          <div>
+          <div class="setup-page__content">
             <WizardSetupSteps currentStep={steps.indexOf(step) + 1} />
 
             <TransitionGroup>

client/src/style/pages/billing.scss

@@ -110,15 +110,15 @@
     }
   }
 
-  .bg-title {
+  // .bg-title {
-    font-size: 22px;
+  //   font-size: 22px;
-    font-weight: 400;
+  //   font-weight: 400;
-    color: #666666;
+  //   color: #666666;
-  }
+  // }
-  .bg-message {
+  // .bg-message {
-    margin-bottom: 23px;
+  //   margin-bottom: 23px;
-    font-size: 14px;
+  //   font-size: 14px;
-  }
+  // }
   .license-container {
     .bp3-form-group {
       margin-bottom: 20px;

client/src/style/pages/register-wizard-page.scss

@@ -2,20 +2,44 @@
 
 
 .setup-page {
+  max-width: 1400px;
 
   &__right-section {
-    padding-left: 25%;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    &:before{
+      content: "";
+      display: block;
+      width: 30%;
+      height: 1px;
+      min-width: 300px;
+      max-width: 400px;
+    }
+
+    h1{
+      font-size: 22px;
+      font-weight: 600;
+      color: #6d6d6d;
+    }
+  }
+
+  &__content{
+    width: 70%;
   }
 
   &__left-section {
     position: fixed;
-    background: #778cab;
+    background-color: #01115e;
     overflow: auto;
     z-index: 1;
     height: 100%;
-    max-width: 25%;
+    width: 30%;
     left: 0;
     top: 0;
+    max-width: 400px;
+    min-width: 300px;
 
     .content {
       display: flex;
@@ -24,60 +48,101 @@
       padding: 25px;
       margin: 0px auto;
       border: none;
-      cursor: pointer;
+      height: 100%;
-      .content-logo {
+
-        margin-bottom: 45px;
+      &__logo {
+        opacity: 0.75;
+        margin-bottom: 60px;
+        padding-left: 10px;
       }
-      .content-title {
+      &__title {
-        font-size: 25px;
+        font-size: 28px;
-        font-weight: 700;
+        font-weight: 600;
         line-height: normal;
-        margin-bottom: 25px;
+        margin-bottom: 20px;
+        margin-top: 14px;
+        color: rgba(255, 255, 255, 0.85);
       }
-      .content-text {
+      &__text {
-        font-size: 14px;
+        font-size: 16px;
+        opacity: 0.85;
+        margin-bottom: 18px;
       }
-      .content-org {
+      &__organization {
-        font-size: 14px;
+        font-size: 16px;
+        opacity: 0.85;
 
         span > a {
           text-decoration: underline;
           color: #ffffff;
-          margin-left: 5px;
+          margin-top: 6px;
+          display: inline-block;
         }
-        span ::after {
+
-          border-top: 2px solid #707070;
+        .organization-id{
+          .id{
+            font-weight: bold;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.4);
+          }
         }
       }
-      .content-contact {
+      &__divider{
-        position: absolute;
+        height: 3px;
-        bottom: 15px;
+        width: 100px;
-        a {
+        background: rgba(255, 255, 255, 0.25);
-          text-decoration: none;
+        margin: 22px 0;
-          color: #ffffff;
+      }
-          font-size: 14px;
+      &__footer{
+        margin-top: auto;
+      }
+      &__contact-info {
+        font-size: 16px;
+        margin-bottom: 20px;
+        opacity: 0.85;
+        padding-bottom: 5px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+      }
+      &__links{
+        text-align: left;
+        opacity: 0.75;
+  
+        > div{
+          font-size: 13px;
+          margin-right: 15px;
+          display: inline;
+  
+          a{
+            color: #fff;
+  
+            &:hover{
+              text-decoration: underline;
+            }
+          }
         }
       }
     }
   }
 }
 
-
 .setup-page-steps {
 
   &-container {
     width: 80%;
-    margin: 60px auto;
+    margin: 0 auto;
+    padding: 50px 0 0;
+  }
+
+  ul{
+    display: flex;
   }
 
   li{
     position: relative;
     list-style-type: none;
     width: 25%;
-    float: left;
     text-align: center;
-    color: #000;
+    color: #333;
-    font-size: 15px;
+    font-size: 16px;
 
     &::before {
       width: 13px;
@@ -127,5 +192,5 @@
 
 //Register Subscription form
 .register-subscription-form {
-  padding-top: 50px;
+  
 }