web/satellite: ui improvements (#6418)
Responsiveness and styling ui updates related to signup, login, forgot password pages, and common components.
This commit is contained in:
Tome Boshevski
GitHub
parent
a014af45eb
commit
998babcfae
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -451,11 +451,6 @@ onMounted((): void => {
|
||||
|
||||
&__content-area {
|
||||
padding: 0;
|
||||
|
||||
&__container {
|
||||
padding: 60px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user