web/satellite: added charts date range picker for new project dashboard

Created common VDateRangePicker component to be reused.
Reworked it's styling.
Added date range selection logic for new project dashboard.

Change-Id: Ie9bdd173527514924e437ca5bcc9cfbf7793e4dd

web/satellite/src/components/accessGrants/permissions/DurationPicker.vue

@@ -16,32 +16,25 @@
             </ul>
         </div>
         <hr class="duration-picker__break">
-        <div class="duration-picker__date-picker__wrapper">
+        <div class="duration-picker__wrapper">
-            <DatePicker
+            <VDateRangePicker :on-date-pick="onCustomRangePick" is-open="true" />
-                range
-                open
-                :append-to-body="false"
-                :inline="true"
-                popup-class="duration-picker__date-picker__popup"
-                @change="onCustomRangePick"
-            />
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import DatePicker from 'vue2-datepicker';
-import 'vue2-datepicker/index.css';
 
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
 import { DurationPermission } from '@/types/accessGrants';
 
+import VDateRangePicker from "@/components/common/VDateRangePicker.vue";
+
 // @vue/component
 @Component({
     components: {
-        DatePicker,
+        VDateRangePicker,
     },
 })
 export default class DurationPicker extends Vue {
@@ -150,9 +143,9 @@ export default class DurationPicker extends Vue {
 <style scoped lang="scss">
     .duration-picker {
         background: #fff;
-        width: 530px;
+        width: 600px;
-        height: 400px;
         border: 1px solid #384b65;
+        border-radius: 6px;
         margin: 0 auto;
         -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -193,45 +186,11 @@ export default class DurationPicker extends Vue {
 
         &__break {
             width: 84%;
-            margin: 0 auto;
+            margin: 10px auto;
         }
 
-        &__date-picker {
-
         &__wrapper {
-                position: relative;
+            width: 100%;
-                margin: 0;
-            }
         }
     }
 </style>
-
-<style lang="scss">
-    .duration-picker {
-
-        &__date-picker {
-
-            &__popup {
-                position: absolute;
-                top: 0;
-                left: 25px;
-                width: 480px;
-                height: 210px;
-            }
-        }
-    }
-
-    .mx-calendar {
-        height: 210px;
-    }
-
-    .mx-table-date td,
-    .mx-table-date th {
-        height: 12px;
-        font-size: 10px;
-    }
-
-    .mx-table {
-        height: 70%;
-    }
-</style>

web/satellite/src/components/accessGrants/permissions/DurationSelection.vue

@@ -55,7 +55,7 @@ export default class DurationSelection extends Vue {
      * Toggles duration picker.
      */
     public togglePicker(): void {
-        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DATEPICKER_DROPDOWN);
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
     }
 
     /**
@@ -69,7 +69,7 @@ export default class DurationSelection extends Vue {
      * Indicates if date picker is shown.
      */
     public get isDurationPickerVisible(): boolean {
-        return this.$store.state.appStateModule.appState.isDatePickerShown;
+        return this.$store.state.appStateModule.appState.isAGDatePickerShown;
     }
 
     /**

web/satellite/src/components/common/VButton.vue

@@ -8,6 +8,7 @@
         :style="style"
         @click="onPress"
     >
+        <slot name="icon" />
         <span class="label" :class="{uppercase: isUppercase}">{{ label }}</span>
     </div>
 </template>
@@ -27,6 +28,8 @@ export default class VButton extends Vue {
     private readonly width: string;
     @Prop({default: 'inherit'})
     private readonly height: string;
+    @Prop({default: '16px'})
+    private readonly fontSize: string;
     @Prop({default: '6px'})
     private readonly borderRadius: string;
     @Prop({default: false})
@@ -47,7 +50,7 @@ export default class VButton extends Vue {
     private readonly onPress: () => void;
 
     public get style(): Record<string, unknown> {
-        return { width: this.width, height: this.height, borderRadius: this.borderRadius };
+        return { width: this.width, height: this.height, borderRadius: this.borderRadius, fontSize: this.fontSize };
     }
 
     public get containerClassName(): string {
@@ -80,7 +83,7 @@ export default class VButton extends Vue {
 
     .white {
         background-color: #fff !important;
-        border: 1px solid #afb7c1 !important;
+        border: 1px solid #d8dee3 !important;
 
         .label {
             color: #354049 !important;
@@ -133,7 +136,6 @@ export default class VButton extends Vue {
 
         .label {
             font-family: 'font_medium', sans-serif;
-            font-size: 16px;
             line-height: 23px;
             color: #fff;
             margin: 0;

web/satellite/src/components/common/VDateRangePicker.vue

@@ -0,0 +1,108 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <DatePicker
+        range
+        :open="isOpen"
+        :inline="true"
+        :value="dateRange"
+        popup-class="picker"
+        @change="onDatePick"
+    />
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import DatePicker from 'vue2-datepicker';
+import 'vue2-datepicker/index.css';
+
+// @vue/component
+@Component({
+    components: {
+        DatePicker,
+    },
+})
+export default class VDateRangePicker extends Vue {
+    @Prop({ default: false })
+    public readonly isOpen: boolean
+    @Prop({ default: () => false })
+    public readonly onDatePick: (dateRange: Date[]) => void
+    @Prop({ default: undefined })
+    public readonly dateRange: Date[]
+}
+</script>
+
+<style lang="scss">
+    .picker,
+    .mx-datepicker,
+    .mx-range-wrapper {
+        width: 100%;
+        border: none;
+        border-radius: 8px;
+        cursor: default;
+    }
+
+    .mx-calendar {
+        width: 50%;
+    }
+
+    .mx-date-row {
+        height: 40px;
+    }
+
+    .mx-table th {
+        color: #c8d3de;
+    }
+
+    .mx-table-date .cell.not-current-month {
+        color: #929fb1;
+    }
+
+    .mx-calendar-content .cell {
+        font-size: 12px;
+        line-height: 18px;
+        color: #000;
+    }
+
+    .mx-calendar-content .cell.in-range {
+        color: #000;
+        background-color: #e6edf7;
+        border-radius: 999px;
+    }
+
+    .mx-calendar-content .cell.active {
+        background-color: #0149ff;
+        border-radius: 999px;
+    }
+
+    .mx-calendar-content {
+        height: unset;
+    }
+
+    .mx-btn-current-month,
+    .mx-btn-current-year {
+        pointer-events: none;
+        font-family: 'font_medium', sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        color: #000;
+    }
+
+    .mx-btn:hover {
+        border-color: #000;
+        color: #000;
+    }
+
+    .mx-btn-icon-double-right,
+    .mx-btn-icon-double-left {
+        display: none;
+    }
+
+    .mx-icon-left:before,
+    .mx-icon-right:before {
+        width: 20px;
+        height: 20px;
+        border-width: 4px 0 0 4px;
+    }
+</style>

web/satellite/src/components/project/newProjectDashboard/DateRangeSelection.vue

@@ -0,0 +1,133 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="range-selection">
+        <div
+            class="range-selection__toggle-container"
+            :class="{ active: isOpen }"
+            @click.stop="toggle"
+        >
+            <DatepickerIcon class="range-selection__toggle-container__icon" />
+            <h1 class="range-selection__toggle-container__label">{{ dateRangeLabel }}</h1>
+        </div>
+        <div v-if="isOpen" v-click-outside="closePicker" class="range-selection__popup">
+            <VDateRangePicker :on-date-pick="onDatePick" :is-open="true" :date-range="defaultDateRange" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
+import { ProjectUsageDateRange } from "@/types/projects";
+
+import VDateRangePicker from "@/components/common/VDateRangePicker.vue";
+
+import DatepickerIcon from '@/../static/images/project/datepicker.svg';
+
+// @vue/component
+@Component({
+    components: {
+        DatepickerIcon,
+        VDateRangePicker,
+    },
+})
+
+export default class DateRangeSelection extends Vue {
+    @Prop({ default: null })
+    public readonly dateRange: ProjectUsageDateRange | null;
+    @Prop({ default: () => false })
+    public readonly onDatePick: (dateRange: Date[]) => void;
+    @Prop({ default: () => false })
+    public readonly toggle: () => void;
+    @Prop({ default: false })
+    public readonly isOpen: boolean;
+
+    /**
+     * Closes duration picker.
+     */
+    public closePicker(): void {
+        this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
+    }
+
+    /**
+     * Returns formatted date range string.
+     */
+    public get dateRangeLabel(): string {
+        if (!this.dateRange) {
+            return 'Last 30 days';
+        }
+
+        if (this.dateRange.since.getTime() === this.dateRange.before.getTime()) {
+            return this.dateRange.since.toLocaleDateString('en-US')
+        }
+
+        const sinceFormattedString = this.dateRange.since.toLocaleDateString('en-US');
+        const beforeFormattedString = this.dateRange.before.toLocaleDateString('en-US');
+        return `${sinceFormattedString}-${beforeFormattedString}`;
+    }
+
+    /**
+     * Returns default date range.
+     */
+    public get defaultDateRange(): Date[] {
+        if (this.dateRange) {
+            return [this.dateRange.since, this.dateRange.before]
+        }
+
+        const previous = new Date()
+        previous.setMonth(previous.getMonth() - 1)
+        return [previous, new Date()]
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .range-selection {
+        background-color: #fff;
+        cursor: pointer;
+        font-family: 'font_regular', sans-serif;
+        position: relative;
+
+        &__toggle-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 16px;
+            border-radius: 8px;
+            border: 1px solid #d8dee3;
+
+            &__label {
+                font-family: 'font_medium', sans-serif;
+                font-size: 13px;
+                line-height: 20px;
+                letter-spacing: -0.02em;
+                color: #56606d;
+                margin-left: 9px;
+            }
+        }
+
+        &__popup {
+            position: absolute;
+            top: calc(100% + 5px);
+            right: 0;
+            width: 640px;
+            box-shadow: 0 20px 34px rgba(10, 27, 44, 0.28);
+            border-radius: 8px;
+        }
+    }
+
+    .active {
+        border-color: #0149ff;
+
+        h1 {
+            color: #0149ff;
+        }
+
+        svg path {
+            fill: #0149ff;
+        }
+    }
+</style>

web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue

@@ -27,22 +27,34 @@
         <div class="project-dashboard__stats-header">
             <h2 class="project-dashboard__stats-header__title">Project Stats</h2>
             <div class="project-dashboard__stats-header__buttons">
+                <DateRangeSelection
+                    :date-range="chartsDateRange"
+                    :on-date-pick="onChartsDateRangePick"
+                    :is-open="isChartsDatePicker"
+                    :toggle="toggleChartsDatePicker"
+                />
                 <VButton
                     v-if="!isProAccount"
                     label="Upgrade Plan"
                     width="114px"
                     height="40px"
+                    font-size="13px"
                     :on-press="onUpgradeClick"
-                    is-white="true"
                 />
                 <VButton
                     v-else
+                    class="new-project-button"
                     label="New Project"
-                    width="114px"
+                    width="130px"
                     height="40px"
+                    font-size="13px"
                     :on-press="onCreateProjectClick"
-                    :is-white="!limits.objectCount"
+                    :is-white="true"
-                />
+                >
+                    <template #icon>
+                        <NewProjectIcon />
+                    </template>
+                </VButton>
             </div>
         </div>
         <div class="project-dashboard__charts">
@@ -129,16 +141,20 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import { PROJECTS_ACTIONS } from "@/store/modules/projects";
+import { PROJECTS_ACTIONS, PROJECTS_MUTATIONS } from "@/store/modules/projects";
 import { PAYMENTS_ACTIONS, PAYMENTS_MUTATIONS } from "@/store/modules/payments";
+import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
 import { RouteConfig } from "@/router";
-import { DataStamp, ProjectLimits, ProjectsStorageBandwidthDaily } from "@/types/projects";
+import { DataStamp, ProjectLimits, ProjectsStorageBandwidthDaily, ProjectUsageDateRange } from "@/types/projects";
 import { Dimensions, Size } from "@/utils/bytesSize";
 
 import VLoader from "@/components/common/VLoader.vue";
 import InfoContainer from "@/components/project/newProjectDashboard/InfoContainer.vue";
 import DashboardChart from "@/components/project/newProjectDashboard/DashboardChart.vue";
 import VButton from "@/components/common/VButton.vue";
+import DateRangeSelection from "@/components/project/newProjectDashboard/DateRangeSelection.vue";
+
+import NewProjectIcon from "@/../static/images/project/newProject.svg";
 
 // @vue/component
 @Component({
@@ -147,6 +163,8 @@ import VButton from "@/components/common/VButton.vue";
         VButton,
         InfoContainer,
         DashboardChart,
+        DateRangeSelection,
+        NewProjectIcon,
     }
 })
 export default class NewProjectDashboard extends Vue {
@@ -228,6 +246,29 @@ export default class NewProjectDashboard extends Vue {
         return this.formattedValue(new Size(value, 2));
     }
 
+    /**
+     * toggleChartsDatePicker holds logic for toggling charts date picker.
+     */
+    public toggleChartsDatePicker(): void {
+        this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
+    }
+
+    /**
+     * onChartsDateRangePick holds logic for choosing date range for charts.
+     * @param dateRange
+     */
+    public onChartsDateRangePick(dateRange: Date[]): void {
+        // TODO: rework when backend is ready
+        this.$store.commit(PROJECTS_MUTATIONS.SET_CHARTS_DATE_RANGE, new ProjectUsageDateRange(dateRange[0], dateRange[1]));
+    }
+
+    /**
+     * Indicates if charts date picker is shown.
+     */
+    public get isChartsDatePicker(): boolean {
+        return this.$store.state.appStateModule.appState.isChartsDatePickerShown;
+    }
+
     /**
      * Returns current limits from store.
      */
@@ -305,6 +346,13 @@ export default class NewProjectDashboard extends Vue {
             return new DataStamp(Math.floor(Math.random() * 1000000000000), d);
         })
     }
+
+    /**
+     * Returns charts date range from store.
+     */
+    private get chartsDateRange(): ProjectUsageDateRange | null {
+        return this.$store.getters.chartsDateRange;
+    }
 }
 </script>
 
@@ -368,8 +416,8 @@ export default class NewProjectDashboard extends Vue {
                 display: flex;
                 align-items: center;
 
-                > *:last-child {
+                > .container {
-                    margin-left: 25px;
+                    margin-left: 16px;
                 }
             }
         }
@@ -438,6 +486,20 @@ export default class NewProjectDashboard extends Vue {
         }
     }
 
+    .new-project-button {
+
+        svg {
+            margin-right: 9px;
+        }
+
+        &:hover {
+
+            svg path {
+                fill: #fff;
+            }
+        }
+    }
+
     @media screen and (max-width: 1280px) {
 
         .project-dashboard {

web/satellite/src/store/modules/appState.ts

@@ -22,7 +22,8 @@ class ViewsState {
         public isAvailableBalanceDropdownShown = false,
         public isPeriodsDropdownShown = false,
         public isBucketNamesDropdownShown = false,
-        public isDatePickerShown = false,
+        public isAGDatePickerShown = false,
+        public isChartsDatePickerShown = false,
         public isPermissionsDropdownShown = false,
         public isEditProfilePopupShown = false,
         public isChangePasswordPopupShown = false,
@@ -92,8 +93,11 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
             state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_DATEPICKER_DROPDOWN](state: State): void {
+        [APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN](state: State): void {
-            state.appState.isDatePickerShown = !state.appState.isDatePickerShown;
+            state.appState.isAGDatePickerShown = !state.appState.isAGDatePickerShown;
+        },
+        [APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN](state: State): void {
+            state.appState.isChartsDatePickerShown = !state.appState.isChartsDatePickerShown;
         },
         [APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN](state: State): void {
             state.appState.isBucketNamesDropdownShown = !state.appState.isBucketNamesDropdownShown;
@@ -131,7 +135,8 @@ export const appStateModule = {
             state.appState.isPermissionsDropdownShown = false;
             state.appState.isPeriodsDropdownShown = false;
             state.appState.isPaymentSelectionShown = false;
-            state.appState.isDatePickerShown = false;
+            state.appState.isAGDatePickerShown = false;
+            state.appState.isChartsDatePickerShown = false;
             state.appState.isBucketNamesDropdownShown = false;
         },
         [APP_STATE_MUTATIONS.CHANGE_STATE](state: State, newFetchState: AppState): void {
@@ -254,12 +259,19 @@ export const appStateModule = {
 
             commit(APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
+        [APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
-            if (!state.appState.isDatePickerShown) {
+            if (!state.appState.isAGDatePickerShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
-            commit(APP_STATE_MUTATIONS.TOGGLE_DATEPICKER_DROPDOWN);
+            commit(APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
+        },
+        [APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN]: function ({commit, state}: AppContext): void {
+            if (!state.appState.isChartsDatePickerShown) {
+                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+            }
+
+            commit(APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
         },
         [APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isBucketNamesDropdownShown) {

web/satellite/src/store/modules/projects.ts

@@ -11,6 +11,7 @@ import {
     ProjectsCursor,
     ProjectsPage,
     ProjectsStorageBandwidthDaily,
+    ProjectUsageDateRange,
 } from '@/types/projects';
 
 export const PROJECTS_ACTIONS = {
@@ -45,6 +46,7 @@ export const PROJECTS_MUTATIONS = {
     SET_PAGE_NUMBER: 'SET_PAGE_NUMBER',
     SET_PAGE: 'SET_PAGE',
     SET_DAILY_DATA: 'SET_DAILY_DATA',
+    SET_CHARTS_DATE_RANGE: 'SET_CHARTS_DATE_RANGE',
 };
 
 const defaultSelectedProject = new Project('', '', '', '', '', true, 0);
@@ -58,6 +60,8 @@ export class ProjectsState {
     public page: ProjectsPage = new ProjectsPage();
     public bandwidthChartData: DataStamp[] = [];
     public storageChartData: DataStamp[] = [];
+    public chartDataSince: Date | null = null;
+    public chartDataBefore: Date | null = null;
 }
 
 interface ProjectsContext {
@@ -103,6 +107,7 @@ const {
     SET_PAGE_NUMBER,
     SET_PAGE,
     SET_DAILY_DATA,
+    SET_CHARTS_DATE_RANGE,
 } = PROJECTS_MUTATIONS;
 const projectsPageLimit = 7;
 
@@ -174,6 +179,11 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState,
                 state.projects = [];
                 state.selectedProject = defaultSelectedProject;
                 state.currentLimits = new ProjectLimits();
+                state.totalLimits = new ProjectLimits();
+                state.storageChartData = [];
+                state.bandwidthChartData = [];
+                state.chartDataSince = null;
+                state.chartDataBefore = null;
             },
             [SET_PAGE_NUMBER](state: ProjectsState, pageNumber: number) {
                 state.cursor.page = pageNumber;
@@ -186,6 +196,10 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState,
                 state.bandwidthChartData = payload.bandwidth;
                 state.storageChartData = payload.storage;
             },
+            [SET_CHARTS_DATE_RANGE](state: ProjectsState, payload: ProjectUsageDateRange) {
+                state.chartDataSince = payload.since;
+                state.chartDataBefore = payload.before;
+            },
         },
         actions: {
             [FETCH]: async function ({commit}: ProjectsContext): Promise<Project[]> {
@@ -343,6 +357,13 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState,
 
                 return projectsCount;
             },
+            chartsDateRange: (state: ProjectsState): ProjectUsageDateRange | null => {
+                if (!state.chartDataSince || !state.chartDataBefore) {
+                    return null
+                }
+
+                return new ProjectUsageDateRange(state.chartDataSince, state.chartDataBefore);
+            },
         },
     };
 }

web/satellite/src/store/mutationConstants.ts

@@ -20,7 +20,8 @@ export const APP_STATE_MUTATIONS = {
     TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
     TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
     TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',
-    TOGGLE_DATEPICKER_DROPDOWN: 'TOGGLE_DATEPICKER_DROPDOWN',
+    TOGGLE_AG_DATEPICKER_DROPDOWN: 'TOGGLE_AG_DATEPICKER_DROPDOWN',
+    TOGGLE_CHARTS_DATEPICKER_DROPDOWN: 'TOGGLE_CHARTS_DATEPICKER_DROPDOWN',
     TOGGLE_BUCKET_NAMES_DROPDOWN: 'TOGGLE_BUCKET_NAMES_DROPDOWN',
     TOGGLE_PERMISSIONS_DROPDOWN: 'TOGGLE_PERMISSIONS_DROPDOWN',
     TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',

web/satellite/src/types/projects.ts

@@ -215,3 +215,13 @@ export class ProjectsStorageBandwidthDaily {
         public storage: DataStamp[] = [],
     ) {}
 }
+
+/**
+ * ProjectUsageDateRange is used to describe project's usage by date range.
+ */
+export class ProjectUsageDateRange {
+    public constructor(
+        public since: Date,
+        public before: Date,
+    ) {}
+}

web/satellite/src/utils/constants/actionNames.ts

@@ -12,7 +12,8 @@ export const APP_STATE_ACTIONS = {
     TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
     TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
     TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
-    TOGGLE_DATEPICKER_DROPDOWN: 'toggleDatepickerDropdown',
+    TOGGLE_AG_DATEPICKER_DROPDOWN: 'toggleAGDatepickerDropdown',
+    TOGGLE_CHARTS_DATEPICKER_DROPDOWN: 'toggleChartsDatepickerDropdown',
     TOGGLE_BUCKET_NAMES_DROPDOWN: 'toggleBucketNamesDropdown',
     TOGGLE_PERMISSIONS_DROPDOWN: 'togglePermissionsDropdown',
     TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',

web/satellite/static/images/project/datepicker.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6296 0.800049C11.9822 0.800049 12.2698 1.07898 12.2836 1.42827L12.2841 1.45459L12.2842 1.95047C12.7132 2.03347 13.0122 2.15656 13.3125 2.31713C13.9137 2.63866 14.3855 3.1105 14.707 3.71171L14.7346 3.764L14.7752 3.84393C15.0527 4.40574 15.1998 5.02952 15.1998 6.55378V10.1859C15.1998 11.8304 15.0286 12.4267 14.707 13.0279C14.3855 13.6292 13.9137 14.101 13.3125 14.4225L13.2602 14.4501L13.1802 14.4906C12.6184 14.7682 11.9947 14.9153 10.4704 14.9153H5.52922C3.8847 14.9153 3.28836 14.7441 2.68714 14.4225C2.08593 14.101 1.6141 13.6292 1.29257 13.0279L1.26416 12.9741L1.22369 12.8942C0.950974 12.3416 0.804428 11.7283 0.799805 10.2567V6.55378C0.799805 4.90926 0.971033 4.31292 1.29257 3.71171C1.6141 3.1105 2.08593 2.63866 2.68714 2.31713L2.74102 2.28873C3.03734 2.13485 3.34011 2.01756 3.775 1.93934L3.77501 1.45459C3.77501 1.0931 4.06806 0.800049 4.42956 0.800049C4.78224 0.800049 5.06977 1.07898 5.08358 1.42827L5.0841 1.45459L5.08402 1.82899L5.22905 1.82633C5.30311 1.82527 5.37951 1.82462 5.45838 1.82437H10.4704C10.6508 1.82437 10.8187 1.82643 10.9752 1.83053L10.975 1.45459C10.975 1.0931 11.2681 0.800049 11.6296 0.800049ZM13.8906 7.06072H2.10878L2.1089 10.2527L2.10968 10.3774C2.11897 11.5361 2.20887 11.9654 2.44694 12.4106C2.64646 12.7837 2.93143 13.0686 3.30451 13.2681L3.35127 13.2926L3.39901 13.3165C3.8138 13.5183 4.26397 13.5976 5.3402 13.6055L5.52922 13.6062H10.4704C11.7721 13.6062 12.2274 13.5183 12.6951 13.2681C13.0682 13.0686 13.3531 12.7837 13.5527 12.4106L13.5771 12.3638L13.601 12.3161C13.8028 11.9013 13.8821 11.4511 13.89 10.3749L13.8907 10.1859L13.8906 7.06072ZM10.4704 3.13346H5.4624L5.3377 3.13425C5.24896 3.13496 5.1645 3.13614 5.08398 3.13783L5.0841 3.97927C5.0841 4.34077 4.79105 4.63382 4.42956 4.63382C4.07688 4.63382 3.78935 4.35489 3.77553 4.0056L3.77501 3.97927L3.77501 3.27947C3.60123 3.32852 3.45376 3.39168 3.30451 3.4715C2.93143 3.67103 2.64646 3.956 2.44694 4.32907L2.42246 4.37583C2.24845 4.71588 2.15884 5.06452 2.12508 5.75158H13.8745C13.8392 5.03301 13.7428 4.68462 13.5527 4.32907C13.3531 3.956 13.0682 3.67103 12.6951 3.4715L12.6483 3.44703C12.5323 3.38766 12.4153 3.33811 12.2842 3.29725L12.2841 3.97927C12.2841 4.34077 11.9911 4.63382 11.6296 4.63382C11.2769 4.63382 10.9893 4.35489 10.9755 4.0056L10.975 3.97927L10.9752 3.13897C10.8762 3.13655 10.7712 3.13495 10.6594 3.13413L10.4704 3.13346Z" fill="#56606D"/>
+</svg>

web/satellite/static/images/project/newProject.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.00005 0.800049C11.9765 0.800049 15.2 4.0236 15.2 8.00005C15.2 11.9765 11.9765 15.2 8.00005 15.2C4.0236 15.2 0.800049 11.9765 0.800049 8.00005C0.800049 4.0236 4.0236 0.800049 8.00005 0.800049ZM8.00005 2.12005C4.75261 2.12005 2.12005 4.75261 2.12005 8.00005C2.12005 11.2475 4.75261 13.88 8.00005 13.88C11.2475 13.88 13.88 11.2475 13.88 8.00005C13.88 4.75261 11.2475 2.12005 8.00005 2.12005ZM8.5997 5.51917L8.59996 5.52979L8.59993 7.37845H10.3942C10.7624 7.37845 11.0642 7.67044 11.0765 8.03845C11.0882 8.39103 10.8119 8.68636 10.4593 8.6981L10.4487 8.69836L8.59993 8.69845L8.60005 10.5368C8.60005 10.9014 8.30456 11.1968 7.94005 11.1968C7.58443 11.1968 7.2945 10.9156 7.28057 10.5634L7.28005 10.5368L7.27993 8.69845H5.44165C5.07714 8.69845 4.78165 8.40296 4.78165 8.03845C4.78165 7.68283 5.0629 7.3929 5.4151 7.37897L5.44165 7.37845H7.27993L7.28005 5.58433C7.28005 5.21613 7.57204 4.91425 7.94005 4.90201C8.29263 4.89028 8.58796 5.16659 8.5997 5.51917Z" fill="#56606D"/>
+</svg>

web/satellite/tests/unit/account/billing/coupons/__snapshots__/CouponArea.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`CouponArea renders correctly 1`] = `
 <div class="coupon-area">
   <div class="coupon-area__top-container">
     <h1 class="coupon-area__top-container__title">Coupon</h1>
-    <vbutton-stub label="Add Coupon Code" width="inherit" height="inherit" borderradius="6px" onpress="function () { [native code] }" class="coupon-area__top-container__add-button"></vbutton-stub>
+    <vbutton-stub label="Add Coupon Code" width="inherit" height="inherit" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="coupon-area__top-container__add-button"></vbutton-stub>
   </div>
   <div class="coupon-area__container">
     <couponicon-stub class="coupon-area__container__coupon-icon"></couponicon-stub>

web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap

@@ -20,7 +20,7 @@ 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;"><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>
 `;
@@ -32,7 +32,7 @@ exports[`AddStorjForm renders correctly after continue To Coin Payments click 1`
     <tokendepositselection-stub paymentoptions="[object Object],[object Object],[object Object],[object Object],[object Object]" class="add-storj-area__selection-container__form"></tokendepositselection-stub>
   </div>
   <div class="add-storj-area__submit-area"><img src="@/../static/images/account/billing/loading.gif" alt="loading gif" class="loading-image">
-    <vbutton-stub label="Continue to Coin Payments" width="251px" height="48px" borderradius="6px" isdisabled="true" onpress="function () { [native code] }" class="confirm-add-storj-button"></vbutton-stub>
+    <vbutton-stub label="Continue to Coin Payments" width="251px" height="48px" fontsize="16px" borderradius="6px" isdisabled="true" onpress="function () { [native code] }" class="confirm-add-storj-button"></vbutton-stub>
   </div>
 </div>
 `;

web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap

@@ -63,7 +63,7 @@ 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;"><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>
     <!---->
@@ -83,7 +83,7 @@ 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;"><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>
@@ -153,7 +153,7 @@ exports[`PaymentMethods renders correctly after add card 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">
-          <vbutton-stub label="Add STORJ" width="123px" height="46px" borderradius="6px" isbluewhite="true" onpress="function () { [native code] }" class="add-storj-button"></vbutton-stub>
+          <vbutton-stub label="Add STORJ" width="123px" height="46px" fontsize="16px" borderradius="6px" isbluewhite="true" onpress="function () { [native code] }" class="add-storj-button"></vbutton-stub>
         </div>
       </div>
     </div>
@@ -179,7 +179,7 @@ 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;"><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>
@@ -263,7 +263,7 @@ 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;"><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>

web/satellite/tests/unit/common/__snapshots__/VButton.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button.vue renders correctly 1`] = `<div class="container" style="width: inherit; height: inherit; border-radius: 6px;"><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;"><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;"><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>`;

web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap

@@ -51,7 +51,7 @@ exports[`OverviewStep.vue renders correctly 1`] = `
         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>.
       </p>
-      <div class="container" style="width: 100%; height: 64px; border-radius: 62px;"><span class="label uppercase">Continue in web</span></div>
+      <div class="container" style="width: 100%; height: 64px; border-radius: 62px; font-size: 16px;"> <span class="label uppercase">Continue in web</span></div>
     </div>
     <div class="overview-container"><svg width="78" height="64" viewBox="0 0 78 64" fill="none" xmlns="http://www.w3.org/2000/svg" alt="cli" class="overview-container__img">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7464 0.0117188H58.8387C65.4086 0.0117188 67.7909 0.695775 70.1928 1.98029C72.5946 3.2648 74.4796 5.14978 75.7641 7.55161L75.8404 7.69573C77.0757 10.0504 77.7327 12.4672 77.7327 18.9057V44.485L77.7318 44.8742C77.7051 51.1502 77.0229 53.4853 75.7641 55.8391C74.4796 58.2409 72.5946 60.1259 70.1928 61.4104C67.8149 62.6821 65.4562 63.3652 59.0346 63.379H18.9423C12.3724 63.379 9.99007 62.6949 7.58823 61.4104C5.1864 60.1259 3.30143 58.2409 2.01691 55.8391L1.94056 55.695C0.717912 53.3643 0.0618076 50.9728 0.0483398 44.6809V18.9057C0.0483398 12.3358 0.732396 9.95345 2.01691 7.55161C3.30143 5.14978 5.1864 3.2648 7.58823 1.98029C9.96605 0.70862 12.3248 0.0254599 18.7464 0.0117188Z" fill="#0218A7"></path>
@@ -74,7 +74,7 @@ exports[`OverviewStep.vue renders correctly 1`] = `
         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</a> encryption for object data, metadata and path data.
       </p>
-      <div class="container" style="width: 100%; height: 64px; border-radius: 62px;"><span class="label uppercase">Continue in cli</span></div>
+      <div class="container" style="width: 100%; height: 64px; border-radius: 62px; font-size: 16px;"> <span class="label uppercase">Continue in cli</span></div>
     </div>
   </div> <a href="/project-dashboard" class="overview-area__skip-button">
     Skip and go directly to dashboard

web/satellite/tests/unit/project/__snapshots__/CreateProject.spec.ts.snap

@@ -34,8 +34,8 @@ 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;"><span class="label">Cancel</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;"><span class="label">Create Project +</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>

web/satellite/tests/unit/project/__snapshots__/EditProjectDetails.spec.ts.snap

@@ -9,13 +9,13 @@ 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;"><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;"><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 +32,13 @@ 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;"><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;"><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 +56,12 @@ 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;"><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;"><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 +79,13 @@ 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;"><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;"><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 +103,13 @@ 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;"><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;"><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>
       <!---->
       <!---->

web/satellite/tests/unit/project/buckets/__snapshots__/NoBucketsArea.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`NoBucketsArea.vue renders correctly 1`] = `
 <div class="no-buckets-area"><img src="@/../static/images/buckets/bucket.png" alt="bucket image" class="no-buckets-area__image">
   <h2 class="no-buckets-area__message">Create your first bucket to get started.</h2>
-  <vbutton-stub label="Get Started" width="156px" height="47px" borderradius="6px" onpress="function () { [native code] }"></vbutton-stub> <a href="https://docs.storj.io/" target="_blank" rel="noopener noreferrer" class="no-buckets-area__second-button">
+  <vbutton-stub label="Get Started" width="156px" height="47px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }"></vbutton-stub> <a href="https://docs.storj.io/" target="_blank" rel="noopener noreferrer" class="no-buckets-area__second-button">
     Visit the Docs
   </a>
 </div>

web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`Team HeaderArea renders correctly 1`] = `
   <div class="team-header-container__wrapper">
     <vheader-stub placeholder="Team Members" search="function () { [native code] }">
       <div class="header-default-state">
-        <vbutton-stub label="+ Add" width="122px" height="48px" borderradius="6px" onpress="function () { [native code] }" class="button"></vbutton-stub>
+        <vbutton-stub label="+ Add" width="122px" height="48px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="button"></vbutton-stub>
       </div>
       <!---->
       <!---->
@@ -33,8 +33,8 @@ exports[`Team HeaderArea renders correctly with 1 selected user and delete click
       <!---->
       <div class="header-after-delete-click"><span class="header-after-delete-click__delete-confirmation">Are you sure you want to delete <b>1</b> user?</span>
         <div class="header-after-delete-click__button-area">
-          <vbutton-stub label="Delete" width="122px" height="48px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
+          <vbutton-stub label="Delete" width="122px" height="48px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
-          <vbutton-stub label="Cancel" width="122px" height="48px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub>
+          <vbutton-stub label="Cancel" width="122px" height="48px" fontsize="16px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub>
         </div>
       </div>
     </vheader-stub>
@@ -57,8 +57,8 @@ exports[`Team HeaderArea renders correctly with 2 selected users and delete clic
       <!---->
       <div class="header-after-delete-click"><span class="header-after-delete-click__delete-confirmation">Are you sure you want to delete <b>2</b> users?</span>
         <div class="header-after-delete-click__button-area">
-          <vbutton-stub label="Delete" width="122px" height="48px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
+          <vbutton-stub label="Delete" width="122px" height="48px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
-          <vbutton-stub label="Cancel" width="122px" height="48px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub>
+          <vbutton-stub label="Cancel" width="122px" height="48px" fontsize="16px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub>
         </div>
       </div>
     </vheader-stub>
@@ -78,7 +78,7 @@ exports[`Team HeaderArea renders correctly with opened Add team member popup 1`]
   <div class="team-header-container__wrapper">
     <vheader-stub placeholder="Team Members" search="function () { [native code] }">
       <div class="header-default-state">
-        <vbutton-stub label="+ Add" width="122px" height="48px" borderradius="6px" onpress="function () { [native code] }" class="button"></vbutton-stub>
+        <vbutton-stub label="+ Add" width="122px" height="48px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="button"></vbutton-stub>
       </div>
       <!---->
       <!---->
@@ -100,8 +100,8 @@ exports[`Team HeaderArea renders correctly with selected users 1`] = `
     <vheader-stub placeholder="Team Members" search="function () { [native code] }">
       <!---->
       <div class="header-selected-members">
-        <vbutton-stub label="Delete" width="122px" height="48px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
+        <vbutton-stub label="Delete" width="122px" height="48px" fontsize="16px" borderradius="6px" onpress="function () { [native code] }" class="button deletion"></vbutton-stub>
-        <vbutton-stub label="Cancel" width="122px" height="48px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub> <span class="header-selected-members__info-text"><b>2</b> users selected</span>
+        <vbutton-stub label="Cancel" width="122px" height="48px" fontsize="16px" borderradius="6px" istransparent="true" onpress="function () { [native code] }" class="button"></vbutton-stub> <span class="header-selected-members__info-text"><b>2</b> users selected</span>
       </div>
       <!---->
     </vheader-stub>