Merge pull request #92 from bigcapitalhq/BIG-423-optimize-the-setup-pages-design

feat(webapp): optimize the setup organization page design

packages/webapp/src/containers/Setup/SetupLeftSection.tsx

@@ -27,13 +27,6 @@ function SetupLeftSectionFooter() {
 
   return (
     <div className={'content__footer'}>
-      <div className={'content__contact-info'}>
-        <p>
-          <T id={'setup.left_side.footer_help'} />{' '}
-          <span>{'+21892-738-1987'}</span>
-        </p>
-      </div>
-
       <div className={'content__links'}>
         <For render={FooterLinkItem} of={footerLinks} />
       </div>

packages/webapp/src/containers/Setup/SetupOrganizationPage.tsx

@@ -54,15 +54,6 @@ function SetupOrganizationPage({ wizard }) {
 
   return (
     <div className={'setup-organization'}>
-      <div className={'setup-organization__title-wrap'}>
-        <h1>
-          <T id={'setup.organization.title'} />
-        </h1>
-        <p class="paragraph">
-          <T id={'setup.organization.description'} />
-        </p>
-      </div>
-
       <Formik
         validationSchema={validationSchema}
         initialValues={initialValues}

packages/webapp/src/lang/en/index.json

@@ -1237,7 +1237,7 @@
   "expense.details.total": "Total",
   "manual_journal.details.subtotal": "Subtotal",
   "manual_journal.details.total": "Total",
-  "setup.left_side.title": "Register a New Organization now!.",
+  "setup.left_side.title": "Register a New Organization now!",
   "setup.left_side.description": "You have a Bigcapital account",
   "setup.left_side.footer_help": "We’re Here to Help!",
   "setup.plan.plans": "Plans & Payment",

packages/webapp/src/style/pages/Setup/Organization.scss

@@ -1,30 +1,17 @@
 
 .setup-organization {
-  width: 580px;
+  max-width: 600px;
+  width: 100%;
   margin: 0 auto;
-  padding: 45px 0 20px;
+  padding: 45px 25px 20px;
-
-  &__title-wrap {
-    margin-bottom: 20px;
-
-    h1 {
-      margin-top: 0;
-      margin-bottom: 10px;
-      color: #565e6c;
-    }
-    .paragraph {
-      opacity: 0.8;
-    }
-  }
 
   form {
     h3 {
-      color: #6b7382;
+      color: #868f9f;
-      margin-bottom: 1.6rem;
+      margin-bottom: 2rem;
-      font-weight: 500;
+      font-weight: 600;
     }
   }
-
   .bp3-form-group {
     margin-bottom: 24px;
 
@@ -64,10 +51,10 @@
 
   .register-org-button {
     .bp3-button {
-      background-color: #0052cc;
+      background-color: #1c2448;
-      min-width: 175px;
       height: 40px;
       font-size: 15px;
+      width: 100%;
     }
   }
 }

packages/webapp/src/style/pages/Setup/SetupPage.scss

@@ -13,12 +13,17 @@
       display: block;
       width: 100%;
       height: 1px;
-      max-width: 350px;
+      max-width: 600px;
-      min-width: 350px;
+      min-width: 600px;
 
       @media only screen and (max-width: 1200px) {
-        min-width: 300px;
+        min-width: 500px;
-        max-width: 350px;
+        max-width: 500px;
+      }
+
+      @media only screen and (max-width: 1024px) {
+        min-width: 400px;
+        max-width: 400px;
       }
     }
 
@@ -40,17 +45,20 @@
 
   &__left-section {
     position: fixed;
-    background-color: #01115e;
+    background-color: #2f3d6f;
     overflow: auto;
     z-index: 1;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
-    width: 350px;
+    width: 600px;
 
     @media only screen and (max-width: 1200px) {
-      width: 300px;
+      width: 500px;
+    }
+    @media only screen and (max-width: 1024px) {
+      width: 400px;
     }
 
     .content {
@@ -63,24 +71,29 @@
       height: 100%;
 
       &__logo {
-        opacity: 0.65;
+        opacity: 0.75;
         margin-bottom: 60px;
         padding-left: 10px;
       }
 
       &__title {
-        font-size: 26px;
+        font-size: 50px;
-        font-weight: 600;
+        font-weight: 100;
         line-height: normal;
-        margin-bottom: 20px;
+        margin-bottom: 14px;
         margin-top: 14px;
         color: rgba(255, 255, 255, 0.75);
+
+        @media only screen and (max-width: 1024px) {
+          font-size: 45px;
+        }
       }
 
       &__text {
-        font-size: 16px;
+        font-size: 18px;
         opacity: 0.75;
         margin-bottom: 10px;
+        font-weight: 200;
       }
 
       &__organization {
@@ -96,31 +109,21 @@
       }
 
       &__divider {
-        height: 3px;
+        height: 1px;
-        width: 100px;
+        width: 60%;
-        background: rgba(255, 255, 255, 0.15);
+        background: rgba(255, 255, 255, 0.25);
-        margin: 10px 0;
+        margin: 18px 0;
       }
 
       &__footer {
         margin-top: auto;
-      }
+        border-top: 1px solid rgba(255, 255, 255, 0.25);
-
+        padding-top: 20px;
-      &__contact-info {
-        font-size: 16px;
-        margin-bottom: 20px;
-        opacity: 0.75;
-        padding-bottom: 5px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-
-        p>span {
-          unicode-bidi: plaintext;
-        }
       }
 
       &__links {
         text-align: left;
-        opacity: 0.55;
+        opacity: 0.65;
 
         >div {
           font-size: 13px;
@@ -148,12 +151,14 @@
 
   ul {
     display: flex;
+    padding: 0 20px;
+    justify-content: center;
   }
 
   li {
     position: relative;
     list-style-type: none;
-    width: 25%;
+    width: 33%;
     text-align: center;
     color: #333;
     font-size: 16px;