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

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

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

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

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