JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: ui improvements (#6418)

Browse Source 
Responsiveness and styling ui updates related to signup, login, forgot password pages, and common components.
This commit is contained in:
Tome Boshevski 2023-10-23 18:23:26 +02:00 committed by GitHub
parent a014af45eb
commit 998babcfae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 90 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/satellite/src/components/common/SelectInput.vue
View File

@ -84,21 +84,27 @@ onBeforeMount(() => {
font-family: 'font_regular', sans-serif;
.select-input {
font-size: 16px;
line-height: 21px;
font-size: 15px;
resize: none;
height: 46px;
height: 48px;
padding: 0 30px 0 0;
text-indent: 20px;
border: 1px solid rgb(56 75 101 / 40%);
text-indent: 18px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
appearance: none;
cursor: pointer;
transition: border-color 90ms ease-in-out;
&:hover {
border-color: var(--c-blue-6);
}
&__caret {
position: absolute;
right: 28px;
bottom: 18px;
right: 26px;
bottom: 20px;
cursor: pointer;
}
}
}
@ -111,8 +117,7 @@ onBeforeMount(() => {
flex-direction: row;
&__label {
font-size: 16px;
line-height: 21px;
font-size: 15px;
color: #354049;
margin-bottom: 0;
}

3
web/satellite/src/components/common/VButton.vue
View File

@ -282,6 +282,7 @@ function handleClick(): void {
background-color: var(--c-blue-3);
cursor: pointer;
box-sizing: border-box;
transition: background-color 100ms ease-in-out;
:deep(path),
:deep(rect) {
@ -316,7 +317,7 @@ function handleClick(): void {
}
&:hover {
background-color: #0059d0;
background-color: var(--c-blue-5);
&.transparent,
&.blue-white {

20
web/satellite/src/components/common/VInput.vue
View File

@ -203,7 +203,7 @@ onBeforeMount(() => {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
margin-top: 20px;
width: 100%;
font-family: 'font_regular', sans-serif;
position: relative;
@ -245,8 +245,7 @@ onBeforeMount(() => {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
line-height: 21px;
font-size: 15px;
color: #354049;
& .add-label {
@ -288,18 +287,21 @@ onBeforeMount(() => {
.input,
.textarea {
font-size: 16px;
line-height: 21px;
font-size: 15px;
resize: none;
height: 48px;
height: 52px;
width: 100%;
padding: 0;
text-indent: 20px;
border-color: rgb(56 75 101 / 40%);
text-indent: 16px;
border-color: #ccc;
border-radius: 6px;
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 50ms ease-in-out;
&:hover {
border-color: var(--c-blue-6);
}
&::placeholder {
opacity: 0.6;

34
web/satellite/src/views/ForgotPassword.vue
View File

@ -46,7 +46,7 @@
</ul>
</div>
</div>
<p class="forgot-area__content-area__container__message">If you’ve forgotten your account password, you can reset it here. Make sure you’re signing in to the right satellite.</p>
<p class="forgot-area__content-area__container__message">Enter your email to reset your password. Make sure you’re signing in to the right satellite.</p>
<div class="forgot-area__content-area__container__input-wrapper">
<VInput
label="Email Address"
@ -278,12 +278,17 @@ onMounted((): void => {
&__value {
font-size: 16px;
line-height: 21px;
color: #acbace;
color: #777;
margin-right: 10px;
font-family: 'font_regular', sans-serif;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
&:hover {
color: var(--c-blue-3);
}
}
&__dropdown {
@ -308,13 +313,14 @@ onMounted((): void => {
color: #7e8b9c;
cursor: pointer;
text-decoration: none;
border-radius: 6px;
&__name {
font-family: 'font_bold', sans-serif;
margin-left: 15px;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
color: #333;
}
&:hover {
@ -338,13 +344,15 @@ onMounted((): void => {
box-sizing: border-box;
&__container {
width: 610px;
padding: 60px 80px;
max-width: 480px;
min-width: 360px;
padding: 30px 40px 40px;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 20px;
box-sizing: border-box;
border: 1px solid #eee;
&__title-area {
display: flex;
@ -352,7 +360,7 @@ onMounted((): void => {
align-items: center;
&__title {
font-size: 24px;
font-size: 21px;
margin: 10px 0;
letter-spacing: -0.1007px;
color: #252525;
@ -361,12 +369,17 @@ onMounted((): void => {
}
}
&__message {
margin-top: 10px;
font-size: 15px;
}
&__input-wrapper {
margin-top: 20px;
margin-top: 10px;
}
&__button {
margin-top: 40px;
margin-top: 30px;
}
&__login-container {
@ -454,11 +467,6 @@ onMounted((): void => {
&__content-area {
padding: 0;
&__container {
padding: 60px;
border-radius: 0;
}
}
}
}

18
web/satellite/src/views/LoginArea.vue
View File

@ -504,7 +504,6 @@ function validateFields(): boolean {
}
&__input-wrapper {
margin-top: 16px;
width: 100%;
}
@ -517,13 +516,17 @@ function validateFields(): boolean {
&__value {
font-size: 16px;
line-height: 21px;
color: #acbace;
color: #777;
margin-right: 10px;
font-family: 'font_regular', sans-serif;
font-weight: 700;
border: none;
cursor: pointer;
background: transparent;
&:hover {
color: var(--c-blue-3);
}
}
&__dropdown {
@ -547,13 +550,14 @@ function validateFields(): boolean {
color: #7e8b9c;
cursor: pointer;
text-decoration: none;
border-radius: 6px;
&__name {
font-family: 'font_bold', sans-serif;
margin-left: 15px;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
color: #333;
}
&:hover {
@ -604,6 +608,7 @@ function validateFields(): boolean {
border-radius: 20px;
box-sizing: border-box;
margin-bottom: 20px;
border: 1px solid #eee;
&__title-area {
display: flex;
@ -742,7 +747,7 @@ function validateFields(): boolean {
&__container {
width: 100%;
padding: 60px;
min-width: 360px;
}
}
@ -765,11 +770,6 @@ function validateFields(): boolean {
&__content-area {
padding: 0;
&__container {
padding: 0 20px 20px;
background: transparent;
}
}
}
}

5
web/satellite/src/views/ResetPassword.vue
View File

@ -451,11 +451,6 @@ onMounted((): void => {
&__content-area {
padding: 0;
&__container {
padding: 60px;
border-radius: 0;
}
}
}
}

59
web/satellite/src/views/registration/RegisterArea.vue
View File

@ -114,7 +114,7 @@
<VInput
label="Full Name"
max-symbols="72"
placeholder="Enter Full Name"
placeholder="Your Name"
:error="fullNameError"
role-description="name"
@setData="setFullName"
@ -124,7 +124,7 @@
<VInput
label="Email Address"
max-symbols="72"
placeholder="user@example.com"
placeholder="email@example.com"
:init-value="email"
:disabled="!!email"
:error="emailError"
@ -873,7 +873,7 @@ async function createUser(): Promise<void> {
}
&__input-wrapper.first-input {
margin-top: 10px;
margin-top: 20px;
}
&__container {
@ -987,6 +987,8 @@ async function createUser(): Promise<void> {
background-color: #fff;
border-radius: 20px;
width: 50%;
border: 1px solid #eee;
margin-bottom: 40px;
&__expand {
display: flex;
@ -999,11 +1001,15 @@ async function createUser(): Promise<void> {
font-weight: 700;
font-size: 16px;
line-height: 21px;
color: #afb7c1;
color: #777;
margin-right: 10px;
border: none;
cursor: pointer;
background: transparent;
&:hover {
color: var(--c-blue-3);
}
}
&__dropdown {
@ -1027,13 +1033,14 @@ async function createUser(): Promise<void> {
color: #7e8b9c;
cursor: pointer;
text-decoration: none;
border-radius: 6px;
&__name {
font-family: 'font_bold', sans-serif;
margin-left: 15px;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
color: #333;
}
&:hover {
@ -1046,7 +1053,7 @@ async function createUser(): Promise<void> {
&__info-button {
position: relative;
cursor: pointer;
margin-right: 3px;
margin-right: 6px;
height: 18px;
&:hover p {
@ -1057,6 +1064,11 @@ async function createUser(): Promise<void> {
cursor: pointer;
}
& svg {
width: 18px;
height: 18px;
}
&__message {
position: absolute;
top: 150%;
@ -1126,8 +1138,7 @@ async function createUser(): Promise<void> {
&__personal.active,
&__professional.active {
color: #fff;
background: var(--c-blue-3);
font-weight: bold;
background: var(--c-blue-4);
}
}
@ -1298,7 +1309,7 @@ async function createUser(): Promise<void> {
}
.input-wrap {
margin-top: 10px;
margin-top: 20px;
}
.checkmark-container {
@ -1323,12 +1334,17 @@ async function createUser(): Promise<void> {
.checkmark {
position: absolute;
top: 0;
top: 2px;
left: 0;
height: 21px;
width: 21px;
border: 2px solid #afb7c1;
height: 20px;
width: 20px;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 90ms ease-in-out;
&:hover {
border-color: var(--c-blue-6);
}
}
.checkmark-container:hover input ~ .checkmark {
@ -1336,7 +1352,7 @@ async function createUser(): Promise<void> {
}
.checkmark-container input:checked ~ .checkmark {
border: 2px solid #afb7c1;
border: 1px solid #afb7c1;
background-color: transparent;
}
@ -1351,8 +1367,8 @@ async function createUser(): Promise<void> {
}
.checkmark-container .checkmark:after {
left: 7px;
top: 3px;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid #354049;
@ -1394,16 +1410,6 @@ async function createUser(): Promise<void> {
}
}
@media screen and (width <= 1060px) {
.register-area {
&__container {
width: 70%;
}
}
}
@media screen and (width <= 1024px) {
.register-area {
@ -1486,6 +1492,7 @@ async function createUser(): Promise<void> {
&__input-area {
width: 100%;
min-width: 360px;
padding: 0;
&__container {