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

web/satellite: update create bucket modal

Browse Source 
issue: https://github.com/storj/storj/issues/5817

Change-Id: Ia86e0bad8de180fb4e6dde3ed194c9ce6f4f12f1
This commit is contained in:
Cameron 2023-04-27 15:14:54 -04:00 committed by Storj Robot
parent 4ab433ba89
commit 2bb636684e
3 changed files with 96 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -250,7 +250,7 @@ export default defineComponent({
color: #354049;
& .add-label {
font-size: 14px;
font-size: 'font_medium' sans-serif;
color: var(--c-grey-5) !important;
}
}

126
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -5,38 +5,42 @@
<VModal :on-close="closeModal">
<template #content>
<div class="modal">
<CreateBucketIcon class="modal__icon" />
<h1 class="modal__title" aria-roledescription="modal-title">
Create a Bucket
</h1>
<div class="modal__header">
<CreateBucketIcon />
<h1 class="modal__header__title">Create a Bucket</h1>
</div>
<p class="modal__info">
Buckets are used to store and organize your files. Enter lowercase alphanumeric characters only,
no spaces.
</p>
<div class="modal__input-container">
<VLoader v-if="bucketNamesLoading" width="100px" height="100px" />
<VInput
v-else
:init-value="bucketName"
label="Bucket Name"
additional-label="Required"
placeholder="Enter bucket name"
class="full-input"
:error="nameError"
@setData="setBucketName"
/>
</div>
<div class="modal__button-container">
<VButton
label="Cancel"
width="100%"
height="48px"
font-size="14px"
border-radius="10px"
:on-press="closeModal"
:is-transparent="true"
/>
<VButton
label="Create bucket"
label="Create bucket ->"
width="100%"
height="48px"
font-size="14px"
border-radius="10px"
:on-press="onCreate"
:is-disabled="!bucketName"
/>
@ -324,61 +328,14 @@ onMounted(async (): Promise<void> => {
<style scoped lang="scss">
.modal {
width: 430px;
padding: 43px 60px 66px;
padding: 32px;
font-family: 'font_regular', sans-serif;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'font_regular', sans-serif;
max-width: 350px;
@media screen and (max-width: 600px) {
width: calc(100% - 48px);
padding: 54px 24px 32px;
}
&__icon {
max-height: 154px;
max-width: 118px;
}
&__title {
font-family: 'font_bold', sans-serif;
font-size: 28px;
line-height: 34px;
color: #1b2533;
margin-top: 20px;
text-align: center;
@media screen and (max-width: 600px) {
margin-top: 16px;
font-size: 24px;
line-height: 31px;
}
}
&__info {
font-family: 'font_regular', sans-serif;
font-size: 16px;
line-height: 21px;
text-align: center;
color: #354049;
margin: 20px 0 0;
}
&__button-container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30px;
column-gap: 20px;
@media screen and (max-width: 600px) {
margin-top: 20px;
column-gap: unset;
row-gap: 8px;
flex-direction: column-reverse;
}
@media screen and (max-width: 615px) {
padding: 30px 20px;
}
&__blur {
@ -399,11 +356,6 @@ onMounted(async (): Promise<void> => {
top: 40px;
}
}
}
.full-input {
margin-top: 20px;
}
:deep(.label-container) {
margin-bottom: 8px;
@ -414,4 +366,52 @@ onMounted(async (): Promise<void> => {
font-size: 14px;
color: #56606d;
}
&__header {
display: flex;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid var(--c-grey-2);
&__title {
font-family: 'font_bold', sans-serif;
font-size: 24px;
line-height: 31px;
color: var(--c-grey-8);
margin-left: 16px;
text-align: left;
}
}
&__info {
font-size: 14px;
line-height: 20px;
color: var(--c-blue-6);
padding: 16px 0;
border-bottom: 1px solid var(--c-grey-2);
text-align: left;
}
&__input-container {
padding-bottom: 16px;
border-bottom: 1px solid var(--c-grey-2);
}
&__button-container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
column-gap: 20px;
@media screen and (max-width: 600px) {
margin-top: 20px;
column-gap: unset;
row-gap: 8px;
flex-direction: column-reverse;
}
}
}
</style>

7
web/satellite/static/images/buckets/createBucket.svg
View File

@ -1,5 +1,4 @@
<svg width="112" height="113" viewBox="0 0 112 113" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.04 1H65.3698C80.7857 1 86.7521 2.72263 92.5841 5.86948C98.4422 9.0304 103.035 13.6635 106.17 19.5763C106.17 19.577 106.171 19.5778 106.171 19.5785L106.411 20.0376C106.412 20.0383 106.412 20.0389 106.412 20.0396C109.339 25.7076 110.957 31.7258 111 46.4499C111 46.4508 111 46.4516 111 46.4525L111 65.9534C111 81.5098 109.292 87.5337 106.171 93.4215C103.037 99.3345 98.4442 103.968 92.5865 107.129C92.5857 107.13 92.5849 107.13 92.5841 107.131L92.1292 107.373C92.1285 107.373 92.1278 107.374 92.1271 107.374C86.5129 110.324 80.5522 111.957 65.9611 112C65.9602 112 65.9594 112 65.9585 112L46.6303 112C31.2143 112 25.2479 110.277 19.4159 107.131C13.5578 103.97 8.96468 99.3365 5.82993 93.4236C5.82956 93.4229 5.82919 93.4222 5.82881 93.4215L5.58858 92.9624C5.58822 92.9617 5.58786 92.961 5.58751 92.9603C2.66136 87.2922 1.04304 81.2739 1 66.5489V47.0466C1 31.4902 2.70786 25.4663 5.82881 19.5785C8.96317 13.6654 13.5558 9.03204 19.4135 5.87075C19.4143 5.87033 19.4151 5.8699 19.4159 5.86948L19.8708 5.62718C19.8716 5.62674 19.8725 5.6263 19.8733 5.62586C25.4875 2.67566 31.4484 1.04342 46.04 1Z" fill="white" stroke="#EBEEF1" stroke-width="2"/>
<path d="M30.833 39.3889L56.4997 44.5222L82.1663 39.3889L73.6108 84.3056L67.1941 86.4445L56.4997 88.1556L45.8052 86.4445L39.3886 84.3056L30.833 39.3889Z" fill="#D7E8FF"/>
<path d="M87.9628 50.2829C93.9821 56.3022 94.0371 66.0264 88.0608 72.0028C85.6392 74.4243 82.6022 75.8557 79.4458 76.3012L78.3622 82.4397C78.2826 87.2558 68.4258 91.1501 56.2781 91.1501C44.2034 91.1501 34.392 87.3024 34.197 82.5264L34.1952 82.4397L25.8913 35.3933C25.7978 35.0606 25.738 34.7238 25.7132 34.3835L25.7002 34.3078L25.7083 34.3082C25.7029 34.214 25.7002 34.1194 25.7002 34.0246C25.7002 27.3008 39.3904 21.8501 56.2781 21.8501C73.1659 21.8501 86.8561 27.3008 86.8561 34.0246C86.8561 34.1194 86.8534 34.214 86.8479 34.3082L86.8561 34.3078L86.8427 34.3886C86.8179 34.725 86.7588 35.058 86.6668 35.3871L84.6262 46.9461L87.9628 50.2829ZM79.156 42.1026C73.5544 44.6156 65.3808 46.1992 56.2781 46.1992C47.1758 46.1992 39.0024 44.6157 33.4009 42.1028L39.4201 76.2109L40.4042 81.4335L40.4954 81.5043C41.0101 81.8902 41.8067 82.3253 42.8411 82.7445L43.0512 82.8282C46.3855 84.132 51.1367 84.9213 56.2781 84.9213C61.4492 84.9213 66.2248 84.1228 69.5592 82.8069C70.7611 82.3326 71.657 81.8343 72.1829 81.4098L72.2257 81.3746L73.1918 75.8991C70.7615 75.2311 68.4587 73.9585 66.5226 72.0836L66.3409 71.9048L53.8261 59.39C52.6099 58.1737 52.6099 56.2018 53.8261 54.9855C55.0127 53.799 56.9186 53.77 58.1403 54.8987L58.2306 54.9855L70.7454 67.5003C71.7792 68.5342 72.9934 69.2737 74.2826 69.7188L79.156 42.1026ZM83.3051 54.4337L80.6304 69.5889C81.7344 69.1515 82.7666 68.488 83.6563 67.5983C87.1468 64.1078 87.1564 58.4225 83.6853 54.8168L83.5583 54.6874L83.3051 54.4337ZM56.2781 28.0789C48.8056 28.0789 41.8756 29.246 36.9604 31.203C34.8483 32.0439 33.2769 32.9699 32.3726 33.8213C32.3149 33.8755 32.2623 33.9272 32.2146 33.9762L32.1691 34.0241L32.2513 34.1104L32.3726 34.228C33.2769 35.0794 34.8483 36.0054 36.9604 36.8463C41.8756 38.8033 48.8056 39.9704 56.2781 39.9704C63.7507 39.9704 70.6807 38.8033 75.5959 36.8463C77.708 36.0054 79.2793 35.0794 80.1837 34.228C80.2413 34.1738 80.2939 34.1221 80.3417 34.0731L80.3877 34.0241L80.305 33.9389L80.1837 33.8213C79.2793 32.9699 77.708 32.0439 75.5959 31.203C70.6807 29.246 63.7507 28.0789 56.2781 28.0789Z" fill="#0149FF"/>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0H23.3463C28.8835 0 31.0805 0.613723 33.2353 1.76617C35.3902 2.91861 37.0814 4.60977 38.2338 6.76466L38.3214 6.93055C39.4029 9.00672 39.9846 11.2 40 16.4423V23.3463C40 28.8835 39.3863 31.0805 38.2338 33.2353C37.0814 35.3902 35.3902 37.0814 33.2353 38.2338L33.0694 38.3214C30.9933 39.4029 28.8 39.9846 23.5577 40H16.6537C11.1165 40 8.91954 39.3863 6.76466 38.2338C4.60977 37.0814 2.91861 35.3902 1.76617 33.2353L1.67858 33.0694C0.597074 30.9933 0.0154219 28.8 0 23.5577V16.6537C0 11.1165 0.613723 8.91954 1.76617 6.76466C2.91861 4.60977 4.60977 2.91861 6.76466 1.76617L6.93055 1.67858C9.00672 0.597074 11.2 0.0154219 16.4423 0Z" fill="#EBEEF1"/>
<path d="M29.8065 18.0621C31.6826 19.9383 31.6998 22.9692 29.837 24.8319C29.0822 25.5867 28.1357 26.0329 27.1518 26.1717L26.8141 28.085C26.7893 29.5861 23.717 30.7999 19.9307 30.7999C16.1672 30.7999 13.1091 29.6007 13.0483 28.1121L13.0478 28.085L10.4595 13.4212C10.4304 13.3175 10.4117 13.2125 10.404 13.1065L10.4 13.0829L10.4025 13.083C10.4008 13.0536 10.4 13.0242 10.4 12.9946C10.4 10.8989 14.667 9.19995 19.9307 9.19995C25.1945 9.19995 29.4615 10.8989 29.4615 12.9946C29.4615 13.0242 29.4607 13.0536 29.459 13.083L29.4615 13.0829L29.4574 13.1081C29.4496 13.2129 29.4312 13.3167 29.4025 13.4193L28.7665 17.0221L29.8065 18.0621ZM27.0615 15.5124C25.3156 16.2957 22.7679 16.7893 19.9307 16.7893C17.0937 16.7893 14.5461 16.2957 12.8002 15.5125L14.6763 26.1436L14.983 27.7714L15.0115 27.7935C15.1719 27.9138 15.4202 28.0494 15.7426 28.18L15.8081 28.2061C16.8473 28.6125 18.3282 28.8585 19.9307 28.8585C21.5425 28.8585 23.031 28.6096 24.0703 28.1995C24.4449 28.0516 24.7242 27.8963 24.8881 27.764L24.9014 27.753L25.2025 26.0464C24.4451 25.8382 23.7273 25.4415 23.1238 24.8571L23.0672 24.8014L19.1665 20.9007C18.7874 20.5216 18.7874 19.907 19.1665 19.5279C19.5363 19.158 20.1304 19.149 20.5112 19.5008L20.5393 19.5279L24.44 23.4286C24.7623 23.7508 25.1407 23.9813 25.5425 24.1201L27.0615 15.5124ZM28.3547 19.3559L27.5211 24.0796C27.8652 23.9432 28.1869 23.7364 28.4642 23.4591C29.5522 22.3712 29.5552 20.5991 28.4732 19.4753L28.4337 19.4349L28.3547 19.3559ZM19.9307 11.1414C17.6016 11.1414 15.4416 11.5052 13.9096 12.1151C13.2513 12.3772 12.7615 12.6659 12.4797 12.9312C12.4617 12.9481 12.4453 12.9642 12.4304 12.9795L12.4163 12.9944L12.4419 13.0213L12.4797 13.058C12.7615 13.3234 13.2513 13.612 13.9096 13.8741C15.4416 14.4841 17.6016 14.8478 19.9307 14.8478C22.2599 14.8478 24.4199 14.4841 25.9519 13.8741C26.6102 13.612 27.1 13.3234 27.3818 13.058C27.3998 13.0411 27.4162 13.025 27.4311 13.0097L27.4454 12.9944L27.4196 12.9679L27.3818 12.9312C27.1 12.6659 26.6102 12.3772 25.9519 12.1151C24.4199 11.5052 22.2599 11.1414 19.9307 11.1414Z" fill="#0149FF"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB