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

web/satellite: make project dashboard delay message more visible

Browse Source 
WHAT:
replace info icon with a regular message

WHY:
better user experience

Change-Id: I7edaf1d139f824752eb3c96bcfbba7e5ef2aa09f
This commit is contained in:
Vitalii Shpital 2021-04-25 17:20:31 +03:00
parent a84b8367dc
commit 64c82507c5
2 changed files with 22 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/satellite/src/components/project/ProjectDashboard.vue
View File

@ -4,12 +4,10 @@
<template>
<div class="dashboard-area">
<div class="dashboard-area__header-wrapper">
<h1 class="dashboard-area__title">{{projectName}} Dashboard</h1>
<VInfo
class="dashboard-area__tooltip__wrapper"
bold-text="Expect a delay of a few hours between network activity and the latest dashboard stats.">
<InfoIcon class="dashboard-area__tooltip__icon"/>
</VInfo>
<h1 class="dashboard-area__header-wrapper__title">{{projectName}} Dashboard</h1>
<p class="dashboard-area__header-wrapper__message">
Expect a delay of a few hours between network activity and the latest dashboard stats.
</p>
</div>
<ProjectUsage/>
<ProjectSummary/>
@ -20,13 +18,10 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VInfo from '@/components/common/VInfo.vue';
import BucketArea from '@/components/project/buckets/BucketArea.vue';
import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
import InfoIcon from '@/../static/images/common/infoTooltipSm.svg';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
@ -34,10 +29,8 @@ import { MetaUtils } from '@/utils/meta';
@Component({
components: {
BucketArea,
InfoIcon,
ProjectUsage,
ProjectSummary,
VInfo,
},
})
export default class ProjectDashboard extends Vue {
@ -78,40 +71,24 @@ export default class ProjectDashboard extends Vue {
padding: 50px 30px 60px 30px;
font-family: 'font_regular', sans-serif;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 22px;
line-height: 27px;
color: #384b65;
margin: 0 0 30px 0;
}
&__header-wrapper {
display: flex;
margin-top: 10px;
}
flex-direction: column;
margin: 10px 0 30px 0;
&__tooltip {
&__title {
font-family: 'font_bold', sans-serif;
font-size: 22px;
line-height: 27px;
color: #384b65;
margin: 0;
}
&__wrapper {
margin: 7px 0 0 10px;
/deep/ .info__message-box {
background-image: url('../../../static/images/tooltipMessageBg.png');
min-width: 300px;
text-align: left;
left: 195px;
bottom: 15px;
padding: 10px 10px 10px 35px;
&__text {
&__bold-text {
font-family: 'font_medium', sans-serif;
color: #354049;
}
}
}
&__message {
font-size: 16px;
line-height: 20px;
color: #384b65;
margin: 10px 0 0 0;
}
}
}

8
web/satellite/tests/unit/project/__snapshots__/ProjectDashboard.spec.ts.snap
View File

@ -3,10 +3,10 @@
exports[`ProjectDashboard.vue renders correctly 1`] = `
<div class="dashboard-area">
<div class="dashboard-area__header-wrapper">
<h1 class="dashboard-area__title">test Dashboard</h1>
<vinfo-stub text="" boldtext="Expect a delay of a few hours between network activity and the latest dashboard stats." class="dashboard-area__tooltip__wrapper">
<infoicon-stub class="dashboard-area__tooltip__icon"></infoicon-stub>
</vinfo-stub>
<h1 class="dashboard-area__header-wrapper__title">test Dashboard</h1>
<p class="dashboard-area__header-wrapper__message">
Expect a delay of a few hours between network activity and the latest dashboard stats.
</p>
</div>
<projectusage-stub></projectusage-stub>
<projectsummary-stub></projectsummary-stub>