web/satellite:access grant empty state (#3970)
This commit is contained in:
Malcolm Bouzi
GitHub
parent
1b4bfbb9d2
commit
2e6ffd9af6
@ -1,14 +1,38 @@
|
||||
// Copyright (C) 2020 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
<template>
|
||||
<h2>Access Grants</h2>
|
||||
<div class="access-grants">
|
||||
<h2 class="access-grants__title">Access Grants</h2>
|
||||
<EmptyState />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
import EmptyState from './EmptyState.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
EmptyState,
|
||||
},
|
||||
})
|
||||
|
||||
export default class AccessGrants extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.access-grants {
|
||||
position: relative;
|
||||
padding: 40px 30px 55px 30px;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #263549;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
75
web/satellite/src/components/accessGrants/EmptyState.vue
Normal file
75
web/satellite/src/components/accessGrants/EmptyState.vue
Normal file
@ -0,0 +1,75 @@
|
||||
// Copyright (C) 2020 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__modal">
|
||||
<Key />
|
||||
<h4 class="empty-state__modal__heading">Create Your First Access Grant</h4>
|
||||
<p class="empty-state__modal__subheading">Get started by creating an Access to interact with your Buckets</p>
|
||||
<VButton
|
||||
label="Create Access Grant +"
|
||||
width="199px"
|
||||
height="44px"
|
||||
class="empty-state__modal__cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import VButton from '@/components/common/VButton.vue';
|
||||
|
||||
import Key from '@/../static/images/accessGrants/key.svg';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Key,
|
||||
VButton,
|
||||
},
|
||||
})
|
||||
|
||||
export default class EmptyState extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.empty-state {
|
||||
background-image: url('../../../static/images/accessGrants/access-grants-bg.png');
|
||||
background-size: contain;
|
||||
margin-top: 40px;
|
||||
|
||||
&__modal {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 660px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
padding: 100px 30px;
|
||||
position: relative;
|
||||
top: 110px;
|
||||
|
||||
&__heading {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__subheading {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
margin: 25px auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
web/satellite/static/images/accessGrants/access-grants-bg.png
Executable file
BIN
web/satellite/static/images/accessGrants/access-grants-bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
10
web/satellite/static/images/accessGrants/key.svg
Normal file
10
web/satellite/static/images/accessGrants/key.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44 7.6932e-06L43.7168 7.64598L40.2494 7.71515L40.0896 11.2732L36.0058 11.9587L36.0225 15.3402L32.5917 15.3728L32.1798 19.1829L28.565 22.7972L30.6603 30.6179C31.0306 32 30.6355 33.4746 29.6237 34.4863L21.2831 42.8269C20.2714 43.8386 18.7968 44.2338 17.4148 43.8635L6.02126 40.8106C4.63923 40.4403 3.55974 39.3608 3.18942 37.9787L0.136548 26.5852C-0.233767 25.2032 0.161355 23.7286 1.17307 22.7169L9.51369 14.3763C10.5254 13.3645 12 12.9694 13.3821 13.3397L21.2023 15.4344L36.354 0.28319L44 7.6932e-06ZM15.1152 28.8848C13.3948 27.1644 10.6056 27.1644 8.88518 28.8848C7.1648 30.6052 7.1648 33.3944 8.88518 35.1148C10.6056 36.8352 13.3948 36.8352 15.1152 35.1148C16.8356 33.3944 16.8356 30.6052 15.1152 28.8848Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M40.2295 6.71535L39.2925 6.73404L39.2504 7.67027L39.1269 10.4208L35.8403 10.9725L35.0017 11.1133L35.0059 11.9637L35.0176 14.3497L32.5822 14.3729L31.6931 14.3813L31.5975 15.2654L31.2235 18.725L27.858 22.09L27.4497 22.4982L27.5991 23.0559L29.6943 30.8767L29.6943 30.8768C29.9722 31.9137 29.6757 33.0201 28.9166 33.7792L20.576 42.1198C19.8169 42.8789 18.7105 43.1754 17.6736 42.8975L6.28008 39.8446C5.24314 39.5668 4.4332 38.7569 4.15535 37.7199L1.10247 26.3264C0.824626 25.2895 1.12109 24.1831 1.88018 23.424L10.2208 15.0834C10.9799 14.3243 12.0863 14.0278 13.1232 14.3057L13.1233 14.3057L20.9435 16.4003L21.5011 16.5497L21.9094 16.1415L36.7835 1.26797L42.9608 1.03918L42.7525 6.66502L40.2295 6.71535ZM15.8223 28.1777C13.7114 26.0668 10.289 26.0668 8.17807 28.1777C6.06716 30.2886 6.06716 33.711 8.17807 35.8219C10.289 37.9328 13.7114 37.9328 15.8223 35.8219C17.9332 33.711 17.9332 30.2886 15.8223 28.1777Z" stroke="#F4814F" stroke-opacity="0.29" stroke-width="2"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="22" y1="3.8466e-06" x2="22" y2="44" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFB600"/>
|
||||
<stop offset="1" stop-color="#FFD300"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in New Issue
Block a user