mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
feat: optimize setup wizard style.
This commit is contained in:
Ahmed Bouhuolia
@@ -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'}>
|
||||
<Icon
|
||||
icon={'bigcapital'}
|
||||
width={165}
|
||||
height={28}
|
||||
className="bigcapital--alt"
|
||||
/>
|
||||
<div className={'content__logo'}>
|
||||
<Icon icon="bigcapital" className={'bigcapital--alt'} height={37} width={214} />
|
||||
</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'}>
|
||||
<span>
|
||||
<T id={'welcome'} />
|
||||
{org},
|
||||
</span>
|
||||
<span>
|
||||
<a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a>
|
||||
</span>
|
||||
<div className={'content__organization'}>
|
||||
<span class="organization-id">Your oragnization ID: <span class="id">12342313</span>,</span><br />
|
||||
<span class="signout"><a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a></span>
|
||||
</div>
|
||||
|
||||
<div className={'content-contact'}>
|
||||
<a href={'#!'}>
|
||||
<p>
|
||||
<T id={'we_re_here_to_help'} /> {'+21892-791-8381'}
|
||||
</p>
|
||||
</a>
|
||||
<a href={'#!'}>
|
||||
<p>
|
||||
<T id={'contact_us_technical_support'} />
|
||||
</p>
|
||||
</a>
|
||||
<span class="content__divider"></span>
|
||||
|
||||
<div className={'content__footer'}>
|
||||
<div className={'content__contact-info'}>
|
||||
<p><T id={'we_re_here_to_help'} /> {'+21892-791-8381'}</p>
|
||||
</div>
|
||||
|
||||
<div className={'content__links'}>
|
||||
<For render={FooterLinkItem} of={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user