web/satellite: make preliminary changes for new access grants flow (#4801)

Made some small styling changes to access grants and common components
Added svg and png files to be used in the new access grant modal

Co-authored-by: Maximillian von Briesen <mobyvb@gmail.com>
Co-authored-by: hovex023 <97616907+hovex023@users.noreply.github.com>
This commit is contained in:
cl-mitch 2022-05-18 12:10:26 -05:00 committed by GitHub
parent d90ce467fc
commit f08732f30d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 292 additions and 30 deletions

View File

@ -2,8 +2,8 @@
// See LICENSE for copying information.
<template>
<div v-click-outside="closeDropdown" class="buckets-dropdown">
<div class="buckets-dropdown__container">
<div v-click-outside="closeDropdown" :class="`buckets-dropdown ${showScrollbar ? 'show-scroll' : ''}`">
<div :class="`buckets-dropdown__container ${showScrollbar ? 'show-scroll' : ''}`">
<p class="buckets-dropdown__container__all" @click.stop="selectAllBuckets">
All
</p>
@ -43,7 +43,7 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Prop } from 'vue-property-decorator';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
@ -59,6 +59,8 @@ import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
},
})
export default class BucketsDropdown extends Vue {
@Prop({default: false})
private readonly showScrollbar: boolean;
public bucketSearch = '';
/**
@ -242,4 +244,13 @@ export default class BucketsDropdown extends Vue {
}
}
}
.show-scroll {
padding-right: 2px;
width: calc(100% - 2px);
}
.show-scroll::-webkit-scrollbar {
width: 4px;
}
</style>

View File

@ -13,12 +13,12 @@
alt="Arrow down (expand)"
/>
</div>
<BucketsDropdown v-if="isDropdownShown" />
<BucketsDropdown v-if="isDropdownShown" :show-scrollbar="showScrollbar" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
@ -33,6 +33,8 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
},
})
export default class BucketsSelection extends Vue {
@Prop({default: false})
private readonly showScrollbar: boolean;
/**
* Toggles dropdown visibility.
*/

View File

@ -2,9 +2,10 @@
// See LICENSE for copying information.
<template>
<div class="duration-selection">
<div :class="`duration-selection ${containerStyle}`">
<div
class="duration-selection__toggle-container"
:class="`duration-selection__toggle-container ${textStyle}`"
aria-roledescription="select-duration"
@click.stop="togglePicker"
>
@ -22,7 +23,7 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
@ -38,6 +39,12 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
})
export default class DurationSelection extends Vue {
@Prop({default: ''})
private readonly containerStyle: string;
@Prop({default: ''})
private readonly textStyle: string;
public dateRangeLabel = 'Forever';
/**
@ -117,4 +124,14 @@ export default class DurationSelection extends Vue {
}
}
}
.access-date-container {
margin-left: 0;
height: 30px;
border: 1px solid #c8d3de;
}
.access-date-text {
padding: 10px 20px;
}
</style>

View File

@ -9,6 +9,8 @@
@click="onPress"
>
<slot name="icon" />
<div v-if="isWhiteGreen" class="greenCheck">&#x2713;</div>
<div v-if="isGreenWhite" class="whiteCheck">&#x2713;</div>
<span class="label" :class="{uppercase: isUppercase}">{{ label }}</span>
</div>
</template>
@ -45,6 +47,10 @@ export default class VButton extends Vue {
@Prop({default: false})
private readonly isBlueWhite: boolean;
@Prop({default: false})
private readonly isWhiteGreen: boolean;
@Prop({default: false})
private readonly isGreenWhite: boolean;
@Prop({default: false})
private isDisabled: boolean;
@Prop({default: false})
private readonly isUppercase: boolean;
@ -70,6 +76,10 @@ export default class VButton extends Vue {
if (this.isBlueWhite) return 'container blue-white';
if (this.isWhiteGreen) return 'container white-green';
if (this.isGreenWhite) return 'container green-white';
return 'container';
}
}
@ -117,6 +127,20 @@ export default class VButton extends Vue {
}
}
.white-green {
background-color: transparent !important;
border: 1px solid #afb7c1 !important;
.label {
color: #00ac26 !important;
}
}
.green-white {
background-color: #00ac26 !important;
border: 1px solid #00ac26 !important;
}
.grey-blue {
background-color: #fff !important;
border: 2px solid #d9dbe9 !important;
@ -152,6 +176,16 @@ export default class VButton extends Vue {
background-color: #0149ff;
cursor: pointer;
.greenCheck {
color: #00ac26 !important;
margin-right: 5px;
}
.whiteCheck {
color: #fff !important;
margin-right: 5px;
}
.label {
font-family: 'font_medium', sans-serif;
line-height: 23px;

View File

@ -0,0 +1,4 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20.5" r="20" fill="#EBEEF1"/>
<path d="M16.3022 27.5119L13.3108 27.6989C13.0458 27.7154 12.8175 27.514 12.801 27.249C12.7997 27.2291 12.7997 27.209 12.801 27.1891L12.988 24.1976C12.9953 24.0807 13.045 23.9705 13.1278 23.8877L16.9684 20.047L16.9539 19.9986C16.4357 18.2291 16.8832 16.2882 18.1878 14.9204L18.2307 14.876L18.2751 14.8311C20.3168 12.7894 23.6271 12.7894 25.6688 14.8311C27.7105 16.8728 27.7105 20.183 25.6688 22.2247C24.3116 23.5819 22.3517 24.0653 20.5589 23.5625L20.5011 23.5459L20.4527 23.5315L16.6122 27.372C16.5294 27.4548 16.4191 27.5046 16.3022 27.5119ZM14.1799 26.32L15.9023 26.2123L20.119 21.9955L20.5233 22.1567C21.9622 22.7301 23.6197 22.4041 24.7339 21.2899C26.2593 19.7645 26.2593 17.2913 24.7339 15.7659C23.2085 14.2405 20.7353 14.2405 19.2099 15.7659C18.1084 16.8675 17.7772 18.5 18.3239 19.9272L18.3431 19.9764L18.5042 20.3807L14.2876 24.5976L14.1799 26.32ZM21.5875 18.9123C22.1038 19.4286 22.9409 19.4286 23.4572 18.9123C23.9735 18.396 23.9735 17.559 23.4572 17.0427C22.9409 16.5264 22.1038 16.5264 21.5875 17.0427C21.0712 17.559 21.0712 18.396 21.5875 18.9123Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.28021 7.48016C8.13064 7.62973 7.89124 7.63471 7.73568 7.49511L7.71989 7.48016L0.916093 0.676357C0.761367 0.521631 0.761367 0.270771 0.916093 0.116045C1.06566 -0.033524 1.30506 -0.0385096 1.46062 0.101088L1.47641 0.116045L8.00004 6.63969L14.5237 0.116045C14.6733 -0.033524 14.9127 -0.0385096 15.0682 0.101088L15.084 0.116045C15.2336 0.265613 15.2386 0.505014 15.099 0.660572L15.084 0.676357L8.28021 7.48016Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 536 B

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-383" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M26.5378 18.7079C27.7885 19.9587 27.8 21.9793 26.5581 23.2211C26.0549 23.7243 25.4239 24.0217 24.768 24.1143L24.5429 25.3899C24.5263 26.3906 22.4781 27.1998 19.954 27.1998C17.4449 27.1998 15.4062 26.4003 15.3657 25.4079L15.3653 25.3899L13.6398 15.614C13.6204 15.5448 13.6079 15.4749 13.6028 15.4042L13.6001 15.3884L13.6018 15.3885C13.6007 15.3689 13.6001 15.3493 13.6001 15.3296C13.6001 13.9324 16.4448 12.7998 19.954 12.7998C23.4631 12.7998 26.3078 13.9324 26.3078 15.3296C26.3078 15.3493 26.3072 15.3689 26.3061 15.3885L26.3078 15.3884L26.305 15.4052C26.2999 15.4751 26.2876 15.5443 26.2685 15.6127L25.8445 18.0146L26.5378 18.7079ZM24.7078 17.0081C23.5438 17.5303 21.8454 17.8594 19.954 17.8594C18.0626 17.8594 16.3642 17.5303 15.2002 17.0082L16.451 24.0956L16.6555 25.1808L16.6744 25.1955C16.7814 25.2757 16.9469 25.3661 17.1619 25.4532L17.2055 25.4706C17.8983 25.7415 18.8856 25.9055 19.954 25.9055C21.0285 25.9055 22.0208 25.7396 22.7137 25.4662C22.9634 25.3676 23.1496 25.264 23.2588 25.1758L23.2677 25.1685L23.4685 24.0308C22.9635 23.892 22.485 23.6275 22.0827 23.2379L22.0449 23.2008L19.4444 20.6003C19.1917 20.3476 19.1917 19.9378 19.4444 19.6851C19.691 19.4385 20.087 19.4325 20.3409 19.6671L20.3597 19.6851L22.9601 22.2856C23.175 22.5004 23.4272 22.6541 23.6951 22.7465L24.7078 17.0081ZM25.5699 19.5704L25.0142 22.7196C25.2436 22.6287 25.4581 22.4908 25.6429 22.3059C26.3682 21.5806 26.3702 20.3993 25.6489 19.65L25.6226 19.6231L25.5699 19.5704ZM19.954 14.0941C18.4012 14.0941 16.9612 14.3366 15.9399 14.7433C15.501 14.918 15.1745 15.1104 14.9866 15.2873C14.9746 15.2986 14.9637 15.3093 14.9537 15.3195L14.9443 15.3295L14.9614 15.3474L14.9866 15.3718C15.1745 15.5487 15.501 15.7412 15.9399 15.9159C16.9612 16.3226 18.4012 16.5651 19.954 16.5651C21.5067 16.5651 22.9467 16.3226 23.968 15.9159C24.4069 15.7412 24.7334 15.5487 24.9213 15.3718C24.9333 15.3606 24.9443 15.3498 24.9542 15.3397L24.9637 15.3295L24.9465 15.3118L24.9213 15.2873C24.7334 15.1104 24.4069 14.918 23.968 14.7433C22.9467 14.3366 21.5067 14.0941 19.954 14.0941Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-393" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-453" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M23.6296 12.7998C23.9822 12.7998 24.2698 13.0787 24.2836 13.428L24.2841 13.4544L24.2842 13.9502C24.7132 14.0332 25.0122 14.1563 25.3125 14.3169C25.9137 14.6384 26.3855 15.1103 26.707 15.7115L26.7346 15.7638L26.7752 15.8437C27.0527 16.4055 27.1998 17.0293 27.1998 18.5535V22.1856C27.1998 23.8301 27.0286 24.4265 26.707 25.0277C26.3855 25.6289 25.9137 26.1007 25.3125 26.4223L25.2602 26.4499L25.1802 26.4904C24.6184 26.7679 23.9947 26.915 22.4704 26.915H17.5292C15.8847 26.915 15.2884 26.7438 14.6871 26.4223C14.0859 26.1007 13.6141 25.6289 13.2926 25.0277L13.2642 24.9738L13.2237 24.8939C12.951 24.3413 12.8044 23.728 12.7998 22.2565V18.5535C12.7998 16.909 12.971 16.3127 13.2926 15.7115C13.6141 15.1103 14.0859 14.6384 14.6871 14.3169L14.741 14.2885C15.0373 14.1346 15.3401 14.0173 15.775 13.9391L15.775 13.4544C15.775 13.0929 16.0681 12.7998 16.4296 12.7998C16.7822 12.7998 17.0698 13.0787 17.0836 13.428L17.0841 13.4544L17.084 13.8288L17.2291 13.8261C17.3031 13.825 17.3795 13.8244 17.4584 13.8241H22.4704C22.6508 13.8241 22.8187 13.8262 22.9752 13.8303L22.975 13.4544C22.975 13.0929 23.2681 12.7998 23.6296 12.7998ZM25.8906 19.0605H14.1088L14.1089 22.2524L14.1097 22.3771C14.119 23.5359 14.2089 23.9652 14.4469 24.4103C14.6465 24.7834 14.9314 25.0684 15.3045 25.2679L15.3513 25.2924L15.399 25.3162C15.8138 25.518 16.264 25.5974 17.3402 25.6053L17.5292 25.6059H22.4704C23.7721 25.6059 24.2274 25.518 24.6951 25.2679C25.0682 25.0684 25.3531 24.7834 25.5527 24.4103L25.5771 24.3636L25.601 24.3158C25.8028 23.901 25.8821 23.4509 25.89 22.3746L25.8907 22.1856L25.8906 19.0605ZM22.4704 15.1332H17.4624L17.3377 15.134C17.249 15.1347 17.1645 15.1359 17.084 15.1376L17.0841 15.979C17.0841 16.3405 16.7911 16.6336 16.4296 16.6336C16.0769 16.6336 15.7893 16.3546 15.7755 16.0054L15.775 15.979L15.775 15.2792C15.6012 15.3283 15.4538 15.3914 15.3045 15.4713C14.9314 15.6708 14.6465 15.9558 14.4469 16.3288L14.4225 16.3756C14.2485 16.7156 14.1588 17.0643 14.1251 17.7513H25.8745C25.8392 17.0328 25.7428 16.6844 25.5527 16.3288C25.3531 15.9558 25.0682 15.6708 24.6951 15.4713L24.6483 15.4468C24.5323 15.3874 24.4153 15.3379 24.2842 15.297L24.2841 15.979C24.2841 16.3405 23.9911 16.6336 23.6296 16.6336C23.2769 16.6336 22.9893 16.3546 22.9755 16.0054L22.975 15.979L22.9752 15.1387C22.8762 15.1363 22.7712 15.1347 22.6594 15.1339L22.4704 15.1332Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-463" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 479 B

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-223" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M19.9998 12.7998C23.9763 12.7998 27.1998 16.0234 27.1998 19.9998C27.1998 23.9763 23.9763 27.1998 19.9998 27.1998C16.0234 27.1998 12.7998 23.9763 12.7998 19.9998C12.7998 16.0234 16.0234 12.7998 19.9998 12.7998ZM20.5949 14.1386L20.5948 20.0593L20.5949 20.0637C20.5942 20.1822 20.5614 20.3019 20.4933 20.4094C20.4879 20.418 20.4824 20.4263 20.4766 20.4345C20.4749 20.437 20.4731 20.4396 20.4712 20.4421C20.4669 20.4482 20.4625 20.4541 20.458 20.4599C20.4569 20.4613 20.4557 20.4627 20.4546 20.4642C20.4496 20.4706 20.4445 20.4769 20.4393 20.483C20.438 20.4844 20.4368 20.4859 20.4355 20.4873C20.4134 20.5131 20.3896 20.5367 20.3643 20.5582L16.0337 24.3557C17.0805 25.3093 18.4722 25.8907 19.9998 25.8907C23.2533 25.8907 25.8907 23.2533 25.8907 19.9998C25.8907 16.9472 23.5689 14.4369 20.5949 14.1386ZM14.1089 19.9998C14.1089 21.2542 14.501 22.4171 15.1693 23.3725L18.8505 20.1442L14.6663 17.4951C14.3088 18.2552 14.1089 19.1042 14.1089 19.9998ZM15.352 16.3799L19.2858 18.8702L19.2858 14.1517C17.6908 14.3444 16.2921 15.1746 15.352 16.3799Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-233" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-525" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M21.7552 12.7998C23.1585 12.7998 24.0952 13.0301 24.9037 13.4625C25.7122 13.8949 26.3468 14.5294 26.7792 15.3379C27.2116 16.1464 27.4418 17.0831 27.4418 18.4865V18.4879C27.4418 19.8913 27.2116 20.828 26.7792 21.6365C26.3468 22.445 25.7122 23.0795 24.9037 23.5119C24.0952 23.9443 23.1585 24.1746 21.7552 24.1746H17.3199L12.7998 27.1998V18.9775C12.7998 16.9849 13.0301 16.1464 13.4625 15.3379C13.8949 14.5294 14.5294 13.8949 15.3379 13.4625L15.4027 13.4283C16.192 13.018 17.038 12.7998 18.9775 12.7998H21.7552ZM21.7552 14.1309H18.9029L18.7552 14.1318C17.2805 14.1443 16.6202 14.2862 15.9657 14.6362C15.3891 14.9446 14.9446 15.3891 14.6362 15.9657L14.603 16.0291C14.2661 16.6852 14.1351 17.3732 14.1309 18.9029V24.8034L16.9713 22.8435H21.7552C22.8931 22.8435 23.6338 22.6816 24.276 22.3382C24.8525 22.0298 25.297 21.5853 25.6054 21.0087C25.941 20.3811 26.1033 19.6595 26.1105 18.5649L26.1107 18.4879V18.4865C26.1107 17.3485 25.9488 16.6079 25.6054 15.9657C25.297 15.3891 24.8525 14.9446 24.276 14.6362C23.6484 14.3006 22.9267 14.1383 21.8321 14.1311L21.7552 14.1309Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-535" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-311" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M21.2478 12.7998C21.905 12.7998 22.4378 13.3326 22.4378 13.9899L22.4378 14.1839C22.4378 14.6253 22.7956 14.983 23.2369 14.9831C23.3772 14.9831 23.515 14.9461 23.6365 14.876L23.8046 14.779C24.3738 14.4503 25.1016 14.6454 25.4303 15.2146L26.8584 17.6881C27.1812 18.2473 26.9987 18.9597 26.4524 19.2961L26.4227 19.3138L26.2547 19.4108C25.8915 19.6205 25.767 20.085 25.9767 20.4482C26.0434 20.5637 26.1392 20.6595 26.2547 20.7262L26.3633 20.7889C26.9325 21.1175 27.1275 21.8454 26.7989 22.4146L25.4303 24.785C25.1074 25.3443 24.3992 25.5423 23.8347 25.2375L23.8046 25.2206L23.6365 25.1236C23.2543 24.9029 22.7656 25.0338 22.5449 25.416C22.4747 25.5375 22.4378 25.6753 22.4378 25.8156L22.4378 26.0097C22.4379 26.6558 21.923 27.1817 21.2811 27.1994L21.2478 27.1998H18.3916C17.7343 27.1998 17.2015 26.667 17.2015 26.0097L17.2015 25.9187C17.2014 25.5102 16.8703 25.1791 16.4618 25.1791C16.332 25.1791 16.2045 25.2133 16.092 25.2782L16.0133 25.3237C15.4541 25.6466 14.7417 25.464 14.4052 24.9177L14.3876 24.8881L12.9595 22.4146C12.6309 21.8454 12.8259 21.1175 13.3951 20.7889L13.5632 20.6918C13.9454 20.4711 14.0763 19.9824 13.8557 19.6002C13.7855 19.4787 13.6846 19.3778 13.5632 19.3077L13.3951 19.2107C12.8359 18.8879 12.6378 18.1797 12.9426 17.6152L12.9595 17.585L14.3281 15.2146C14.6567 14.6454 15.3846 14.4503 15.9538 14.779L16.0623 14.8416C16.4255 15.0513 16.89 14.9269 17.0997 14.5636C17.1664 14.4482 17.2014 14.3172 17.2015 14.1839L17.2015 13.9899C17.2015 13.3326 17.7343 12.7998 18.3916 12.7998H21.2478ZM18.5106 14.1088L18.5105 14.1839C18.5105 14.547 18.415 14.9037 18.2334 15.2181C17.669 16.1957 16.4271 16.5383 15.4432 15.9953L15.4024 15.9721L14.1528 18.1364L14.2177 18.1739C14.5221 18.3497 14.7776 18.5987 14.961 18.8979L14.9894 18.9456C15.5647 19.9421 15.2341 21.213 14.2531 21.8046L14.2178 21.8255L14.1528 21.863L15.462 24.1307L15.487 24.1168C15.7695 23.964 16.084 23.8797 16.4051 23.8708L16.4618 23.87C17.5672 23.87 18.4682 24.7455 18.5091 25.841L18.5104 25.8907H21.1288L21.1287 25.8156C21.1287 25.464 21.2166 25.1183 21.3841 24.8098L21.4112 24.7614C21.9865 23.765 23.2525 23.4159 24.2554 23.9697L24.2911 23.9899L24.3561 24.0273L25.6057 21.863L25.6001 21.8599C25.3014 21.6874 25.0508 21.4431 24.8708 21.1495L24.843 21.1027C24.2786 20.1251 24.6029 18.8783 25.5651 18.2977L25.6002 18.2771L25.6652 18.2396L24.3561 15.9721L24.291 16.0097C23.9865 16.1855 23.6432 16.2822 23.2923 16.2914L23.2369 16.2922C22.0856 16.2921 21.1499 15.3693 21.1291 14.2229L21.1287 14.1837L21.1288 14.1089L18.5106 14.1088ZM19.9215 16.7271C21.729 16.7271 23.1942 18.1923 23.1942 19.9998C23.1942 21.8073 21.729 23.2725 19.9215 23.2725C18.114 23.2725 16.6487 21.8073 16.6487 19.9998C16.6487 18.1923 18.114 16.7271 19.9215 16.7271ZM19.9215 18.0362C18.837 18.0362 17.9578 18.9153 17.9578 19.9998C17.9578 21.0843 18.837 21.9634 19.9215 21.9634C21.006 21.9634 21.8851 21.0843 21.8851 19.9998C21.8851 18.9153 21.006 18.0362 19.9215 18.0362Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-321" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -0,0 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#E5E5E5"/>
<g filter="url(#filter0_d_10277_46858)">
<rect x="-32" y="-87" width="410" height="713" rx="10" fill="white"/>
<circle cx="20" cy="20" r="20" fill="#EBEEF1"/>
<path d="M20.0099 12.7998L21.5815 13.8999C22.8592 14.7943 24.3766 15.2814 25.9348 15.2985L26.0198 15.299V21.0186C26.0198 23.1181 24.793 25.0239 22.882 25.8933L20.0099 27.1998L17.1378 25.8933C15.2268 25.0239 14 23.1181 14 21.0186V15.299C15.5502 15.299 17.0638 14.8283 18.3406 13.9492L20.0099 12.7998ZM19.3554 14.8398L19.083 15.0274C17.9679 15.7951 16.6986 16.2969 15.3724 16.5024L15.3091 16.5119V21.0186C15.3091 22.5868 16.2151 24.0121 17.6309 24.679L17.6799 24.7017L19.3554 25.4639V14.8398ZM20.6645 14.8559V25.4638L22.3399 24.7017C23.7674 24.0523 24.6896 22.6375 24.7104 21.0726L24.7107 21.0186V16.513L24.6345 16.5014C23.3023 16.295 22.0277 15.7926 20.907 15.0251L20.8308 14.9724L20.6645 14.8559Z" fill="#56606D"/>
</g>
<defs>
<filter id="filter0_d_10277_46858" x="-62" y="-97" width="470" height="773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0377257 0 0 0 0 0.10428 0 0 0 0 0.170833 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10277_46858"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10277_46858" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,5 @@
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20.5" r="20" fill="#E6EDF7"/>
<rect width="16" height="16" transform="translate(12 12.5)" fill="#E6EDF7"/>
<path d="M20.0176 20.744C20.3733 20.744 20.6632 21.0252 20.6771 21.3774L20.6776 21.404V27.0398C20.6776 27.4043 20.3822 27.6998 20.0176 27.6998C19.662 27.6998 19.3721 27.4186 19.3582 27.0663L19.3576 27.0398V21.404C19.3576 21.0395 19.6531 20.744 20.0176 20.744ZM20.0176 18.2117C21.7316 18.2117 23.1244 19.5873 23.152 21.2947L23.1525 21.3465V25.3062C23.1525 25.6707 22.857 25.9662 22.4925 25.9662C22.1368 25.9662 21.8469 25.6849 21.833 25.3327L21.8325 25.3062V21.3465C21.8325 20.3442 21.0199 19.5317 20.0176 19.5317C19.028 19.5317 18.2234 20.3238 18.2032 21.3085L18.2028 21.3465V25.3062C18.2028 25.6707 17.9073 25.9662 17.5428 25.9662C17.1872 25.9662 16.8973 25.6849 16.8834 25.3327L16.8828 25.3062V21.3465C16.8828 19.6152 18.2863 18.2117 20.0176 18.2117ZM20.0176 15.7397C23.0085 15.7397 25.4387 18.14 25.487 21.1193L25.4877 21.2098V24.4165C25.4877 24.781 25.1922 25.0765 24.8277 25.0765C24.4721 25.0765 24.1822 24.7952 24.1682 24.443L24.1677 24.4165V21.2098C24.1677 18.9177 22.3097 17.0597 20.0176 17.0597C17.7485 17.0597 15.9048 18.8808 15.8681 21.1411L15.8676 21.2098V24.4165C15.8676 24.781 15.5721 25.0765 15.2076 25.0765C14.852 25.0765 14.562 24.7952 14.5481 24.443L14.5476 24.4165V21.2098C14.5476 18.1887 16.9966 15.7397 20.0176 15.7397ZM20.0176 13.2998C23.1988 13.2998 25.9501 15.056 27.1725 17.8803C27.3173 18.2148 27.1635 18.6034 26.829 18.7482C26.4945 18.893 26.1059 18.7392 25.9611 18.4046C24.9505 16.0697 22.6791 14.6198 20.0176 14.6198C17.3569 14.6198 15.0843 16.0692 14.0652 18.4063C13.9195 18.7404 13.5305 18.8931 13.1964 18.7475C12.8623 18.6018 12.7095 18.2128 12.8552 17.8787C14.0867 15.0545 16.838 13.2998 20.0176 13.2998Z" fill="#003DC1"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -20,7 +20,10 @@ exports[`AddStorjForm renders correctly 1`] = `
</div>
<div class="add-storj-area__submit-area">
<!---->
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;"> <span class="label">Continue to Coin Payments</span></div>
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Continue to Coin Payments</span>
</div>
</div>
</div>
`;

View File

@ -40,7 +40,10 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
</div>
<div class="add-storj-area__submit-area">
<!---->
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;"> <span class="label">Continue to Coin Payments</span></div>
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Continue to Coin Payments</span>
</div>
</div>
</div>
<!---->
@ -60,7 +63,10 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 2`] =
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;"> <span class="label">Add STORJ</span></div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Add STORJ</span>
</div>
</div>
</div>
</div>
@ -151,7 +157,10 @@ exports[`PaymentMethods renders correctly with card 1`] = `
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;"> <span class="label">Add STORJ</span></div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Add STORJ</span>
</div>
</div>
</div>
</div>
@ -204,7 +213,10 @@ exports[`PaymentMethods renders correctly without card 1`] = `
<h1 aria-roledescription="title" class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;"> <span class="label">Add STORJ</span></div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 46px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Add STORJ</span>
</div>
</div>
</div>
</div>

View File

@ -1,7 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button.vue renders correctly 1`] = `<div class="container" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;"> <span class="label">Default</span></div>`;
exports[`Button.vue renders correctly 1`] = `
<div class="container" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Default</span>
</div>
`;
exports[`Button.vue renders correctly with isDisabled prop 1`] = `<div class="container disabled" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;"> <span class="label">Default</span></div>`;
exports[`Button.vue renders correctly with isDisabled prop 1`] = `
<div class="container disabled" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Default</span>
</div>
`;
exports[`Button.vue renders correctly with isWhite prop 1`] = `<div class="container white" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;"> <span class="label">Default</span></div>`;
exports[`Button.vue renders correctly with isWhite prop 1`] = `
<div class="container white" style="width: inherit; height: inherit; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Default</span>
</div>
`;

View File

@ -9,7 +9,10 @@ exports[`OverviewStep.vue renders correctly 1`] = `
<p aria-roledescription="server-side-encryption-title" class="overview-container__enc">Server-side encrypted</p>
<h2 class="overview-container__title">Start with web browser</h2>
<p class="overview-container__info">Start uploading files in the browser and instantly see how your data gets distributed over the Storj network around the world.</p>
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;"> <span class="label">Continue in web -&gt;</span></div>
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;">
<!---->
<!----> <span class="label">Continue in web -&gt;</span>
</div>
<p class="overview-container__encryption-container">
By using the web browser you are opting in to
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-server-side-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="server-side-encryption-link" class="overview-container__encryption-container__link">server-side encryption</a>.
@ -19,7 +22,10 @@ exports[`OverviewStep.vue renders correctly 1`] = `
<p aria-roledescription="end-to-end-encryption-title" class="overview-container__enc">End-to-end encrypted</p>
<h2 class="overview-container__title">Start with Uplink CLI</h2>
<p class="overview-container__info">The Uplink CLI is a command-line interface tool which allows you to upload and download files from the network, manage permissions and share files.</p>
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;"> <span class="label">Continue in cli -&gt;</span></div>
<div class="container" style="width: 240px; height: 48px; border-radius: 8px; font-size: 16px;">
<!---->
<!----> <span class="label">Continue in cli -&gt;</span>
</div>
<p class="overview-container__encryption-container">
The Uplink CLI uses
<a href="https://docs.storj.io/concepts/encryption-key/design-decision-end-to-end-encryption" target="_blank" rel="noopener noreferrer" aria-roledescription="end-to-end-encryption-link" class="overview-container__encryption-container__link">end-to-end encryption</a> for object data, metadata and path data.

View File

@ -34,8 +34,14 @@ exports[`CreateProject.vue renders correctly 1`] = `
<!---->
</div>
<div class="create-project__container__button-container">
<div class="create-project__container__button-container__cancel container transparent" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;"> <span class="label">Cancel</span></div>
<div class="container disabled" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;"> <span class="label">Create Project +</span></div>
<div class="create-project__container__button-container__cancel container transparent" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Cancel</span>
</div>
<div class="container disabled" style="width: 210px; height: 48px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Create Project +</span>
</div>
</div>
<!---->
</div>

View File

@ -9,13 +9,19 @@ exports[`EditProjectDetails.vue editing description works correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<!---->
<div class="project-details__wrapper__container__description-editing"><input placeholder="Enter a description for your project" class="project-details__wrapper__container__description-editing__input"> <span class="project-details__wrapper__container__description-editing__limit">4/100</span>
<div class="project-details__wrapper__container__description-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;"> <span class="label">Save</span></div>
<div class="project-details__wrapper__container__description-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Save</span>
</div>
</div>
<!---->
</div>
@ -32,13 +38,19 @@ exports[`EditProjectDetails.vue editing description works correctly 2`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">new description</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<!---->
@ -56,12 +68,18 @@ exports[`EditProjectDetails.vue editing name works correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<!---->
<div class="project-details__wrapper__container__name-editing"><input placeholder="Enter a name for your project" class="project-details__wrapper__container__name-editing__input"> <span class="project-details__wrapper__container__name-editing__limit">4/20</span>
<div class="project-details__wrapper__container__name-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;"> <span class="label">Save</span></div>
<div class="project-details__wrapper__container__name-editing__save-button container" style="width: 66px; height: 30px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Save</span>
</div>
</div>
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<!---->
@ -79,13 +97,19 @@ exports[`EditProjectDetails.vue editing name works correctly 2`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">new name</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<!---->
@ -103,13 +127,19 @@ exports[`EditProjectDetails.vue renders correctly 1`] = `
<p class="project-details__wrapper__container__label">Name</p>
<div class="project-details__wrapper__container__name-area">
<p class="project-details__wrapper__container__name-area__name">test</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<p class="project-details__wrapper__container__label">Description</p>
<div class="project-details__wrapper__container__description-area">
<p class="project-details__wrapper__container__description-area__description">test</p>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;"> <span class="label">Edit</span></div>
<div class="container white" style="width: 64px; height: 28px; border-radius: 6px; font-size: 16px;">
<!---->
<!----> <span class="label">Edit</span>
</div>
</div>
<!---->
<!---->