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

feat: billing page in dashboard and setup.

Browse Source
This commit is contained in:
a.bouhuolia
2021-01-31 13:16:01 +02:00
parent 732c3bbfd7
commit e093be0663
60 changed files with 1505 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/style/App.scss
View File

@@ -95,4 +95,14 @@ body.hide-scrollbar .Pane2{
button{
justify-content: start;
}
}
.bp3-timezone-picker{
.bp3-button{
[icon="caret-down"] {
display: none;
}
}
}

6
client/src/style/containers/Dashboard/Sidebar.scss
View File

@@ -57,7 +57,7 @@
.#{$ns}-menu-item {
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 8px 18px;
padding: 8px 20px;
font-size: 15px;
font-weight: 400;
@@ -84,7 +84,7 @@
display: block;
color: $sidebar-menu-label-color;
font-size: 11px;
padding: 10px 18px;
padding: 10px 20px;
margin-top: 4px;
text-transform: uppercase;
font-weight: 500;
@@ -104,7 +104,7 @@
padding-top: 6px;
}
.#{$ns}-menu-item {
padding: 8px 16px;
padding: 8px 20px;
font-size: 15px;
color: $sidebar-submenu-item-color;

26
client/src/style/pages/Billing/BillingPage.scss Normal file
View File

@@ -0,0 +1,26 @@
.billing-page{
padding: 0 60px;
margin-top: 20px;
max-width: 820px;
.bp3-tab-list{
border-bottom: 2px solid #d7e1e7;
.bp3-tab[aria-disabled="true"]{
color: rgba(92, 112, 128, 0.7);
}
}
.plan-radio,
.period-radio{
background: transparent;
border-color: #bbcad4;
&.is-selected{
background: #f1f3fb;
border-color: #0269ff
}
}
}

160
client/src/style/pages/Billing/PageForm.scss
View File

@@ -1,160 +0,0 @@
.billing-form {
padding: 25px 45px;
width: 800px;
margin: 0 auto;
.billing-section{
margin-bottom: 30px;
}
.paragraph + .billing-form__plan-container{
margin-top: 20px;
}
&__plan-container {
display: flex;
flex-flow: row wrap;
.plan-wrapper {
display: flex;
flex-direction: column;
width: 215px;
height: 267px;
border-radius: 5px;
padding: 15px;
border: 1px solid #dcdcdc;
background: #fcfdff;
text-decoration: none;
color: #000;
cursor: pointer;
&.plan-wrapper:not(:first-child) {
margin-left: 20px;
}
.plan-header {
display: flex;
justify-content: flex-start;
}
.plan-name {
background: #3657ff;
border-radius: 3px;
padding: 2px 8px 2px 8px;
font-size: 13px;
color: #fff;
margin-bottom: 16px;
height: 21px;
}
.plan-description {
font-size: 14px;
font-weight: 400;
line-height: 1.8rem;
&.plan-description ul {
list-style: none;
}
}
.plan-price {
margin-top: auto;
.amount {
font-weight: 500;
}
.period {
font-weight: 400;
color: #666;
&.period::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
}
}
}
a.plan-selected {
border: 1px solid #0069ff;
background-color: #fcfdff;
}
}
.paragraph + .payment-method-continer{
margin-top: 20px;
}
.payment-method-continer {
margin-bottom: 30px;
.period-container {
display: inline-flex;
background-color: #fcfdff;
justify-content: space-between;
align-items: center;
width: 215px;
height: 36px;
border-radius: 5px;
padding: 8px 10px;
color: #000;
border: 1px solid #dcdcdc;
cursor: pointer;
text-decoration: none;
&.period-container:not(:first-child) {
margin-left: 20px;
}
.period::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
.bg-period {
font-size: 14px;
font-weight: 500;
}
}
a.billing-selected {
border: 1px solid #0069ff;
background-color: #fcfdff;
}
}
.license-container {
.form-group-license_code{
margin-top: 20px;
}
.bp3-form-content {
.bp3-input-group {
display: block;
position: relative;
}
.bp3-input {
position: relative;
width: 59%;
height: 41px;
}
}
h4 {
font-size: 18px;
font-weight: 400;
color: #444444;
}
p {
margin-top: 15px;
font-size: 14px;
}
}
.bp3-tab-list {
border-bottom: 2px solid #f1f1f1;
width: 95%;
}
.subscribe-button {
.bp3-button {
background-color: #0063ff;
min-height: 41px;
width: 240px;
// width: 25%;
}
}
}

0
client/src/style/pages/Setup/Billing.scss
View File

11
client/src/style/pages/Setup/Organization.scss
View File

@@ -5,7 +5,7 @@
padding: 45px 0 20px;
&__title-wrap {
margin-bottom: 32px;
margin-bottom: 20px;
h1 {
margin-top: 0;
@@ -17,17 +17,24 @@
}
}
&__form {
form {
h3 {
margin-bottom: 1rem;
}
}
.bp3-form-group {
margin-bottom: 24px;
.bp3-input-group {
.bp3-input {
height: 38px;
}
}
.bp3-input,
.form-group--select-list .bp3-button{
font-size: 15px;
}
}

23
client/src/style/pages/Setup/PaymentViaVoucherDialog.scss Normal file
View File

@@ -0,0 +1,23 @@
.dialog--payment-via-voucher{
.bp3-dialog-body{
p{
margin-bottom: 20px;
}
.form-group-license_code{
margin-bottom: 30px;
}
}
.bp3-dialog-footer-actions{
button{
min-width: 80px;
&.bp3-intent-primary{
min-width: 90px;
}
}
}
}

9
client/src/style/pages/Setup/SetupPage.scss
View File

@@ -59,7 +59,7 @@
&__title {
font-size: 26px;
font-weight: 700;
font-weight: 600;
line-height: normal;
margin-bottom: 20px;
margin-top: 14px;
@@ -131,11 +131,9 @@
margin: 0 auto;
padding: 50px 0 0;
}
ul {
display: flex;
}
li {
position: relative;
list-style-type: none;
@@ -155,7 +153,6 @@
border-radius: 50%;
background-color: #75859c;
}
&::after {
width: 100%;
height: 2px;
@@ -166,23 +163,19 @@
left: -50%;
z-index: -1;
}
&:first-child::after {
display: none;
}
&.is-active {
&::before {
background-color: #75859c;
}
~ li {
&:before,
&:after {
background: #ebebeb;
}
}
p.wizard-info {
color: #004dd0;
}

7
client/src/style/pages/Setup/Subscription.scss Normal file
View File

@@ -0,0 +1,7 @@
.setup-subscription-form{
max-width: 800px;
margin: 0 auto;
padding: 0 60px;
margin-top: 40px;
}

69
client/src/style/pages/Subscription/BillingPlans.scss Normal file
View File

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

43
client/src/style/pages/Subscription/PlanPeriodRadio.scss Normal file
View File

@@ -0,0 +1,43 @@
// 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: #666;
font-size: 14px;
font-weight: 500;
&::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
}
}

71
client/src/style/pages/Subscription/PlanRadio.scss Normal file
View File

@@ -0,0 +1,71 @@
// Plan radio component.
// ---------------------
.plan-radios{
display: flex;
}
.plan-radio {
display: flex;
flex-direction: column;
width: 215px;
height: 267px;
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 8px 2px 8px;
font-size: 13px;
color: #fff;
margin-bottom: 16px;
height: 21px;
text-transform: uppercase;
}
&__description {
font-size: 14px;
font-weight: 400;
ul {
list-style: none;
li{
margin-bottom: 9px;
}
}
}
&__price {
margin-top: auto;
font-size: 15px;
}
&__amount {
font-weight: 600;
}
&__period {
font-weight: 400;
color: #666;
&::before {
content: '/';
display: inline-block;
margin: 0 2px;
}
}
}

1
client/src/style/variables.scss
View File

@@ -28,7 +28,6 @@ $button-background-color-disabled: #E9ECEF !default;
$button-background-color: #E6EFFB !default;
$button-background-color-hover: #CFDCEE !default;
$sidebar-background: #01115e;
$sidebar-text-color: #fff;
$sidebar-width: 100%;