From eee3109120a43daa0c922782526fcf073680aed1 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 13 Oct 2020 11:23:40 +0200 Subject: [PATCH] feat: optimize setup wizard style. --- .../src/containers/Setup/SetupLeftSection.js | 59 ++++----- .../src/containers/Setup/SetupRightSection.js | 2 +- client/src/style/pages/billing.scss | 18 +-- .../src/style/pages/register-wizard-page.scss | 125 +++++++++++++----- 4 files changed, 133 insertions(+), 71 deletions(-) diff --git a/client/src/containers/Setup/SetupLeftSection.js b/client/src/containers/Setup/SetupLeftSection.js index 732bf0f66..c913fb696 100644 --- a/client/src/containers/Setup/SetupLeftSection.js +++ b/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 ( +
+ { title } +
+ ); +} + /** * 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 (
-
- +
+
-

+

-

+

-
- - - {org}, - - - - +
+ Your oragnization ID: 12342313,
+
-
- -

- {'+21892-791-8381'} -

- - -

- -

- + + +
+
+

{'+21892-791-8381'}

+
+ +
+ +
diff --git a/client/src/containers/Setup/SetupRightSection.js b/client/src/containers/Setup/SetupRightSection.js index 96ff6499d..b6e490889 100644 --- a/client/src/containers/Setup/SetupRightSection.js +++ b/client/src/containers/Setup/SetupRightSection.js @@ -52,7 +52,7 @@ function SetupRightSection ({ basename={'/setup'} history={history} render={({ step, steps }) => ( -
+
diff --git a/client/src/style/pages/billing.scss b/client/src/style/pages/billing.scss index cadd124e5..28ec01b0e 100644 --- a/client/src/style/pages/billing.scss +++ b/client/src/style/pages/billing.scss @@ -110,15 +110,15 @@ } } - .bg-title { - font-size: 22px; - font-weight: 400; - color: #666666; - } - .bg-message { - margin-bottom: 23px; - font-size: 14px; - } + // .bg-title { + // font-size: 22px; + // font-weight: 400; + // color: #666666; + // } + // .bg-message { + // margin-bottom: 23px; + // font-size: 14px; + // } .license-container { .bp3-form-group { margin-bottom: 20px; diff --git a/client/src/style/pages/register-wizard-page.scss b/client/src/style/pages/register-wizard-page.scss index 977b27aa2..7bace30ad 100644 --- a/client/src/style/pages/register-wizard-page.scss +++ b/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; - .content-logo { - margin-bottom: 45px; + height: 100%; + + &__logo { + opacity: 0.75; + margin-bottom: 60px; + padding-left: 10px; } - .content-title { - font-size: 25px; - font-weight: 700; + &__title { + font-size: 28px; + font-weight: 600; line-height: normal; - margin-bottom: 25px; + margin-bottom: 20px; + margin-top: 14px; + color: rgba(255, 255, 255, 0.85); } - .content-text { - font-size: 14px; + &__text { + font-size: 16px; + opacity: 0.85; + margin-bottom: 18px; } - .content-org { - font-size: 14px; + &__organization { + 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 { - position: absolute; - bottom: 15px; - a { - text-decoration: none; - color: #ffffff; - font-size: 14px; + &__divider{ + height: 3px; + width: 100px; + background: rgba(255, 255, 255, 0.25); + margin: 22px 0; + } + &__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; - font-size: 15px; + color: #333; + font-size: 16px; &::before { width: 13px; @@ -127,5 +192,5 @@ //Register Subscription form .register-subscription-form { - padding-top: 50px; + }