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

feat(webapp): optimize the setup organization page design

Browse Source
This commit is contained in:
a.bouhuolia
2023-03-06 23:05:21 +02:00
parent 7532b44a57
commit b4559703f9
6 changed files with 44 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/webapp/src/style/pages/Setup/Organization.scss
View File

@@ -1,30 +1,17 @@
.setup-organization {
width: 580px;
max-width: 600px;
width: 100%;
margin: 0 auto;
padding: 45px 0 20px;
&__title-wrap {
margin-bottom: 20px;
h1 {
margin-top: 0;
margin-bottom: 10px;
color: #565e6c;
}
.paragraph {
opacity: 0.8;
}
}
padding: 45px 25px 20px;
form {
h3 {
color: #6b7382;
margin-bottom: 1.6rem;
font-weight: 500;
color: #868f9f;
margin-bottom: 2rem;
font-weight: 600;
}
}
.bp3-form-group {
margin-bottom: 24px;
@@ -64,10 +51,10 @@
.register-org-button {
.bp3-button {
background-color: #0052cc;
min-width: 175px;
background-color: #1c2448;
height: 40px;
font-size: 15px;
width: 100%;
}
}
}

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

@@ -13,12 +13,17 @@
display: block;
width: 100%;
height: 1px;
max-width: 350px;
min-width: 350px;
max-width: 600px;
min-width: 600px;
@media only screen and (max-width: 1200px) {
min-width: 300px;
max-width: 350px;
min-width: 500px;
max-width: 500px;
}
@media only screen and (max-width: 1024px) {
min-width: 400px;
max-width: 400px;
}
}
@@ -40,17 +45,20 @@
&__left-section {
position: fixed;
background-color: #01115e;
background-color: #2f3d6f;
overflow: auto;
z-index: 1;
height: 100%;
width: 100%;
left: 0;
top: 0;
width: 350px;
width: 600px;
@media only screen and (max-width: 1200px) {
width: 300px;
width: 500px;
}
@media only screen and (max-width: 1024px) {
width: 400px;
}
.content {
@@ -63,24 +71,29 @@
height: 100%;
&__logo {
opacity: 0.65;
opacity: 0.75;
margin-bottom: 60px;
padding-left: 10px;
}
&__title {
font-size: 26px;
font-weight: 600;
font-size: 50px;
font-weight: 100;
line-height: normal;
margin-bottom: 20px;
margin-bottom: 14px;
margin-top: 14px;
color: rgba(255, 255, 255, 0.75);
@media only screen and (max-width: 1024px) {
font-size: 45px;
}
}
&__text {
font-size: 16px;
font-size: 18px;
opacity: 0.75;
margin-bottom: 10px;
font-weight: 200;
}
&__organization {
@@ -96,31 +109,21 @@
}
&__divider {
height: 3px;
width: 100px;
background: rgba(255, 255, 255, 0.15);
margin: 10px 0;
height: 1px;
width: 60%;
background: rgba(255, 255, 255, 0.25);
margin: 18px 0;
}
&__footer {
margin-top: auto;
}
&__contact-info {
font-size: 16px;
margin-bottom: 20px;
opacity: 0.75;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
p>span {
unicode-bidi: plaintext;
}
border-top: 1px solid rgba(255, 255, 255, 0.25);
padding-top: 20px;
}
&__links {
text-align: left;
opacity: 0.55;
opacity: 0.65;
>div {
font-size: 13px;
@@ -148,12 +151,14 @@
ul {
display: flex;
padding: 0 20px;
justify-content: center;
}
li {
position: relative;
list-style-type: none;
width: 25%;
width: 33%;
text-align: center;
color: #333;
font-size: 16px;