QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 13:50:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize the onboarding subscription experience.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-04-15 12:48:16 +02:00
parent 9321db2a3a
commit 47d82ce591
28 changed files with 426 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/webapp/src/style/pages/Setup/SetupPage.scss
View File

@@ -16,7 +16,7 @@
max-width: 600px;
min-width: 600px;
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1500px) {
min-width: 500px;
max-width: 500px;
}
@@ -54,7 +54,7 @@
top: 0;
width: 600px;
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 1500px) {
width: 500px;
}
@media only screen and (max-width: 1024px) {
@@ -99,6 +99,7 @@
&__organization {
font-size: 16px;
opacity: 0.75;
margin-top: 2.4rem;
span>a {
text-decoration: underline;
@@ -108,17 +109,8 @@
}
}
&__divider {
height: 1px;
width: 60%;
background: rgba(255, 255, 255, 0.25);
margin: 18px 0;
}
&__footer {
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.25);
padding-top: 20px;
}
&__links {

3
packages/webapp/src/style/pages/Setup/Subscription.scss
View File

@@ -1,6 +1,5 @@
.setup-subscription-form{
margin: 0 auto;
padding: 0 80px;
margin-top: 40px;
padding: 0 40px;
}

73
packages/webapp/src/style/pages/Subscription/BillingPlans.scss
View File

@@ -1,73 +0,0 @@
.billing-plans{
max-width: 753px;
.paragraph{
font-size: 15px;
}
&__section{
margin-bottom: 40px;
.title{
font-size: 20px;
font-weight: 600;
color: #6b7382;
margin-top: 0;
margin-bottom: 12px;
}
.bp4-tab-list {
border-bottom: 2px solid #e6e6e6;
width: 95%;
.bp4-tab-indicator-wrapper .bp4-tab-indicator{
bottom: -2px;
}
}
.bp4-tab-panel{
margin-top: 26px;
}
.subscribe-button {
.bp4-button {
background-color: #0063ff;
min-height: 41px;
width: 240px;
}
}
.plan-radios,
.plan-periods{
margin-top: 20px;
}
}
.license-container {
.bp4-button{
margin-top: 14px;
padding: 0 30px;
}
.form-group-license_code{
margin-top: 20px;
}
.bp4-form-content {
.bp4-input-group {
display: block;
position: relative;
}
.bp4-input {
position: relative;
width: 59%;
height: 41px;
}
}
h4 {
font-size: 18px;
font-weight: 400;
color: #444444;
}
p {
margin-top: 15px;
font-size: 14px;
}
}
}

43
packages/webapp/src/style/pages/Subscription/PlanPeriodRadio.scss
View File

@@ -1,43 +0,0 @@
// Plan period radio component.
// ---------------------
.period-radios{
display: flex;
}
.period-radio{
display: inline-flex;
background-color: #fcfdff;
justify-content: space-between;
align-items: center;
width: 240px;
height: 36px;
border-radius: 5px;
padding: 8px 10px;
color: #000;
border: 1px solid #dcdcdc;
cursor: pointer;
text-decoration: none;
&.is-selected {
border: 1px solid #0069ff;
background-color: #fcfdff;
}
&:not(:first-child) {
margin-left: 20px;
}
&__amount{
font-weight: 600;
}
&__period{
color: #2f3863;
font-size: 14px;
font-weight: 500;
&::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
}
}

81
packages/webapp/src/style/pages/Subscription/PlanRadio.scss
View File

@@ -1,81 +0,0 @@
// Plan radio component.
// ---------------------
.plan-radios{
display: flex;
}
.plan-radio {
display: flex;
flex-direction: column;
width: 215px;
min-height: 277px;
border-radius: 5px;
padding: 15px;
border: 1px solid #dcdcdc;
background: #fcfdff;
text-decoration: none;
color: #000;
cursor: pointer;
&.is-selected {
border: 1px solid #0069ff;
background-color: #fcfdff;
}
&:not(:first-child) {
margin-left: 20px;
}
&__header {
display: flex;
justify-content: flex-start;
}
&__name {
background: #3657ff;
border-radius: 3px;
padding: 2px 10px;
font-size: 13px;
color: #fff;
margin-bottom: 18px;
height: 21px;
text-transform: uppercase;
}
&__description {
font-size: 14px;
font-weight: 400;
ul {
list-style: none;
li{
position: relative;
padding-left: 12px;
margin-bottom: 9px;
&:before{
content: '-';
position: absolute;
left: 0;
opacity: 0.6;
}
}
}
}
&__price {
margin-top: auto;
font-size: 15px;
padding-top: 10px;
}
&__amount {
font-weight: 600;
}
&__period {
font-weight: 400;
color: #2f3863;
&::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
}
}