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

web/satellite: rework open bucket modal styling

Browse Source 
Reworked open bucket modal styling to correspond to create access grant flow

Issue:
https://github.com/storj/storj/issues/5819

Change-Id: I618b50472e45413a63a531ad959d9af69511d464
This commit is contained in:
Vitalii 2023-04-27 14:39:58 +03:00 committed by Storj Robot
parent b89e0e0272
commit 978b714128
1 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
web/satellite/src/components/modals/OpenBucketModal.vue
View File

@ -5,10 +5,13 @@
<VModal :on-close="closeModal">
<template #content>
<div class="modal">
<OpenBucketIcon />
<h1 class="modal__title">Enter your encryption passphrase</h1>
<div class="modal__header">
<AccessEncryptionIcon />
<h1 class="modal__header__title">Enter passphrase</h1>
</div>
<p class="modal__info">
To open a bucket and view your encrypted files, <br>please enter your encryption passphrase.
Enter your encryption passphrase to view and manage your data in the browser. This passphrase will
be used to unlock all buckets in this project.
</p>
<VInput
:class="{'orange-border': isWarningState}"
@ -32,17 +35,21 @@
<div class="modal__buttons">
<VButton
label="Cancel"
height="48px"
height="52px"
font-size="14px"
border-radius="10px"
:is-transparent="true"
:on-press="closeModal"
:is-disabled="isLoading"
/>
<VButton
:label="isWarningState ? 'Continue Anyway ->' : 'Continue ->'"
height="48px"
label="Continue ->"
height="52px"
font-size="14px"
border-radius="10px"
:on-press="onContinue"
:is-disabled="isLoading"
:is-orange="isWarningState"
:is-disabled="isLoading || !passphrase"
:is-transparent="isWarningState"
/>
</div>
</div>
@ -67,7 +74,7 @@ import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
import OpenBucketIcon from '@/../static/images/buckets/openBucket.svg';
import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
const bucketsStore = useBucketsStore();
@ -173,28 +180,34 @@ function setPassphrase(value: string): void {
font-family: 'font_regular', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 62px 62px 54px;
max-width: 500px;
padding: 32px;
max-width: 350px;
@media screen and (max-width: 600px) {
padding: 62px 24px 54px;
}
&__header {
display: flex;
align-items: center;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--c-grey-2);
&__title {
font-family: 'font_bold', sans-serif;
font-size: 26px;
font-size: 24px;
line-height: 31px;
color: #131621;
margin: 30px 0 15px;
color: var(--c-grey-8);
margin-left: 16px;
text-align: left;
}
}
&__info {
font-size: 16px;
line-height: 21px;
text-align: center;
font-size: 14px;
line-height: 19px;
color: #354049;
margin-bottom: 32px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--c-grey-2);
text-align: left;
}
&__warning {
@ -216,7 +229,7 @@ function setPassphrase(value: string): void {
margin-left: 16px;
&__title {
font-family: 'font_medium', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #000;
@ -241,8 +254,12 @@ function setPassphrase(value: string): void {
.orange-border {
:deep(h3) {
color: var(--c-yellow-5);
}
:deep(input) {
border-color: #ff8a00;
border-color: var(--c-yellow-5);
}
}
</style>