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

web/satellite: bakeoff UI prettifying

Browse Source 
Change-Id: I0e5b83b44f61ec04f1cb260333a0f4c60f81289e
This commit is contained in:
VitaliiShpital 2020-01-24 14:38:42 +02:00 committed by Vitalii Shpital
parent d5a60aec58
commit 5e831f1f4d
12 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/satellite/src/components/apiKeys/ApiKeysArea.vue
View File

@ -274,7 +274,7 @@ export default class ApiKeysArea extends Vue {
}
public get isTitleShown(): boolean {
return !this.isBannerShown && this.isEmpty;
return !(this.isBannerShown && this.isEmpty);
}
public get hasSearchQuery(): boolean {
@ -432,6 +432,7 @@ export default class ApiKeysArea extends Vue {
.pagination-area {
margin-left: -25px;
padding-bottom: 15px;
}
.header-default-state,

2
web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue
View File

@ -130,7 +130,7 @@ export default class ApiKeysCopyPopup extends Vue {
left: 0;
background-color: #f5f6fa;
width: 100%;
height: 70vh;
height: 70.5vh;
z-index: 100;
opacity: 0.3;
}

2
web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue
View File

@ -156,7 +156,7 @@ export default class ApiKeysCreationPopup extends Vue {
left: 0;
background-color: #f5f6fa;
width: 100%;
height: 70vh;
height: 70.5vh;
z-index: 100;
opacity: 0.3;
}

15
web/satellite/src/components/buckets/NoBucketsArea.vue
View File

@ -41,8 +41,7 @@
</div>
<div class="no-buckets-area__footer">
<a class="no-buckets-area__footer__button" href="https://documentation.tardigrade.io/api-reference/uplink-cli" target="_blank">
<ButtonArrowIcon/>
<p class="no-buckets-area__footer__button__label">Create My First Bucket</p>
<p class="no-buckets-area__footer__button__label">Get Started</p>
</a>
<a class="no-buckets-area__footer__help" href="https://support.tardigrade.io/hc/en-us/articles/360035332472-Why-can-t-I-upload-from-the-browser-" target="_blank">Why can't I upload from the browser?</a>
</div>
@ -54,7 +53,6 @@ import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import ButtonArrowIcon from '@/../static/images/buckets/noBucketState/button.svg';
import DotsIcon from '@/../static/images/buckets/noBucketState/dots.svg';
import FirstStepIcon from '@/../static/images/buckets/noBucketState/one.svg';
import ThirdStepIcon from '@/../static/images/buckets/noBucketState/three.svg';
@ -67,13 +65,11 @@ import SecondStepIcon from '@/../static/images/buckets/noBucketState/two.svg';
SecondStepIcon,
ThirdStepIcon,
DotsIcon,
ButtonArrowIcon,
},
})
export default class NoBucketArea extends Vue {}
</script>
<style scoped lang="scss">
h1,
h2,
@ -187,17 +183,16 @@ export default class NoBucketArea extends Vue {}
display: flex;
justify-content: center;
align-items: center;
width: 250px;
padding: 0 30px;
height: 55px;
background-color: #2683ff;
border-radius: 6px;
&__label {
color: #fff;
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
margin: 2px 0 0 10px;
font-family: 'font_bold', sans-serif;
font-size: 18px;
line-height: 21px;
}
&:hover {

4
web/satellite/src/components/common/VButton.vue
View File

@ -12,7 +12,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
/**
* Custom button component with label.
@ -87,7 +87,7 @@ export default class VButton extends Vue {
}
&:hover {
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
background-color: #0059d0;
&.white {
box-shadow: none !important;

5
web/satellite/src/components/header/AccountDropdown.vue
View File

@ -71,13 +71,14 @@ export default class AccountDropdown extends Vue {
<style scoped lang="scss">
.account-dropdown-choice-container {
position: absolute;
top: 9vh;
top: 75px;
right: 0;
border-radius: 4px;
padding: 10px 0 10px 0;
padding: 10px 0;
box-shadow: 0 4px rgba(231, 232, 238, 0.6);
background-color: #fff;
z-index: 1120;
border-top: 1px solid rgba(169, 181, 193, 0.3);
}
.account-dropdown-overflow-container {

2
web/satellite/src/components/header/headerArea.scss
View File

@ -9,7 +9,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 55px;
padding: 0 65px;
position: relative;
user-select: none;

16
web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue
View File

@ -5,6 +5,7 @@
<div class="project-selection-container" id="projectDropdownButton">
<p class="project-selection-container__no-projects-text" v-if="!hasProjects">You have no projects</p>
<div class="project-selection-toggle-container" @click="toggleSelection" v-if="hasProjects">
<p class="project-selection-toggle-container__common">Project:</p>
<h1 class="project-selection-toggle-container__name">{{name}}</h1>
<div class="project-selection-toggle-container__expander-area">
<ExpandIcon
@ -92,6 +93,17 @@ export default class ProjectSelectionArea extends Vue {
width: 100%;
height: 50px;
&__common {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: rgba(56, 75, 101, 0.4);
opacity: 0.7;
cursor: pointer;
user-select: none;
margin-right: 5px;
}
&__name {
font-family: 'font_medium', sans-serif;
font-size: 16px;
@ -120,6 +132,10 @@ export default class ProjectSelectionArea extends Vue {
.project-selection-toggle-container {
justify-content: space-between;
margin-left: 10px;
&__common {
display: none;
}
}
}
</style>

3
web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
View File

@ -91,13 +91,14 @@ export default class ProjectSelectionDropdown extends Vue {
.project-selection-choice-container {
position: absolute;
top: 9vh;
top: 75px;
left: -5px;
border-radius: 4px;
padding: 10px 0 10px 0;
box-shadow: 0 4px rgba(231, 232, 238, 0.6);
background-color: #fff;
z-index: 1120;
border-top: 1px solid rgba(169, 181, 193, 0.3);
}
.project-selection-overflow-container {

2
web/satellite/src/components/project/UsageReport.vue
View File

@ -29,7 +29,7 @@
<div class="usage-report-container__main-area">
<div class="usage-report-container__main-area__info-area">
<div class="usage-report-container__main-area__info-area__item">
<h1 class="usage-report-container__main-area__info-area__item__title">Storage, {{storageDataDimension}}*h</h1>
<h1 class="usage-report-container__main-area__info-area__item__title">Storage, {{storageDataDimension}} x Hours</h1>
<h2 class="usage-report-container__main-area__info-area__item__amount">{{storage}}</h2>
</div>
<div class="usage-report-container__main-area__info-area__item">

11
web/satellite/static/images/buckets/noBucketState/button.svg
View File

@ -1,11 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M18.7676 0H11.8907C11.2109 0 10.658 0.553039 10.658 1.23273C10.658 1.91243 11.2109 2.46547 11.8907 2.46547H15.7916L9.2845 8.97246C9.05154 9.20527 8.92334 9.5148 8.92334 9.84418C8.92334 10.1736 9.05147 10.483 9.28435 10.7156C9.51724 10.9487 9.82669 11.077 10.1561 11.077C10.4853 11.077 10.7949 10.9488 11.0279 10.7158L17.5349 4.20876V8.10962C17.5349 8.78932 18.0879 9.34235 18.7676 9.34235C19.4473 9.34235 20.0003 8.78932 20.0003 8.10962V1.23273C20.0003 0.553039 19.4473 0 18.7676 0Z" fill="white"/>
<path d="M14.1685 17.8867H2.11326V5.83152H11.1799L13.2932 3.71826H1.05663C0.473088 3.71826 0 4.19135 0 4.77489V18.9434C0 19.5269 0.473088 20 1.05663 20H15.2251C15.8086 20 16.2817 19.5269 16.2817 18.9434V6.70683L14.1685 8.82009V17.8867Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

2
web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap
View File

@ -38,7 +38,7 @@ exports[`ApiKeysArea renders correctly 1`] = `
exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
<div class="api-keys-area">
<!---->
<h1 class="api-keys-area__title">API Keys</h1>
<div class="api-keys-area__container">
<apikeyscreationpopup-stub></apikeyscreationpopup-stub>
<apikeyscopypopup-stub apikeysecret=""></apikeyscopypopup-stub>