QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Register & subscription Page style

Browse Source
This commit is contained in:
elforjani3
2020-10-11 14:39:04 +02:00
parent daef2b76ab
commit 06286e6c18
3 changed files with 151 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/containers/Authentication/Register/RegisterWizardSteps.js
View File

@@ -24,7 +24,7 @@ function RegisterWizardSteps({
{registerWizardSteps.map((step, index) => ( {registerWizardSteps.map((step, index) => (
<RegisterWizardStep <RegisterWizardStep
label={step.label} label={step.label}
isActive={(index + 1) <= currentStep} isActive={(index + 1) == currentStep}
/> />
))} ))}
</ul> </ul>

45
client/src/style/pages/authentication.scss
View File

@@ -145,32 +145,33 @@
} }
} }
// Register Form // // Register Form
.register-form { // .register-form {
width: 690px; // // width: 690px;
margin: 0px auto; // // margin: 0px auto;
padding: 85px 50px; // // padding: 85px 50px;
&__agreement-section { // &__agreement-section {
margin-top: -10px; // margin-top: -10px;
p { // p {
font-size: 13px; // font-size: 13px;
margin-top: -10px; // margin-top: -10px;
margin-bottom: 24px; // margin-bottom: 24px;
line-height: 1.65; // line-height: 1.65;
} // }
} // }
&__submit-button-wrap { // &__submit-button-wrap {
margin: 25px 0px 25px 0px; // margin: 25px 0px 25px 0px;
.bp3-button { // .bp3-button {
min-height: 45px; // min-height: 45px;
background-color: #0052cc; // background-color: #0052cc;
} // }
} // }
} // }
.send-reset-password { .send-reset-password {
.form-group--crediential { .form-group--crediential {

135
client/src/style/pages/register-wizard-page.scss
View File

@@ -1,11 +1,98 @@
.register-page { .register-page {
.bp3-input {
min-height: 40px;
border: 1px solid #ced4da;
}
.bp3-form-group {
margin-bottom: 23px;
&.bp3-intent-danger {
.bp3-input {
border-color: #eea9a9;
}
}
}
.bp3-form-group.has-password-revealer {
.bp3-label {
display: flex;
justify-content: space-between;
}
.password-revealer {
.text {
font-size: 12px;
}
}
}
.bp3-button.bp3-fill.bp3-intent-primary {
font-size: 16px;
}
&__label-section {
margin-bottom: 29px;
color: #555;
h3 {
// font-weight: 500;
font-weight: 400;
// font-size: 28px;
font-size: 22px;
// color: #444;
color: #555555;
margin: 0 0 12px;
}
a {
text-decoration: underline;
color: #0040bd;
}
}
&__form-wrapper {
width: 100%;
// max-width: 415px;
// padding: 15px;
margin: 0 auto;
}
&__footer-links {
padding: 9px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
text-align: center;
margin-bottom: 1.2rem;
a {
color: #0052cc;
}
}
&__loading-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(252, 253, 255, 0.5);
display: flex;
justify-content: center;
}
&__submit-button-wrap {
margin: 0px 0px 24px 0px;
.bp3-button {
background-color: #0052cc;
min-height: 45px;
}
}
&__right-section { &__right-section {
padding-left: 25%; padding-left: 25%;
} }
&__left-section{ &__left-section {
position: fixed; position: fixed;
background: #778cab; background: #778cab;
overflow: auto; overflow: auto;
@@ -58,9 +145,41 @@
} }
} }
} }
&-form {
width: 800px;
margin: 0 auto;
// width: 690px;
// padding: 85px 60px;
// padding: 85px 105px;
// Register Form
.register-form {
padding: 85px 105px;
&__agreement-section {
margin-top: -10px;
p {
font-size: 13px;
margin-top: -10px;
margin-bottom: 24px;
line-height: 1.65;
}
}
&__submit-button-wrap {
margin: 25px 0px 25px 0px;
.bp3-button {
min-height: 45px;
background-color: #0052cc;
}
}
}
}
} }
// Register Wizard Steps // Register Wizard Steps
.wizard-container { .wizard-container {
width: 80%; width: 80%;
@@ -100,18 +219,18 @@
display: none; display: none;
} }
.wizard-wrapper > li.complete::before { .wizard-wrapper > li.is-active::before {
background-color: #75859c; background-color: #75859c;
} }
.wizard-wrapper > li.complete ~ li::before { .wizard-wrapper > li.is-active ~ li::before {
background: #ebebeb; background: #ebebeb;
} }
.wizard-wrapper > li.complete ~ li::after { .wizard-wrapper > li.is-active ~ li::after {
background: #ebebeb; background: #ebebeb;
} }
.wizard-wrapper > li.complete p.wizard-info { .wizard-wrapper > li.is-active p.wizard-info {
color: #004dd0; color: #004dd0;
} }
} }