web/satellite: ui updates (#6366)
* web/satellite: ui updates Updating global styles, theme, ui components, charts design, actions and dialogs. Added new icons and replaced current to use icon components with consistent width. Changed project card with new details button. Updated the same button for actions across the tables and the actions dialog that it shows. Changed the account menu with the account type displayed on top. Add notification in invite team members dialog to explain passphrase. * web/satellite: ui updates lint fix
This commit is contained in:
Tome Boshevski
GitHub
parent
487ac17870
commit
512e063a79
@ -50,10 +50,10 @@ const chartData = computed((): ChartData => {
|
|||||||
datasets: [{
|
datasets: [{
|
||||||
data,
|
data,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: 'rgba(226, 220, 255, .3)',
|
backgroundColor: '#929fb110',
|
||||||
borderColor: '#7B61FF',
|
borderColor: '#929fb1',
|
||||||
pointHoverBackgroundColor: '#FFFFFF',
|
pointHoverBackgroundColor: '#FFFFFF',
|
||||||
pointBorderColor: '#7B61FF',
|
pointBorderColor: '#929fb1',
|
||||||
pointHoverBorderWidth: 3,
|
pointHoverBorderWidth: 3,
|
||||||
hoverRadius: 8,
|
hoverRadius: 8,
|
||||||
hitRadius: 3,
|
hitRadius: 3,
|
||||||
@ -101,7 +101,6 @@ watch(() => props.width, () => {
|
|||||||
.allocated-tooltip {
|
.allocated-tooltip {
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 5px 14px rgb(9 87 203 / 26%);
|
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
width: 145px;
|
width: 145px;
|
||||||
@ -109,7 +108,7 @@ watch(() => props.width, () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--c-purple-3);
|
background-color: #929fb1;
|
||||||
|
|
||||||
&__value {
|
&__value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -129,7 +128,7 @@ watch(() => props.width, () => {
|
|||||||
border-radius: 8px 0 0;
|
border-radius: 8px 0 0;
|
||||||
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
|
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
|
||||||
margin-bottom: -4px;
|
margin-bottom: -4px;
|
||||||
background-color: var(--c-purple-3);
|
background-color: #929fb1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -50,10 +50,10 @@ const chartData = computed((): ChartData => {
|
|||||||
datasets: [{
|
datasets: [{
|
||||||
data,
|
data,
|
||||||
fill: true,
|
fill: true,
|
||||||
backgroundColor: '#E6EDF7',
|
backgroundColor: '#929fb110',
|
||||||
borderColor: '#537CFF',
|
borderColor: '#929fb1',
|
||||||
pointHoverBackgroundColor: '#FFFFFF',
|
pointHoverBackgroundColor: '#FFFFFF',
|
||||||
pointBorderColor: '#537CFF',
|
pointBorderColor: '#929fb1',
|
||||||
pointHoverBorderWidth: 3,
|
pointHoverBorderWidth: 3,
|
||||||
hoverRadius: 8,
|
hoverRadius: 8,
|
||||||
hitRadius: 3,
|
hitRadius: 3,
|
||||||
@ -100,7 +100,6 @@ watch(() => props.width, () => {
|
|||||||
.tooltip {
|
.tooltip {
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 5px 14px rgb(9 87 203 / 26%);
|
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
width: 145px;
|
width: 145px;
|
||||||
@ -108,7 +107,7 @@ watch(() => props.width, () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--c-blue-4);
|
background-color: #929fb1;
|
||||||
|
|
||||||
&__value {
|
&__value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -128,7 +127,7 @@ watch(() => props.width, () => {
|
|||||||
border-radius: 8px 0 0;
|
border-radius: 8px 0 0;
|
||||||
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
|
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
|
||||||
margin-bottom: -4px;
|
margin-bottom: -4px;
|
||||||
background-color: var(--c-blue-4);
|
background-color: #929fb1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -54,12 +54,12 @@
|
|||||||
<v-icon icon="mdi-dots-horizontal" />
|
<v-icon icon="mdi-dots-horizontal" />
|
||||||
<v-menu activator="parent">
|
<v-menu activator="parent">
|
||||||
<v-list class="pa-2">
|
<v-list class="pa-2">
|
||||||
<v-list-item density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.raw.name)">
|
<v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.raw.name)">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-trash bold />
|
<icon-trash bold />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="pl-2 text-body-2 font-weight-medium">
|
<v-list-item-title class="pl-2 text-body-2 font-weight-medium">
|
||||||
Delete
|
Delete Access
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
|
|||||||
@ -5,32 +5,33 @@
|
|||||||
<v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
|
<v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="isCardInputShown = true">+ Add New Card</v-btn>
|
<v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="isCardInputShown = true">+ Add New Card</v-btn>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<StripeCardInput
|
<StripeCardInput
|
||||||
ref="stripeCardInput"
|
ref="stripeCardInput"
|
||||||
:on-stripe-response-callback="addCardToDB"
|
:on-stripe-response-callback="addCardToDB"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</v-card-text>
|
|
||||||
|
|
||||||
<v-card-actions v-if="isCardInputShown">
|
<template v-if="isCardInputShown">
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="outlined" color="primary" size="small" class="mr-2"
|
color="primary" size="small" class="mr-2"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
@click="onSaveCardClick"
|
@click="onSaveCardClick"
|
||||||
>
|
>
|
||||||
Add Card
|
Add Card
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="outlined" color="default" size="small" class="mr-2"
|
variant="outlined" color="default" size="small" class="mr-2"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
@click="isCardInputShown = false"
|
@click="isCardInputShown = false"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</template>
|
||||||
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
<v-data-table-row class="pos-relative" v-bind="rowProps">
|
<v-data-table-row class="pos-relative" v-bind="rowProps">
|
||||||
<template #item.name="{ item }: ItemSlotProps">
|
<template #item.name="{ item }: ItemSlotProps">
|
||||||
<v-btn
|
<v-btn
|
||||||
class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold"
|
class="rounded-lg w-100 px-1 justify-start font-weight-bold"
|
||||||
variant="text"
|
variant="text"
|
||||||
height="40"
|
height="40"
|
||||||
color="default"
|
color="default"
|
||||||
|
|||||||
@ -34,16 +34,14 @@
|
|||||||
>
|
>
|
||||||
<template #item.name="{ item }">
|
<template #item.name="{ item }">
|
||||||
<v-btn
|
<v-btn
|
||||||
class="rounded-lg w-100 px-0 justify-start"
|
class="rounded-lg w-100 px-1 justify-start"
|
||||||
variant="text"
|
variant="text"
|
||||||
height="40"
|
height="40"
|
||||||
color="default"
|
color="default"
|
||||||
@click="openBucket(item.raw.name)"
|
@click="openBucket(item.raw.name)"
|
||||||
>
|
>
|
||||||
<template #prepend>
|
|
||||||
<img class="d-none d-sm-block" src="../assets/icon-bucket-tonal.svg" alt="Bucket">
|
|
||||||
</template>
|
|
||||||
<template #default>
|
<template #default>
|
||||||
|
<img class="mr-3" src="../assets/icon-bucket-tonal.svg" alt="Bucket">
|
||||||
<div class="max-width">
|
<div class="max-width">
|
||||||
<p class="font-weight-bold text-lowercase white-space">{{ item.raw.name }}</p>
|
<p class="font-weight-bold text-lowercase white-space">{{ item.raw.name }}</p>
|
||||||
</div>
|
</div>
|
||||||
@ -79,39 +77,38 @@
|
|||||||
<v-menu location="bottom end" transition="scale-transition">
|
<v-menu location="bottom end" transition="scale-transition">
|
||||||
<template #activator="{ props: activatorProps }">
|
<template #activator="{ props: activatorProps }">
|
||||||
<v-btn
|
<v-btn
|
||||||
icon="mdi-dots-vertical"
|
icon="mdi-dots-horizontal"
|
||||||
color="default"
|
color="default"
|
||||||
variant="text"
|
variant="outlined"
|
||||||
size="small"
|
size="small"
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
v-bind="activatorProps"
|
v-bind="activatorProps"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<v-list class="pa-0">
|
<v-list class="pa-0">
|
||||||
<v-list-item link @click="() => showBucketDetailsModal(item.raw.name)">
|
<v-list-item rounded-lg class="ma-1" link @click="() => showBucketDetailsModal(item.raw.name)">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-details size="18" />
|
<icon-bucket size="18" />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="ml-3">
|
||||||
View Bucket Details
|
View Bucket Details
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-divider />
|
<v-list-item rounded-lg class="ma-1" link @click="() => showShareBucketDialog(item.raw.name)">
|
||||||
<v-list-item link @click="() => showShareBucketDialog(item.raw.name)">
|
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-share size="18" />
|
<icon-share size="18" />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="ml-3">
|
||||||
Share bucket
|
Share Bucket
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-list-item link @click="() => showDeleteBucketDialog(item.raw.name)">
|
<v-list-item rounded-lg class="ma-1 text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-trash />
|
<icon-trash />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="ml-3">
|
||||||
Delete bucket
|
Delete Bucket
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
@ -144,7 +141,7 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
|
|||||||
|
|
||||||
import IconTrash from '@poc/components/icons/IconTrash.vue';
|
import IconTrash from '@poc/components/icons/IconTrash.vue';
|
||||||
import IconShare from '@poc/components/icons/IconShare.vue';
|
import IconShare from '@poc/components/icons/IconShare.vue';
|
||||||
import IconDetails from '@poc/components/icons/IconDetails.vue';
|
import IconBucket from '@poc/components/icons/IconBucket.vue';
|
||||||
import DeleteBucketDialog from '@poc/components/dialogs/DeleteBucketDialog.vue';
|
import DeleteBucketDialog from '@poc/components/dialogs/DeleteBucketDialog.vue';
|
||||||
import EnterBucketPassphraseDialog from '@poc/components/dialogs/EnterBucketPassphraseDialog.vue';
|
import EnterBucketPassphraseDialog from '@poc/components/dialogs/EnterBucketPassphraseDialog.vue';
|
||||||
import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
|
import ShareDialog from '@poc/components/dialogs/ShareDialog.vue';
|
||||||
|
|||||||
@ -5,12 +5,12 @@
|
|||||||
<v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
|
<v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
|
||||||
<template #title>
|
<template #title>
|
||||||
<v-card-title class="d-flex align-center">
|
<v-card-title class="d-flex align-center">
|
||||||
<component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" />
|
<component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" width="16" height="16" />
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</template>
|
</template>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
|
<v-chip rounded color="green" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -10,34 +10,6 @@
|
|||||||
<icon-project width="12px" class="mr-1" />
|
<icon-project width="12px" class="mr-1" />
|
||||||
{{ item?.role || 'Project' }}
|
{{ item?.role || 'Project' }}
|
||||||
</v-chip>
|
</v-chip>
|
||||||
|
|
||||||
<v-btn v-if="item?.role === ProjectRole.Owner" color="default" variant="text" size="small">
|
|
||||||
<v-icon icon="mdi-dots-vertical" />
|
|
||||||
|
|
||||||
<v-menu activator="parent" location="end" transition="scale-transition">
|
|
||||||
<v-list class="pa-2">
|
|
||||||
<v-list-item link rounded="lg" @click="() => onSettingsClick()">
|
|
||||||
<template #prepend>
|
|
||||||
<icon-settings />
|
|
||||||
</template>
|
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
|
||||||
Project Settings
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
|
|
||||||
<v-divider class="my-2" />
|
|
||||||
|
|
||||||
<v-list-item link class="mt-1" rounded="lg">
|
|
||||||
<template #prepend>
|
|
||||||
<icon-team size="18" />
|
|
||||||
</template>
|
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
|
||||||
Invite Members
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-menu>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
</div>
|
||||||
<v-card-title :class="{ 'text-primary': item && item.role !== ProjectRole.Invited }">
|
<v-card-title :class="{ 'text-primary': item && item.role !== ProjectRole.Invited }">
|
||||||
<a v-if="item && item.role !== ProjectRole.Invited" class="link" @click="openProject">
|
<a v-if="item && item.role !== ProjectRole.Invited" class="link" @click="openProject">
|
||||||
@ -72,6 +44,33 @@
|
|||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
<v-btn v-else color="primary" size="small" class="mr-2" @click="openProject">Open Project</v-btn>
|
<v-btn v-else color="primary" size="small" class="mr-2" @click="openProject">Open Project</v-btn>
|
||||||
|
<v-btn v-if="item?.role === ProjectRole.Owner" color="default" variant="outlined" size="small" density="comfortable" icon>
|
||||||
|
<v-icon icon="mdi-dots-horizontal" />
|
||||||
|
|
||||||
|
<v-menu activator="parent" location="end" transition="scale-transition">
|
||||||
|
<v-list class="pa-2">
|
||||||
|
<v-list-item link rounded="lg" @click="() => onSettingsClick()">
|
||||||
|
<template #prepend>
|
||||||
|
<icon-settings />
|
||||||
|
</template>
|
||||||
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
|
Project Settings
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-divider class="my-2" />
|
||||||
|
|
||||||
|
<v-list-item link class="mt-1" rounded="lg">
|
||||||
|
<template #prepend>
|
||||||
|
<icon-team size="18" />
|
||||||
|
</template>
|
||||||
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
|
Invite Members
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-btn>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</div>
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|||||||
@ -73,14 +73,14 @@
|
|||||||
class="ml-2"
|
class="ml-2"
|
||||||
icon
|
icon
|
||||||
color="default"
|
color="default"
|
||||||
variant="text"
|
variant="outlined"
|
||||||
size="small"
|
size="small"
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
:loading="decliningIds.has(item.raw.id)"
|
:loading="decliningIds.has(item.raw.id)"
|
||||||
>
|
>
|
||||||
<v-icon icon="mdi-dots-vertical" size="18" />
|
<v-icon icon="mdi-dots-horizontal" size="18" />
|
||||||
<v-menu activator="parent" location="bottom end" transition="scale-transition">
|
<v-menu activator="parent" location="bottom end" transition="scale-transition">
|
||||||
<v-list class="pa-0">
|
<v-list class="pa-1">
|
||||||
<template v-if="item.raw.role === ProjectRole.Owner">
|
<template v-if="item.raw.role === ProjectRole.Owner">
|
||||||
<v-list-item link @click="() => onSettingsClick(item.raw)">
|
<v-list-item link @click="() => onSettingsClick(item.raw)">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
@ -90,9 +90,6 @@
|
|||||||
Project Settings
|
Project Settings
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-divider />
|
|
||||||
|
|
||||||
<v-list-item link>
|
<v-list-item link>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-team size="18" />
|
<icon-team size="18" />
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
</v-chip>
|
</v-chip>
|
||||||
<v-divider class="my-4" />
|
<v-divider class="my-4" />
|
||||||
<p>Total Balance</p>
|
<p>Total Balance</p>
|
||||||
<v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
|
<v-chip rounded color="green" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
|
||||||
<v-divider class="my-4" />
|
<v-divider class="my-4" />
|
||||||
<v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mr-2">+ Add STORJ Tokens</v-btn>
|
<v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mr-2">+ Add STORJ Tokens</v-btn>
|
||||||
<v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" @click="claimWalletClick">Create New Wallet</v-btn>
|
<v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" @click="claimWalletClick">Create New Wallet</v-btn>
|
||||||
|
|||||||
@ -98,7 +98,7 @@ const iconColor = computed((): string => {
|
|||||||
} else if (props.item.status === UploadingStatus.Failed) {
|
} else if (props.item.status === UploadingStatus.Failed) {
|
||||||
return 'warning';
|
return 'warning';
|
||||||
} else if (props.item.status === UploadingStatus.Cancelled) {
|
} else if (props.item.status === UploadingStatus.Cancelled) {
|
||||||
return 'error2';
|
return 'error';
|
||||||
} else {
|
} else {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,12 +5,12 @@
|
|||||||
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
|
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
|
||||||
<template #title>
|
<template #title>
|
||||||
<v-card-title class="d-flex align-center">
|
<v-card-title class="d-flex align-center">
|
||||||
<component :is="iconComponents[icon]" v-if="icon" class="mr-2" />
|
<component :is="iconComponents[icon]" v-if="icon" class="mr-2" width="16" height="16" />
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</template>
|
</template>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-progress-linear color="success" :model-value="progress" rounded height="6" />
|
<v-progress-linear color="green" :model-value="progress" rounded height="6" />
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-row>
|
<v-row>
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
<v-col>
|
<v-col>
|
||||||
{{ projectName }}
|
{{ projectName }}
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col class="text-start text-sm-end">
|
<v-col class="text-start text-sm-end mr-2">
|
||||||
<span class="align-end">
|
<span class="align-end">
|
||||||
Estimated Total
|
Estimated Total
|
||||||
<span
|
<span
|
||||||
@ -22,7 +22,7 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
</v-expansion-panel-title>
|
</v-expansion-panel-title>
|
||||||
<v-expansion-panel-text>
|
<v-expansion-panel-text>
|
||||||
<v-table density="compact">
|
<v-table density="comfortable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-left">
|
<th class="text-left">
|
||||||
@ -46,7 +46,7 @@
|
|||||||
>
|
>
|
||||||
<td>
|
<td>
|
||||||
<p>Storage <span class="d-none d-md-inline">({{ getStoragePrice(partner) }} per Gigabyte-Month)</span></p>
|
<p>Storage <span class="d-none d-md-inline">({{ getStoragePrice(partner) }} per Gigabyte-Month)</span></p>
|
||||||
<p>Egress <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
|
<p>Download <span class="d-none d-md-inline">({{ getEgressPrice(partner) }} per GB)</span></p>
|
||||||
<p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
|
<p>Segments <span class="d-none d-md-inline">({{ getSegmentPrice(partner) }} per Segment-Month)</span></p>
|
||||||
</td>
|
</td>
|
||||||
<td class="d-none d-md-table-cell"><p v-for="i in 3" :key="i">{{ getPeriod(charge) }}</p></td>
|
<td class="d-none d-md-table-cell"><p v-for="i in 3" :key="i">{{ getPeriod(charge) }}</p></td>
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
transition="fade-transition"
|
transition="fade-transition"
|
||||||
>
|
>
|
||||||
<v-card rounded="xlg">
|
<v-card rounded="xlg">
|
||||||
<v-card-item class="pl-7 py-4">
|
<v-card-item class="py-4">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
|
<img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
|
||||||
</template>
|
</template>
|
||||||
@ -26,9 +26,8 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
|
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-item class="px-7 py-5">
|
<v-card-item>
|
||||||
<v-form v-model="formValid" @submit.prevent="onChangeName">
|
<v-form v-model="formValid" @submit.prevent="onChangeName">
|
||||||
<v-col cols="12" class="px-0">
|
<v-col cols="12" class="px-0">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
@ -39,14 +38,15 @@
|
|||||||
:hide-details="false"
|
:hide-details="false"
|
||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
|
class="mt-2"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-actions class="px-7 py-5">
|
<v-card-actions class="pa-6">
|
||||||
<v-row class="ma-0">
|
<v-row>
|
||||||
<v-col class="pl-0">
|
<v-col>
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color="default"
|
color="default"
|
||||||
@ -58,7 +58,7 @@
|
|||||||
Cancel
|
Cancel
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col class="pr-0">
|
<v-col>
|
||||||
<v-btn
|
<v-btn
|
||||||
color="primary"
|
color="primary"
|
||||||
variant="flat"
|
variant="flat"
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
transition="fade-transition"
|
transition="fade-transition"
|
||||||
>
|
>
|
||||||
<v-card rounded="xlg">
|
<v-card rounded="xlg">
|
||||||
<v-card-item class="pl-7 py-4">
|
<v-card-item class="px-6 py-4">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
|
<img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
|
||||||
</template>
|
</template>
|
||||||
@ -27,11 +27,10 @@
|
|||||||
</template>
|
</template>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-item class="px-7 py-5">
|
<v-card-item class="px-7 pt-5">
|
||||||
<p>You will receive a verification link in your email to confirm the password change.</p>
|
<p>You will receive a verification link in your email to confirm the password change.</p>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-card-item class="px-7">
|
||||||
<v-card-item class="px-7 py-5">
|
|
||||||
<v-form v-model="formValid" @submit.prevent="onChangePassword">
|
<v-form v-model="formValid" @submit.prevent="onChangePassword">
|
||||||
<v-col cols="12" class="px-0">
|
<v-col cols="12" class="px-0">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
@ -40,6 +39,7 @@
|
|||||||
type="password"
|
type="password"
|
||||||
:rules="oldRules"
|
:rules="oldRules"
|
||||||
label="Current password"
|
label="Current password"
|
||||||
|
placeholder="Enter your current password"
|
||||||
:hide-details="false"
|
:hide-details="false"
|
||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
@ -52,6 +52,7 @@
|
|||||||
type="password"
|
type="password"
|
||||||
:rules="newRules"
|
:rules="newRules"
|
||||||
label="New password"
|
label="New password"
|
||||||
|
placeholder="Enter a new password"
|
||||||
:hide-details="false"
|
:hide-details="false"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
@ -62,6 +63,7 @@
|
|||||||
type="password"
|
type="password"
|
||||||
:rules="repeatRules"
|
:rules="repeatRules"
|
||||||
label="Repeat password"
|
label="Repeat password"
|
||||||
|
placeholder="Enter the new password again"
|
||||||
:hide-details="false"
|
:hide-details="false"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
@ -69,8 +71,8 @@
|
|||||||
</v-form>
|
</v-form>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-actions class="px-7 py-5">
|
<v-card-actions class="pa-6">
|
||||||
<v-row class="ma-0">
|
<v-row>
|
||||||
<v-col>
|
<v-col>
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
|||||||
@ -48,6 +48,8 @@
|
|||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
class="mt-8 mb-3"
|
class="mt-8 mb-3"
|
||||||
|
minlength="3"
|
||||||
|
maxlength="63"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@ -131,7 +133,7 @@ const bucketNameRules = computed(() => {
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
(value: string) => (!!value || 'Bucket name is required.'),
|
(value: string) => (!!value || 'Bucket name is required.'),
|
||||||
(value: string) => ((value.length >= 3 && value.length <= 63) || 'Bucket name must be not less than 3 and not more than 63 characters length.'),
|
(value: string) => ((value.length >= 3 && value.length <= 63) || 'Name should be between 3 and 63 characters length.'),
|
||||||
(value: string) => {
|
(value: string) => {
|
||||||
if (/^[a-z0-9-.]+$/.test(value)) return true;
|
if (/^[a-z0-9-.]+$/.test(value)) return true;
|
||||||
if (/[A-Z]/.test(value)) return 'Uppercase characters are not allowed.';
|
if (/[A-Z]/.test(value)) return 'Uppercase characters are not allowed.';
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
<v-form v-model="formValid" class="pa-7" @submit.prevent>
|
<v-form v-model="formValid" class="pa-7" @submit.prevent>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="input"
|
v-model="input"
|
||||||
class="py-4"
|
class="pt-4"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
:label="`Project ${field}`"
|
:label="`Project ${field}`"
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<v-card-item class="px-8 py-4">
|
<v-card-item class="px-8 py-4">
|
||||||
<p>Scan this QR code in your two-factor application.</p>
|
<p>Scan this QR code in your two-factor application.</p>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-card-item align="center" justify="center" class="rounded-lg border mx-8 py-4" style="background: #edeef1;">
|
<v-card-item align="center" justify="center" class="rounded-lg border mx-8 py-4">
|
||||||
<v-col cols="auto">
|
<v-col cols="auto">
|
||||||
<canvas ref="canvas" />
|
<canvas ref="canvas" />
|
||||||
</v-col>
|
</v-col>
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<v-card-item class="px-8 py-4 pt-0">
|
<v-card-item class="px-8 py-4 pt-0">
|
||||||
<p>Unable to scan? Enter the following code instead.</p>
|
<p>Unable to scan? Enter the following code instead.</p>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-card-item class="rounded-lg border mx-8 pa-0" style="background: #FAFAFB;">
|
<v-card-item class="rounded-lg border mx-8 pa-0">
|
||||||
<v-col class="py-2 px-3" cols="auto">
|
<v-col class="py-2 px-3" cols="auto">
|
||||||
<p class="font-weight-bold"> {{ userMFASecret }}</p>
|
<p class="font-weight-bold"> {{ userMFASecret }}</p>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
// See LICENSE for copying information.
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<v-dialog v-model="model" width="414px" transition="fade-transition">
|
<v-dialog v-model="model" max-width="420" transition="fade-transition">
|
||||||
<v-card ref="innerContent" rounded="xlg">
|
<v-card ref="innerContent" rounded="xlg">
|
||||||
<v-card-item class="pl-7 py-4 pos-relative">
|
<v-card-item class="pl-7 py-4 pos-relative">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
transition="fade-transition"
|
transition="fade-transition"
|
||||||
>
|
>
|
||||||
<v-card rounded="xlg">
|
<v-card rounded="xlg">
|
||||||
<v-card-item class="pl-7 py-4">
|
<v-card-item class="pl-6 py-4">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session timeout">
|
<img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session timeout">
|
||||||
</template>
|
</template>
|
||||||
@ -27,11 +27,10 @@
|
|||||||
</template>
|
</template>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-item class="px-7 py-5">
|
<v-card-item class="px-6 pt-6 pb-3">
|
||||||
<p>Select your session timeout duration.</p>
|
<p>Select your session timeout duration.</p>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-card-item class="px-6 pb-7">
|
||||||
<v-card-item class="px-7 py-5">
|
|
||||||
<v-select
|
<v-select
|
||||||
v-model="duration"
|
v-model="duration"
|
||||||
class="pt-2"
|
class="pt-2"
|
||||||
@ -45,9 +44,9 @@
|
|||||||
/>
|
/>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
<v-divider />
|
<v-divider />
|
||||||
<v-card-actions class="px-7 py-5">
|
<v-card-actions class="pa-6">
|
||||||
<v-row class="ma-0">
|
<v-row>
|
||||||
<v-col class="pl-0">
|
<v-col>
|
||||||
<v-btn
|
<v-btn
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color="default"
|
color="default"
|
||||||
@ -59,7 +58,7 @@
|
|||||||
Cancel
|
Cancel
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col class="pr-0">
|
<v-col>
|
||||||
<v-btn
|
<v-btn
|
||||||
color="primary"
|
color="primary"
|
||||||
variant="flat"
|
variant="flat"
|
||||||
|
|||||||
@ -3,17 +3,20 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="pa-4">
|
<div class="pa-4">
|
||||||
<v-sheet v-for="item in items" :key="item.next" class="bg-surface-emphasis ma-4" border rounded>
|
<v-sheet v-for="item in items" :key="item.next" class="ma-2" border rounded="xlg">
|
||||||
<v-list-item class="py-2 px-5" link @click="emit('optionClick', item.next)">
|
<v-list-item class="pa-2" link @click="emit('optionClick', item.next)">
|
||||||
<div class="d-flex flex-row align-center">
|
<template #prepend>
|
||||||
<component :is="item.icon" />
|
<component :is="item.icon" width="20" height="20" class="ml-3 mr-4" />
|
||||||
<div class="mx-4">
|
</template>
|
||||||
<p class="font-weight-bold mb-1">{{ item.title }}</p>
|
<v-list-item-title>
|
||||||
<p class="text-caption">{{ item.subtitle }}</p>
|
<p class="font-weight-bold">{{ item.title }}</p>
|
||||||
</div>
|
</v-list-item-title>
|
||||||
<v-spacer />
|
<v-list-item-subtitle>
|
||||||
<v-icon size="32" icon="mdi-chevron-right" color="primary" />
|
<p class="text-caption text-wrap">{{ item.subtitle }}</p>
|
||||||
</div>
|
</v-list-item-subtitle>
|
||||||
|
<template #append>
|
||||||
|
<v-icon size="24" icon="mdi-chevron-right" color="default" />
|
||||||
|
</template>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M16.3302 3L16.4559 3.00063C17.2899 3.00918 17.611 3.1051 17.9346 3.27817C18.274 3.45968 18.5403 3.72604 18.7218 4.06543L18.7466 4.11283C18.9121 4.43742 19 4.78465 19 5.66983V13.5698C19 14.4982 18.9033 14.8348 18.7218 15.1742C18.5403 15.5136 18.274 15.78 17.9346 15.9615L17.8872 15.9863C17.5626 16.1518 17.2153 16.2397 16.3302 16.2397H3.66983L3.54407 16.239C2.71015 16.2305 2.38904 16.1346 2.06543 15.9615C1.72604 15.78 1.45968 15.5136 1.27817 15.1742L1.2534 15.1268C1.08788 14.8022 1 14.455 1 13.5698V5.66983L1.00063 5.54407C1.00918 4.71015 1.1051 4.38904 1.27817 4.06543C1.45968 3.72604 1.72604 3.45968 2.06543 3.27817L2.11283 3.2534C2.43742 3.08788 2.78465 3 3.66983 3H16.3302ZM17.3636 9.69421H2.63651L2.63658 13.6653C2.639 14.1822 2.66243 14.2927 2.72114 14.4025C2.75014 14.4568 2.78291 14.4895 2.83714 14.5185L2.8665 14.5333C2.96294 14.5781 3.08596 14.5982 3.48724 14.6024L3.66983 14.6033L16.4257 14.6031C16.9425 14.6007 17.0531 14.5772 17.1629 14.5185C17.2171 14.4895 17.2499 14.4568 17.2789 14.4025L17.2936 14.3732C17.3446 14.2634 17.3636 14.1193 17.3636 13.5698V9.69421ZM3.62099 4.63642C3.06396 4.63765 2.95015 4.6607 2.83714 4.72114C2.78291 4.75014 2.75014 4.78291 2.72114 4.83714L2.70641 4.8665C2.66155 4.96294 2.64144 5.08596 2.63722 5.48724L2.63636 5.66983V7.01653H17.3636V5.62099C17.3624 5.06396 17.3393 4.95015 17.2789 4.83714C17.2499 4.78291 17.2171 4.75014 17.1629 4.72114L17.1335 4.70641C17.0304 4.65846 16.8969 4.63878 16.4257 4.63658L3.62099 4.63642Z" fill="currentColor" />
|
<path d="M15.5674 3L15.707 3.0006C16.7956 3.01012 17.2112 3.13361 17.6302 3.35765C18.0665 3.59102 18.409 3.93348 18.6424 4.36984L18.6698 4.42224C18.8855 4.84205 19 5.28678 19 6.43264V12.807C19 14.0006 18.8757 14.4335 18.6424 14.8698C18.409 15.3062 18.0665 15.6486 17.6302 15.882L17.5778 15.9095C17.158 16.1251 16.7132 16.2397 15.5674 16.2397H4.43264C3.23904 16.2397 2.80621 16.1154 2.36984 15.882C1.93348 15.6486 1.59102 15.3062 1.35765 14.8698L1.33017 14.8174C1.11454 14.3976 1 13.9529 1 12.807V6.43264L1.0006 6.29301C1.01012 5.2044 1.13361 4.78875 1.35765 4.36984C1.59102 3.93348 1.93348 3.59102 2.36984 3.35765L2.42224 3.33017C2.84205 3.11454 3.28678 3 4.43264 3H15.5674ZM17.9585 9.39669H2.04132L2.04142 12.8696C2.04416 13.7524 2.10634 14.0617 2.2759 14.3787C2.41222 14.6336 2.60604 14.8274 2.86093 14.9638L2.90518 14.9867C3.208 15.139 3.52829 15.1956 4.37011 15.1983H15.6299L15.8105 15.1967C16.557 15.1861 16.8447 15.1212 17.1391 14.9638C17.394 14.8274 17.5878 14.6336 17.7241 14.3787L17.7471 14.3345C17.8993 14.0317 17.956 13.7114 17.9586 12.8696L17.9585 9.39669ZM15.6299 4.04132H4.43264C3.50161 4.04132 3.18536 4.10239 2.86093 4.2759C2.60604 4.41222 2.41222 4.60604 2.2759 4.86093L2.25293 4.90518C2.10811 5.19322 2.04978 5.49709 2.04219 6.25058L2.04132 6.43264V6.57025H17.9585L17.9586 6.37011L17.9571 6.18949C17.9464 5.44301 17.8816 5.15534 17.7241 4.86093C17.5878 4.60604 17.394 4.41222 17.1391 4.2759L17.0948 4.25293C16.792 4.10068 16.4717 4.04403 15.6299 4.04132Z" fill="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
// Copyright (C) 2023 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.68101 1L8.9199 1.0006L9.11839 1.00255C11.0087 1.02806 12.0812 1.24887 13.1777 1.8301C13.722 2.11856 14.21 2.47921 14.6336 2.9065C14.8235 3.09805 14.8221 3.40727 14.6306 3.59716C14.439 3.78705 14.1298 3.7857 13.9399 3.59416C13.5862 3.23741 13.178 2.93571 12.7203 2.69311C11.7767 2.19298 10.8483 2.00189 9.09949 1.97909L8.91562 1.97733L8.68122 1.97674L8.4938 1.97788C6.74193 1.9943 5.79778 2.17173 4.88583 2.63211L4.83786 2.6566L4.77488 2.68949L4.70121 2.72923C3.84083 3.20186 3.16427 3.88274 2.70026 4.74262C2.1869 5.69396 1.9959 6.6299 1.97812 8.42017L1.97736 8.51354L1.97674 8.70427L1.97673 11.3745L1.97791 11.562C1.9942 13.243 2.16235 14.1739 2.59197 15.0477L2.61567 15.0953L2.66338 15.1881L2.69655 15.2505L2.73667 15.3236C3.21363 16.1764 3.90055 16.8471 4.76806 17.3069C5.71166 17.807 6.64009 17.9981 8.38889 18.0209L8.57276 18.0227L8.80476 18.0233L9.0859 18.0211L9.26711 18.0181C10.8418 17.9859 11.7344 17.8059 12.6015 17.3684L12.6505 17.3434L12.7129 17.3108L12.8013 17.263C13.1636 17.0626 13.492 16.8262 13.7865 16.554C13.9845 16.3709 14.2935 16.3831 14.4766 16.5812C14.6597 16.7792 14.6475 17.0882 14.4495 17.2713C14.1221 17.5739 13.7604 17.839 13.3626 18.0677L13.2701 18.1198L13.1718 18.1731L13.1009 18.2101C12.0495 18.7529 10.9947 18.966 9.1933 18.9963L9.09608 18.9978L8.80737 19L8.56848 18.9994L8.36998 18.9975C6.47973 18.9719 5.40723 18.7511 4.31063 18.1699C3.30372 17.6362 2.49543 16.8586 1.92679 15.8752L1.88239 15.7971L1.83746 15.7152L1.79808 15.6412L1.74526 15.5385C1.22871 14.5129 1.02638 13.4582 1.00233 11.6681L1.00119 11.5698L1 11.3776V8.70271L1.00062 8.5088L1.00262 8.3118C1.02865 6.4357 1.25251 5.36875 1.84068 4.27877C2.3799 3.27953 3.16445 2.47826 4.15549 1.91534L4.23416 1.8714L4.31661 1.82695L4.38748 1.78989L4.49768 1.73422C5.5454 1.21659 6.62354 1.01922 8.48242 1.00124L8.68101 1ZM14.913 6.16539L14.9325 6.18383L18.3858 9.63714C18.5701 9.8215 18.5763 10.1166 18.4042 10.3083L18.3858 10.3278L14.9325 13.7811C14.7417 13.9718 14.4325 13.9718 14.2418 13.7811C14.0574 13.5968 14.0513 13.3017 14.2234 13.1099L14.2418 13.0905L16.8615 10.4707L7.33131 10.4708C7.06159 10.4708 6.84294 10.2522 6.84294 9.98247C6.84294 9.72174 7.04725 9.50873 7.30451 9.49482L7.33131 9.4941L16.8615 9.494L14.2418 6.87449C14.0574 6.69013 14.0513 6.39503 14.2234 6.20328L14.2418 6.18383C14.4262 5.99946 14.7213 5.99332 14.913 6.16539Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
size: number | string;
|
||||||
|
}>(), {
|
||||||
|
size: 18,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
// Copyright (C) 2023 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 1C12.6387 1 15.0122 2.13558 16.6584 3.94469C16.2663 3.78243 15.8365 3.69291 15.3858 3.69291C15.2442 3.69291 15.1046 3.70176 14.9676 3.71892C13.6027 2.63772 11.8767 1.99213 10 1.99213C7.56843 1.99213 5.38999 3.07588 3.92135 4.78671L6.65807 4.7867C8.12561 4.7867 9.31529 5.97638 9.31529 7.44392C9.31529 8.89649 8.14976 10.0768 6.7029 10.1008L6.65807 10.1011H5.49148C5.13354 10.1011 4.84338 10.3913 4.84338 10.7492C4.84338 11.0978 5.11847 11.382 5.46337 11.3968L5.49148 11.3974H5.71832C6.97472 11.3974 7.9959 12.4044 8.01869 13.6554L8.01908 13.7305C8.01908 15.0048 6.99757 16.0404 5.72877 16.0633L5.68591 16.0637L4.76948 16.0638C6.17266 17.2752 8.00077 18.0079 10 18.0079C11.5512 18.0079 12.9994 17.5668 14.226 16.8032L13.4719 16.8032C11.8673 16.8032 10.5664 15.5023 10.5664 13.8976C10.5664 12.3093 11.8408 11.0187 13.4229 10.9925L13.4719 10.9921H15.8814C16.2728 10.9921 16.59 10.6748 16.59 10.2835C16.59 10.2329 16.5847 10.1835 16.5747 10.136C16.8942 10.0138 17.1903 9.84377 17.4539 9.63464C17.5366 9.83469 17.5822 10.0539 17.5822 10.2835C17.5822 11.2083 16.8439 11.9608 15.9246 11.9837L15.8814 11.9843L13.4801 11.9842L13.4393 11.9845C12.3966 12.0018 11.5585 12.853 11.5585 13.8976C11.5585 14.9397 12.3916 15.7872 13.428 15.8105L13.4719 15.811H14.8362L15.6005 15.7237C17.086 14.27 18.0079 12.2427 18.0079 10C18.0079 9.70782 17.9922 9.4193 17.9617 9.13523C18.3221 8.69615 18.5725 8.1632 18.6705 7.57862C18.8852 8.34894 19 9.16106 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM6.65807 5.77883L3.61383 5.77893L3.59538 5.78299C3.43495 5.81918 3.27795 5.85566 3.12436 5.8924C2.40541 7.09338 1.99213 8.49842 1.99213 10C1.99213 11.9246 2.6711 13.6907 3.80259 15.0717L5.7109 15.0713C6.4279 15.0584 7.00634 14.4827 7.02643 13.7738L7.02697 13.7357L7.02673 13.6734C7.01399 12.9741 6.45254 12.4099 5.75642 12.39L5.71832 12.3895H5.49148L5.44224 12.3887L5.42106 12.388C4.54466 12.3506 3.85125 11.6287 3.85125 10.7492C3.85125 9.85731 4.56318 9.13166 5.44979 9.10954L5.49148 9.10902L6.64986 9.10905L6.68649 9.10878C7.59384 9.09377 8.32316 8.35301 8.32316 7.44392C8.32316 6.53847 7.60043 5.80181 6.70038 5.77936L6.65807 5.77883ZM15.3858 5.46457C16.2469 5.46457 16.9449 6.16258 16.9449 7.02362C16.9449 7.88466 16.2469 8.58268 15.3858 8.58268C14.5248 8.58268 13.8268 7.88466 13.8268 7.02362C13.8268 6.16258 14.5248 5.46457 15.3858 5.46457Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
size: number | string;
|
||||||
|
}>(), {
|
||||||
|
size: 20,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
// Copyright (C) 2023 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213ZM10.2601 5.48501L10.2799 5.50374L13.7876 9.01144C13.9813 9.20516 13.9813 9.51925 13.7876 9.71297C13.6003 9.90024 13.3006 9.90648 13.1058 9.7317L13.0861 9.71297L10.4252 7.05211V14.4646C10.4252 14.7385 10.2031 14.9606 9.92913 14.9606C9.6643 14.9606 9.44794 14.7531 9.43381 14.4918L9.43307 14.4646V7.05211L6.77221 9.71297C6.58494 9.90024 6.2852 9.90648 6.09043 9.7317L6.07067 9.71297C5.8834 9.52571 5.87716 9.22597 6.05194 9.0312L6.07067 9.01144L9.57837 5.50374C9.76563 5.31647 10.0654 5.31023 10.2601 5.48501Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
size: number | string;
|
||||||
|
}>(), {
|
||||||
|
size: 18,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -8,10 +8,9 @@
|
|||||||
<template v-if="pathBeforeAccountPage">
|
<template v-if="pathBeforeAccountPage">
|
||||||
<v-list-item class="pa-4 rounded-lg" link router-link :to="pathBeforeAccountPage" @click="() => registerLinkClick(pathBeforeAccountPage)">
|
<v-list-item class="pa-4 rounded-lg" link router-link :to="pathBeforeAccountPage" @click="() => registerLinkClick(pathBeforeAccountPage)">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img src="@poc/assets/icon-back-tonal.svg" alt="Project">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<path d="M1 10C1 5.02944 5.02944 0.999999 10 0.999999C14.9706 0.999999 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10ZM1.99213 10C1.99213 14.4226 5.57737 18.0079 10 18.0079C14.4226 18.0079 18.0079 14.4226 18.0079 10C18.0079 5.57737 14.4226 1.99213 10 1.99213C5.57737 1.99213 1.99213 5.57737 1.99213 10ZM5.48501 9.73986L5.50374 9.7201L9.01144 6.2124C9.20516 6.01868 9.51925 6.01868 9.71297 6.2124C9.90024 6.39967 9.90648 6.69941 9.7317 6.89418L9.71297 6.91394L7.05211 9.5748L14.4646 9.5748C14.7385 9.5748 14.9606 9.7969 14.9606 10.0709C14.9606 10.3357 14.7531 10.5521 14.4918 10.5662L14.4646 10.5669L7.05211 10.5669L9.71297 13.2278C9.90024 13.4151 9.90648 13.7148 9.7317 13.9096L9.71297 13.9293C9.52571 14.1166 9.22597 14.1228 9.0312 13.9481L9.01144 13.9293L5.50374 10.4216C5.31647 10.2344 5.31023 9.93463 5.48501 9.73986Z" fill="currentColor" />
|
||||||
<path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
|
</svg>
|
||||||
</svg> -->
|
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title link class="text-body-2 ml-3">
|
<v-list-item-title link class="text-body-2 ml-3">
|
||||||
Go back
|
Go back
|
||||||
@ -24,16 +23,7 @@
|
|||||||
<!-- All Projects -->
|
<!-- All Projects -->
|
||||||
<v-list-item class="pa-4 rounded-lg" link router-link to="/projects" @click="() => registerLinkClick('/projects')">
|
<v-list-item class="pa-4 rounded-lg" link router-link to="/projects" @click="() => registerLinkClick('/projects')">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<!-- <img src="@poc/assets/icon-prosject.svg" alt="Project" class="mr-3"> -->
|
<icon-all-projects />
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5.33455 11.8182L2 10L5.33455 8.18182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M14.6655 8.18182L18.0001 10L14.6655 11.8182" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M18 13.6364L10 18L2 13.6364L5.33455 11.8182L10 14.3636L14.6655 11.8182L18 13.6364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M2 6.36364L10 10.7273L18 6.36364L10 2L2 6.36364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</svg>
|
|
||||||
<!-- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M10.0567 1.05318L10.0849 1.06832L17.4768 5.33727C17.6249 5.42279 17.7084 5.5642 17.7274 5.71277L17.7301 5.73906L17.7314 5.76543L17.7316 14.2407C17.7316 14.4124 17.6452 14.5718 17.5032 14.6657L17.476 14.6826L10.084 18.9322C9.93533 19.0176 9.75438 19.0223 9.60224 18.9463L9.57407 18.9311L2.25387 14.6815C2.10601 14.5956 2.01167 14.4418 2.00108 14.2726L2 14.2407V5.77863L2.00023 5.75974C1.99504 5.58748 2.07759 5.41781 2.22993 5.31793L2.25457 5.30275L9.57482 1.06849C9.71403 0.987969 9.88182 0.978444 10.0278 1.03993L10.0567 1.05318ZM16.7123 6.6615L10.3397 10.3418V17.6094L16.7123 13.9458V6.6615ZM3.01944 6.66573V13.947L9.32037 17.605V10.3402L3.01944 6.66573ZM9.83034 2.09828L3.49475 5.76287L9.83122 9.45833L16.2029 5.7786L9.83034 2.09828Z" fill="currentColor"/>
|
|
||||||
</svg> -->
|
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title link class="text-body-2 ml-3">
|
<v-list-item-title link class="text-body-2 ml-3">
|
||||||
All Projects
|
All Projects
|
||||||
@ -42,10 +32,7 @@
|
|||||||
|
|
||||||
<v-list-item link router-link to="settings" class="my-1 py-3" rounded="lg" @click="() => registerLinkClick('/settings')">
|
<v-list-item link router-link to="settings" class="my-1 py-3" rounded="lg" @click="() => registerLinkClick('/settings')">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<!-- <img src="@poc/assets/icon-settings.svg" alt="Account Settings" class="mr-3"> -->
|
<icon-settings />
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.56 1C12.3815 1 13.0476 1.66599 13.0476 2.48757L13.0475 2.73016C13.0475 3.28183 13.4947 3.72906 14.0464 3.72907C14.2217 3.72907 14.394 3.68292 14.5458 3.59525L14.756 3.47394C15.4675 3.06317 16.3773 3.30695 16.7881 4.01845L18.5732 7.11038C18.9768 7.80939 18.7486 8.69981 18.0657 9.12039L18.0287 9.14245L17.8186 9.26372C17.3646 9.52585 17.209 10.1064 17.4711 10.5605C17.5544 10.7048 17.6743 10.8247 17.8186 10.908L17.9543 10.9863C18.6658 11.3971 18.9096 12.3069 18.4988 13.0185L16.7881 15.9815C16.3845 16.6806 15.4993 16.9282 14.7936 16.5471L14.756 16.526L14.5459 16.4047C14.0681 16.1288 13.4572 16.2925 13.1814 16.7703C13.0937 16.9221 13.0475 17.0944 13.0475 17.2698L13.0475 17.5124C13.0476 18.3201 12.404 18.9774 11.6016 18.9995L11.56 19H7.98971C7.16814 19 6.50212 18.334 6.50207 17.5124L6.50206 17.3986C6.50205 16.888 6.08812 16.4741 5.57753 16.4741C5.41524 16.4741 5.25582 16.5169 5.11528 16.598L5.01682 16.6549C4.31782 17.0585 3.42739 16.8303 3.0068 16.1474L2.98473 16.1104L1.19961 13.0185C0.788862 12.3069 1.03262 11.3972 1.74409 10.9863L1.95426 10.865C2.43201 10.5891 2.59568 9.97821 2.31984 9.50046C2.23216 9.34861 2.10605 9.22252 1.9542 9.13485L1.74414 9.01359C1.04506 8.6101 0.797456 7.72487 1.1785 7.0192L1.19961 6.98155L2.91035 4.01845C3.32115 3.30695 4.23095 3.06317 4.94246 3.47394L5.07809 3.55224C5.53214 3.81438 6.11274 3.65881 6.37488 3.20475C6.45819 3.06045 6.50206 2.89675 6.50206 2.73012L6.50207 2.4876C6.50212 1.66604 7.16814 1 7.98971 1H11.56ZM11.56 2.19008H7.98971C7.83287 2.19008 7.70434 2.31148 7.69297 2.46543L7.69215 2.48763L7.69214 2.73015C7.69213 3.10567 7.59329 3.47457 7.40553 3.79978C6.82308 4.80864 5.54304 5.16365 4.52646 4.60729L4.48306 4.58289L4.34745 4.5046C4.21191 4.42635 4.04039 4.46685 3.9534 4.59381L3.94099 4.61349L2.22567 7.58465C2.15347 7.71836 2.19498 7.88481 2.31889 7.97014L2.33914 7.98292L2.54919 8.10418C2.88197 8.29629 3.15832 8.57262 3.35046 8.9054C3.94656 9.9378 3.60605 11.254 2.59255 11.87L2.54933 11.8956L2.33921 12.0169C2.20365 12.0952 2.15296 12.264 2.2194 12.4028L2.23025 12.4234L4.02177 15.5257L4.03337 15.543C4.11707 15.6574 4.27188 15.6966 4.40057 15.6354L4.42176 15.6242L4.52022 15.5674C4.84167 15.3818 5.20631 15.2841 5.5775 15.2841C6.72978 15.284 7.66683 16.2057 7.69164 17.352L7.69214 17.3986L7.69215 17.5123C7.69216 17.6692 7.81356 17.7977 7.9675 17.8091L7.98971 17.8099H11.5447L11.5711 17.8096L11.5915 17.8083C11.7334 17.7936 11.8457 17.6783 11.8566 17.5352L11.8574 17.5124L11.8574 17.2698C11.8574 16.8855 11.9586 16.508 12.1507 16.1752C12.7468 15.1428 14.0569 14.7797 15.0972 15.3494L15.1409 15.3741L15.3375 15.4875L15.3616 15.501L15.3805 15.5104C15.5101 15.5676 15.6638 15.5241 15.7446 15.4067L15.7574 15.3865L17.4682 12.4234C17.5464 12.2879 17.5059 12.1164 17.379 12.0294L17.3593 12.017L17.2236 11.9386C16.8983 11.7509 16.6282 11.4808 16.4405 11.1555C15.858 10.1467 16.1906 8.86061 17.1808 8.25844L17.2236 8.23306L17.4263 8.1161L17.4446 8.10509L17.4614 8.09381C17.5757 8.01011 17.6149 7.85531 17.5537 7.72661L17.5425 7.70542L15.7574 4.61351C15.6792 4.47797 15.5104 4.42729 15.3716 4.49374L15.351 4.50459L15.1409 4.62589C14.8081 4.81802 14.4306 4.91916 14.0464 4.91915C12.8531 4.91912 11.8829 3.96436 11.8579 2.77695L11.8574 2.72996L11.8575 2.48757C11.8575 2.33074 11.7361 2.20225 11.5822 2.1909L11.56 2.19008ZM9.90209 5.90909C12.1614 5.90909 13.993 7.74065 13.993 10C13.993 12.2593 12.1614 14.0909 9.90209 14.0909C7.64274 14.0909 5.81118 12.2593 5.81118 10C5.81118 7.74065 7.64274 5.90909 9.90209 5.90909ZM9.90209 6.95041C8.21785 6.95041 6.8525 8.31576 6.8525 10C6.8525 11.6842 8.21785 13.0496 9.90209 13.0496C11.5863 13.0496 12.9517 11.6842 12.9517 10C12.9517 8.31576 11.5863 6.95041 9.90209 6.95041Z" fill="currentColor" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
Account Settings
|
Account Settings
|
||||||
@ -54,10 +41,7 @@
|
|||||||
|
|
||||||
<v-list-item link router-link to="billing" class="my-1" rounded="lg" @click="() => registerLinkClick('/billing')">
|
<v-list-item link router-link to="billing" class="my-1" rounded="lg" @click="() => registerLinkClick('/billing')">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<!-- <img src="@poc/assets/icon-card.svg" alt="Billing" class="mr-3"> -->
|
<icon-card />
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M15.5674 3L15.707 3.0006C16.7956 3.01012 17.2112 3.13361 17.6302 3.35765C18.0665 3.59102 18.409 3.93348 18.6424 4.36984L18.6698 4.42224C18.8855 4.84205 19 5.28678 19 6.43264V12.807C19 14.0006 18.8757 14.4335 18.6424 14.8698C18.409 15.3062 18.0665 15.6486 17.6302 15.882L17.5778 15.9095C17.158 16.1251 16.7132 16.2397 15.5674 16.2397H4.43264C3.23904 16.2397 2.80621 16.1154 2.36984 15.882C1.93348 15.6486 1.59102 15.3062 1.35765 14.8698L1.33017 14.8174C1.11454 14.3976 1 13.9529 1 12.807V6.43264L1.0006 6.29301C1.01012 5.2044 1.13361 4.78875 1.35765 4.36984C1.59102 3.93348 1.93348 3.59102 2.36984 3.35765L2.42224 3.33017C2.84205 3.11454 3.28678 3 4.43264 3H15.5674ZM17.9585 9.39669H2.04132L2.04142 12.8696C2.04416 13.7524 2.10634 14.0617 2.2759 14.3787C2.41222 14.6336 2.60604 14.8274 2.86093 14.9638L2.90518 14.9867C3.208 15.139 3.52829 15.1956 4.37011 15.1983H15.6299L15.8105 15.1967C16.557 15.1861 16.8447 15.1212 17.1391 14.9638C17.394 14.8274 17.5878 14.6336 17.7241 14.3787L17.7471 14.3345C17.8993 14.0317 17.956 13.7114 17.9586 12.8696L17.9585 9.39669ZM15.6299 4.04132H4.43264C3.50161 4.04132 3.18536 4.10239 2.86093 4.2759C2.60604 4.41222 2.41222 4.60604 2.2759 4.86093L2.25293 4.90518C2.10811 5.19322 2.04978 5.49709 2.04219 6.25058L2.04132 6.43264V6.57025H17.9585L17.9586 6.37011L17.9571 6.18949C17.9464 5.44301 17.8816 5.15534 17.7241 4.86093C17.5878 4.60604 17.394 4.41222 17.1391 4.2759L17.0948 4.25293C16.792 4.10068 16.4717 4.04403 15.6299 4.04132Z" fill="currentColor" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
Account Billing
|
Account Billing
|
||||||
@ -85,6 +69,10 @@ import { useDisplay } from 'vuetify';
|
|||||||
import { useAppStore } from '@poc/store/appStore';
|
import { useAppStore } from '@poc/store/appStore';
|
||||||
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
|
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
|
||||||
|
|
||||||
|
import IconCard from '@poc/components/icons/IconCard.vue';
|
||||||
|
import IconSettings from '@poc/components/icons/IconSettings.vue';
|
||||||
|
import IconAllProjects from '@poc/components/icons/IconAllProjects.vue';
|
||||||
|
|
||||||
const analyticsStore = useAnalyticsStore();
|
const analyticsStore = useAnalyticsStore();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
|||||||
@ -40,15 +40,16 @@
|
|||||||
border
|
border
|
||||||
inset
|
inset
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
rounded="xl"
|
class="pa-1"
|
||||||
>
|
>
|
||||||
<v-tooltip text="Light Theme" location="bottom">
|
<v-tooltip text="Light Theme" location="bottom">
|
||||||
<template #activator="{ props: darkProps }">
|
<template #activator="{ props: darkProps }">
|
||||||
<v-btn
|
<v-btn
|
||||||
v-bind="darkProps"
|
v-bind="darkProps"
|
||||||
|
rounded="xl"
|
||||||
icon="mdi-weather-sunny"
|
icon="mdi-weather-sunny"
|
||||||
size="small"
|
size="small"
|
||||||
class="px-5"
|
class="px-4"
|
||||||
aria-label="Toggle Light Theme"
|
aria-label="Toggle Light Theme"
|
||||||
@click="toggleTheme('light')"
|
@click="toggleTheme('light')"
|
||||||
/>
|
/>
|
||||||
@ -59,9 +60,10 @@
|
|||||||
<template #activator="{ props: lightProps }">
|
<template #activator="{ props: lightProps }">
|
||||||
<v-btn
|
<v-btn
|
||||||
v-bind="lightProps"
|
v-bind="lightProps"
|
||||||
|
rounded="xl"
|
||||||
icon="mdi-weather-night"
|
icon="mdi-weather-night"
|
||||||
size="small"
|
size="small"
|
||||||
class="px-5"
|
class="px-4"
|
||||||
aria-label="Toggle Dark Theme"
|
aria-label="Toggle Dark Theme"
|
||||||
@click="toggleTheme('dark')"
|
@click="toggleTheme('dark')"
|
||||||
/>
|
/>
|
||||||
@ -74,29 +76,48 @@
|
|||||||
v-bind="activatorProps"
|
v-bind="activatorProps"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
color="default"
|
color="default"
|
||||||
class="ml-4 font-weight-medium"
|
class="ml-3 font-weight-medium"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
|
<img src="@poc/assets/icon-dropdown.svg" alt="Account Dropdown">
|
||||||
</template>
|
</template>
|
||||||
My Account
|
My Account
|
||||||
<v-chip
|
|
||||||
class="ml-2 font-weight-bold"
|
|
||||||
:color="isPaidTier ? 'success' : 'default'"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
rounded
|
|
||||||
>
|
|
||||||
{{ isPaidTier ? 'Pro' : 'Free' }}
|
|
||||||
</v-chip>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- My Account Menu -->
|
<!-- My Account Menu -->
|
||||||
<v-list class="px-2">
|
<v-list class="px-2 rounded-lg">
|
||||||
|
<v-list-item class="py-2 rounded-lg">
|
||||||
|
<!-- <template #prepend>
|
||||||
|
<icon-team size="18"></icon-team>
|
||||||
|
</template> -->
|
||||||
|
<v-list-item-title class="text-body-2">
|
||||||
|
<v-chip
|
||||||
|
class="font-weight-bold"
|
||||||
|
:color="isPaidTier ? 'success' : 'info'"
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
rounded
|
||||||
|
>
|
||||||
|
{{ isPaidTier ? 'Pro Account' : 'Free Account' }}
|
||||||
|
</v-chip>
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-list-item v-if="!isPaidTier" link class="my-1 rounded-lg" @click="toggleUpgradeFlow">
|
||||||
|
<template #prepend>
|
||||||
|
<icon-upgrade size="18" />
|
||||||
|
</template>
|
||||||
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
|
Upgrade to Pro
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-divider class="my-2" />
|
||||||
|
|
||||||
<v-list-item class="py-2 rounded-lg">
|
<v-list-item class="py-2 rounded-lg">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-globe size="18" />
|
<icon-region size="18" />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
|
<v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
|
||||||
<v-list-item-subtitle class="ml-3">
|
<v-list-item-subtitle class="ml-3">
|
||||||
@ -106,15 +127,6 @@
|
|||||||
|
|
||||||
<v-divider class="my-2" />
|
<v-divider class="my-2" />
|
||||||
|
|
||||||
<v-list-item v-if="!isPaidTier" link class="my-1 rounded-lg" @click="toggleUpgradeFlow">
|
|
||||||
<template #prepend>
|
|
||||||
<img src="@poc/assets/icon-upgrade.svg" alt="Upgrade">
|
|
||||||
</template>
|
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
|
||||||
Upgrade
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
|
|
||||||
<v-list-item link class="my-1 rounded-lg" router-link to="/account/billing" @click="closeSideNav">
|
<v-list-item link class="my-1 rounded-lg" router-link to="/account/billing" @click="closeSideNav">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<icon-card size="18" />
|
<icon-card size="18" />
|
||||||
@ -126,7 +138,7 @@
|
|||||||
|
|
||||||
<v-list-item link class="my-1 rounded-lg" router-link to="/account/settings" @click="closeSideNav">
|
<v-list-item link class="my-1 rounded-lg" router-link to="/account/settings" @click="closeSideNav">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img src="@poc/assets/icon-settings.svg" alt="Account Settings">
|
<icon-settings size="18" />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
Settings
|
Settings
|
||||||
@ -134,7 +146,7 @@
|
|||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item class="rounded-lg" link @click="onLogout">
|
<v-list-item class="rounded-lg" link @click="onLogout">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<img src="@poc/assets/icon-logout.svg" alt="Log Out">
|
<icon-logout size="18" />
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="text-body-2 ml-3">
|
<v-list-item-title class="text-body-2 ml-3">
|
||||||
Sign Out
|
Sign Out
|
||||||
@ -185,6 +197,11 @@ import { useConfigStore } from '@/store/modules/configStore';
|
|||||||
|
|
||||||
import IconCard from '@poc/components/icons/IconCard.vue';
|
import IconCard from '@poc/components/icons/IconCard.vue';
|
||||||
import IconGlobe from '@poc/components/icons/IconGlobe.vue';
|
import IconGlobe from '@poc/components/icons/IconGlobe.vue';
|
||||||
|
import IconUpgrade from '@poc/components/icons/IconUpgrade.vue';
|
||||||
|
import IconSettings from '@poc/components/icons/IconSettings.vue';
|
||||||
|
import IconLogout from '@poc/components/icons/IconLogout.vue';
|
||||||
|
import IconRegion from '@poc/components/icons/IconRegion.vue';
|
||||||
|
import IconTeam from '@poc/components/icons/IconTeam.vue';
|
||||||
|
|
||||||
const activeTheme = ref<number>(0);
|
const activeTheme = ref<number>(0);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|||||||
@ -26,13 +26,12 @@ export default createVuetify({
|
|||||||
primary: '#0149FF',
|
primary: '#0149FF',
|
||||||
secondary: '#0218A7',
|
secondary: '#0218A7',
|
||||||
background: '#FFF',
|
background: '#FFF',
|
||||||
info: '#537CFF',
|
|
||||||
success: '#00AC26',
|
|
||||||
warning: '#FF8A00',
|
|
||||||
error: '#FF458B',
|
|
||||||
error2: '#FF0149',
|
|
||||||
surface: '#FFF',
|
surface: '#FFF',
|
||||||
'surface-emphasis': '#FAFAFB',
|
info: '#0059D0',
|
||||||
|
help: '#FFA800',
|
||||||
|
success: '#00AC26',
|
||||||
|
warning: '#FF7F00',
|
||||||
|
error: '#FF0149',
|
||||||
purple: '#7B61FF',
|
purple: '#7B61FF',
|
||||||
blue6: '#091c45',
|
blue6: '#091c45',
|
||||||
blue5: '#0218A7',
|
blue5: '#0218A7',
|
||||||
@ -49,13 +48,12 @@ export default createVuetify({
|
|||||||
colors: {
|
colors: {
|
||||||
primary: '#0149FF',
|
primary: '#0149FF',
|
||||||
secondary: '#537CFF',
|
secondary: '#537CFF',
|
||||||
background: '#0d1116',
|
background: '#090920',
|
||||||
// background: '#101418',
|
success: '#00AC26',
|
||||||
error: '#FF458B',
|
help: '#FFC600',
|
||||||
error2: '#FF0149',
|
error: '#FF0149',
|
||||||
surface: '#0d1116',
|
surface: '#090920',
|
||||||
'surface-emphasis': '#1E2426',
|
purple: '#A18EFF',
|
||||||
purple: '#7B61FF',
|
|
||||||
blue6: '#091c45',
|
blue6: '#091c45',
|
||||||
blue5: '#2196f3',
|
blue5: '#2196f3',
|
||||||
blue4: '#0059D0',
|
blue4: '#0059D0',
|
||||||
@ -64,8 +62,9 @@ export default createVuetify({
|
|||||||
yellow2: '#FFB701',
|
yellow2: '#FFB701',
|
||||||
orange: '#FFA800',
|
orange: '#FFA800',
|
||||||
warning: '#FF8A00',
|
warning: '#FF8A00',
|
||||||
green: '#00B150',
|
// green: '#00B150',
|
||||||
purple2: '#7B61FF',
|
green: '#00e366',
|
||||||
|
purple2: '#A18EFF',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -73,7 +72,6 @@ export default createVuetify({
|
|||||||
defaults: {
|
defaults: {
|
||||||
global: {
|
global: {
|
||||||
// ripple: false,
|
// ripple: false,
|
||||||
hideDetails: 'auto',
|
|
||||||
},
|
},
|
||||||
VDataTable: {
|
VDataTable: {
|
||||||
fixedHeader: true,
|
fixedHeader: true,
|
||||||
@ -95,5 +93,17 @@ export default createVuetify({
|
|||||||
rounded: 'lg',
|
rounded: 'lg',
|
||||||
variant: 'outlined',
|
variant: 'outlined',
|
||||||
},
|
},
|
||||||
|
VList: {
|
||||||
|
rounded: 'xlg',
|
||||||
|
},
|
||||||
|
VListItem: {
|
||||||
|
rounded: 'lg',
|
||||||
|
},
|
||||||
|
VListItemTitle: {
|
||||||
|
class: 'text-body-2 font-weight-medium',
|
||||||
|
},
|
||||||
|
VCard: {
|
||||||
|
border: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -20,9 +20,9 @@ html {
|
|||||||
--v-theme-overlay-multiplier: 0.75;
|
--v-theme-overlay-multiplier: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Nav
|
||||||
.v-app-bar.v-toolbar {
|
.v-app-bar.v-toolbar {
|
||||||
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
// box-shadow: 0 1px 3px rgba(var(--v-theme-on-surface), 0.05) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle visibility class
|
// Toggle visibility class
|
||||||
@ -52,12 +52,10 @@ html {
|
|||||||
}
|
}
|
||||||
.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
|
.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
|
||||||
border-color: #9da3a7;
|
border-color: #9da3a7;
|
||||||
// color: rgb(var(--v-theme-primary));
|
|
||||||
border-color: rgba(var(--v-border-color), 0.5);
|
border-color: rgba(var(--v-border-color), 0.5);
|
||||||
}
|
}
|
||||||
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
|
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
|
||||||
border-color: #a9b0b949;
|
border-color: #a9b0b949;
|
||||||
// border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
}
|
}
|
||||||
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined:hover {
|
.v-btn.v-theme--dark.text-default.v-btn--variant-outlined:hover {
|
||||||
border-color: #a9b0b979;
|
border-color: #a9b0b979;
|
||||||
@ -70,35 +68,7 @@ html {
|
|||||||
// outline: none !important;
|
// outline: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button Sizes
|
// Button sizes
|
||||||
/*
|
|
||||||
.v-btn--size-x-small {
|
|
||||||
--v-btn-height: 2rem;
|
|
||||||
padding-left: 12px;
|
|
||||||
padding-right: 12px;
|
|
||||||
}
|
|
||||||
.v-btn--size-small {
|
|
||||||
--v-btn-height: 2.25rem;
|
|
||||||
padding-left: 14px;
|
|
||||||
padding-right: 14px;
|
|
||||||
}
|
|
||||||
.v-btn--size-default {
|
|
||||||
// --v-btn-height: 2.75rem;
|
|
||||||
--v-btn-height: 3rem;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.v-btn--size-large {
|
|
||||||
--v-btn-height: 3.5rem;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
.v-btn--size-x-large {
|
|
||||||
--v-btn-height: 4rem;
|
|
||||||
padding-left: 24px;
|
|
||||||
padding-right: 24px;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.v-btn--size-default {
|
.v-btn--size-default {
|
||||||
--v-btn-size: 0.8rem;
|
--v-btn-size: 0.8rem;
|
||||||
--v-btn-height: 44px;
|
--v-btn-height: 44px;
|
||||||
@ -109,19 +79,11 @@ html {
|
|||||||
--v-btn-height: 48px;
|
--v-btn-height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button Icon
|
|
||||||
/*
|
|
||||||
.v-btn--icon {
|
|
||||||
padding: 4px;
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Menu border
|
// Menu border
|
||||||
.v-menu > .v-overlay__content {
|
.v-overlay__content .v-list {
|
||||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||||
border-radius: 12px;
|
// border-radius: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Menu list item
|
// Menu list item
|
||||||
@ -129,12 +91,6 @@ html {
|
|||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Menu list item active background
|
|
||||||
// .v-list-item--variant-text .v-list-item__overlay {
|
|
||||||
// background: rgb(var(--v-border-color));
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
// Card Light Theme
|
// Card Light Theme
|
||||||
.v-card.v-theme--light {
|
.v-card.v-theme--light {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
@ -162,13 +118,10 @@ html {
|
|||||||
|
|
||||||
// Overlay behind modals/dialogs opacity and color
|
// Overlay behind modals/dialogs opacity and color
|
||||||
.v-overlay__scrim {
|
.v-overlay__scrim {
|
||||||
|
background: #000;
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-theme--dark .v-overlay__scrim {
|
|
||||||
--v-theme-on-surface: 0,0,0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Align the checkboxes in the tables
|
// Align the checkboxes in the tables
|
||||||
.v-selection-control {
|
.v-selection-control {
|
||||||
contain: inherit;
|
contain: inherit;
|
||||||
@ -189,7 +142,6 @@ html {
|
|||||||
|
|
||||||
// Sorting icon
|
// Sorting icon
|
||||||
.mdi-arrow-up::before, .mdi-arrow-down::before {
|
.mdi-arrow-up::before, .mdi-arrow-down::before {
|
||||||
// content: "\F005D";
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -213,6 +165,12 @@ html {
|
|||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Table content
|
||||||
|
.v-list-item__content {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
// Table Footer
|
// Table Footer
|
||||||
.v-data-table-footer {
|
.v-data-table-footer {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@ -48,7 +48,7 @@
|
|||||||
<div v-if="isLoading" class="pb-2 text-center">
|
<div v-if="isLoading" class="pb-2 text-center">
|
||||||
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
||||||
</div>
|
</div>
|
||||||
<v-chip v-else rounded color="success" variant="outlined" class="font-weight-bold mb-2">
|
<v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||||
{{ centsToDollars(priceSummary) }}
|
{{ centsToDollars(priceSummary) }}
|
||||||
</v-chip>
|
</v-chip>
|
||||||
<v-divider class="my-4" />
|
<v-divider class="my-4" />
|
||||||
@ -64,7 +64,7 @@
|
|||||||
<div v-if="isLoading" class="pb-2 text-center">
|
<div v-if="isLoading" class="pb-2 text-center">
|
||||||
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
||||||
</div>
|
</div>
|
||||||
<v-chip v-else rounded color="success" variant="outlined" class="font-weight-bold mb-2">
|
<v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||||
{{ formattedTokenBalance }}
|
{{ formattedTokenBalance }}
|
||||||
</v-chip>
|
</v-chip>
|
||||||
<v-divider class="my-4" />
|
<v-divider class="my-4" />
|
||||||
@ -80,7 +80,6 @@
|
|||||||
class="d-flex align-center justify-center"
|
class="d-flex align-center justify-center"
|
||||||
height="200"
|
height="200"
|
||||||
rounded="xlg"
|
rounded="xlg"
|
||||||
border
|
|
||||||
>
|
>
|
||||||
<v-progress-circular color="primary" size="48" indeterminate />
|
<v-progress-circular color="primary" size="48" indeterminate />
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -89,11 +88,10 @@
|
|||||||
:title="`Coupon / ${coupon.name}`"
|
:title="`Coupon / ${coupon.name}`"
|
||||||
:subtitle="`${isCouponActive ? 'Active' : 'Expired'} / ${couponExpiration}`"
|
:subtitle="`${isCouponActive ? 'Active' : 'Expired'} / ${couponExpiration}`"
|
||||||
rounded="xlg"
|
rounded="xlg"
|
||||||
border
|
|
||||||
>
|
>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-chip
|
<v-chip
|
||||||
:color="isCouponActive ? 'success' : 'error'"
|
:color="isCouponActive ? 'green' : 'error'"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
class="font-weight-bold mb-2"
|
class="font-weight-bold mb-2"
|
||||||
rounded
|
rounded
|
||||||
@ -106,15 +104,21 @@
|
|||||||
</v-card>
|
</v-card>
|
||||||
<v-card
|
<v-card
|
||||||
v-else
|
v-else
|
||||||
class="billing__new-coupon-card d-flex align-center justify-center"
|
title="Coupon"
|
||||||
color="primary"
|
subtitle="Apply a new coupon to your account"
|
||||||
variant="text"
|
variant="flat"
|
||||||
height="200"
|
rounded="xlg"
|
||||||
link
|
|
||||||
border
|
|
||||||
>
|
>
|
||||||
<v-icon icon="mdi-plus" class="mr-1" size="small" />
|
<v-card-text>
|
||||||
<span class="text-decoration-underline mr-1">Apply New Coupon</span>
|
<div v-if="isLoading" class="pb-2 text-center">
|
||||||
|
<v-progress-circular class="ma-0" color="primary" size="30" indeterminate />
|
||||||
|
</div>
|
||||||
|
<v-chip v-else rounded color="green" variant="outlined" class="font-weight-bold mb-2">
|
||||||
|
No Coupon
|
||||||
|
</v-chip>
|
||||||
|
<v-divider class="my-4" />
|
||||||
|
<v-btn variant="outlined" color="default" size="small" class="mr-2">+ Apply New Coupon</v-btn>
|
||||||
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@ -348,12 +352,4 @@ onMounted(async () => {
|
|||||||
isRollupLoading.value = false;
|
isRollupLoading.value = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.billing__new-coupon-card {
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: dashed;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -13,38 +13,11 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
<v-col v-if="!isPaidTier" cols="auto">
|
<v-col v-if="!isPaidTier" cols="auto">
|
||||||
<v-btn @click="appStore.toggleUpgradeFlow(true)">
|
<v-btn @click="appStore.toggleUpgradeFlow(true)">
|
||||||
Upgrade plan
|
Upgrade
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-row class="d-flex align-center justify-center mt-2">
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-card ref="chartContainer" title="Storage" variant="flat" :border="true" rounded="xlg">
|
|
||||||
<h4 class="pl-4">{{ getDimension(storageUsage) }}</h4>
|
|
||||||
<StorageChart
|
|
||||||
:width="chartWidth"
|
|
||||||
:height="170"
|
|
||||||
:data="storageUsage"
|
|
||||||
:since="chartsSinceDate"
|
|
||||||
:before="chartsBeforeDate"
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-card title="Download" variant="flat" :border="true" rounded="xlg">
|
|
||||||
<h4 class="pl-4">{{ getDimension(allocatedBandwidthUsage) }}</h4>
|
|
||||||
<BandwidthChart
|
|
||||||
:width="chartWidth"
|
|
||||||
:height="170"
|
|
||||||
:data="allocatedBandwidthUsage"
|
|
||||||
:since="chartsSinceDate"
|
|
||||||
:before="chartsBeforeDate"
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="d-flex align-center justify-center mt-2">
|
<v-row class="d-flex align-center justify-center mt-2">
|
||||||
<v-col cols="12" sm="6" md="4" lg="2">
|
<v-col cols="12" sm="6" md="4" lg="2">
|
||||||
<CardStatsComponent icon="file" title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" to="buckets" />
|
<CardStatsComponent icon="file" title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" to="buckets" />
|
||||||
@ -91,6 +64,50 @@
|
|||||||
@cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
|
@cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row class="d-flex align-center justify-center mt-2">
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card ref="chartContainer" variant="flat" :border="true" rounded="xlg">
|
||||||
|
<template #title>
|
||||||
|
<v-card-title class="d-flex align-center">
|
||||||
|
<IconCloud class="mr-2" width="16" height="16" />
|
||||||
|
Storage
|
||||||
|
</v-card-title>
|
||||||
|
</template>
|
||||||
|
<h5 class="pl-4">{{ getDimension(storageUsage) }}</h5>
|
||||||
|
<StorageChart
|
||||||
|
:width="chartWidth"
|
||||||
|
:height="160"
|
||||||
|
:data="storageUsage"
|
||||||
|
:since="chartsSinceDate"
|
||||||
|
:before="chartsBeforeDate"
|
||||||
|
class="pr-4 pb-4"
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card variant="flat" :border="true" rounded="xlg">
|
||||||
|
<template #title>
|
||||||
|
<v-card-title class="d-flex align-center">
|
||||||
|
<IconArrowDown class="mr-2" width="16" height="16" />
|
||||||
|
Download
|
||||||
|
</v-card-title>
|
||||||
|
</template>
|
||||||
|
<h5 class="pl-4">{{ getDimension(allocatedBandwidthUsage) }}</h5>
|
||||||
|
<BandwidthChart
|
||||||
|
:width="chartWidth"
|
||||||
|
:height="160"
|
||||||
|
:data="allocatedBandwidthUsage"
|
||||||
|
:since="chartsSinceDate"
|
||||||
|
:before="chartsBeforeDate"
|
||||||
|
class="pr-4 pb-4"
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row class="d-flex align-center justify-center">
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<UsageProgressComponent
|
<UsageProgressComponent
|
||||||
icon="globe"
|
icon="globe"
|
||||||
@ -117,6 +134,7 @@
|
|||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-col class="pa-0 mt-6" cols="12">
|
<v-col class="pa-0 mt-6" cols="12">
|
||||||
<v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
|
<v-card-title class="font-weight-bold pl-0">Buckets</v-card-title>
|
||||||
<buckets-data-table />
|
<buckets-data-table />
|
||||||
@ -153,6 +171,8 @@ import BandwidthChart from '@/components/project/dashboard/BandwidthChart.vue';
|
|||||||
import StorageChart from '@/components/project/dashboard/StorageChart.vue';
|
import StorageChart from '@/components/project/dashboard/StorageChart.vue';
|
||||||
import BucketsDataTable from '@poc/components/BucketsDataTable.vue';
|
import BucketsDataTable from '@poc/components/BucketsDataTable.vue';
|
||||||
import EditProjectLimitDialog from '@poc/components/dialogs/EditProjectLimitDialog.vue';
|
import EditProjectLimitDialog from '@poc/components/dialogs/EditProjectLimitDialog.vue';
|
||||||
|
import IconCloud from '@poc/components/icons/IconCloud.vue';
|
||||||
|
import IconArrowDown from '@poc/components/icons/IconArrowDown.vue';
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const usersStore = useUsersStore();
|
const usersStore = useUsersStore();
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
v-model="dialog"
|
v-model="dialog"
|
||||||
activator="parent"
|
activator="parent"
|
||||||
width="auto"
|
width="auto"
|
||||||
min-width="400px"
|
max-width="420px"
|
||||||
transition="fade-transition"
|
transition="fade-transition"
|
||||||
>
|
>
|
||||||
<v-card rounded="xlg">
|
<v-card rounded="xlg">
|
||||||
@ -61,20 +61,19 @@
|
|||||||
|
|
||||||
<v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onAddUsersClick">
|
<v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onAddUsersClick">
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col>
|
<v-col cols="12">
|
||||||
<p>Invite team members to join you in this project.</p>
|
<p class="mb-5">Invite team members to join you in this project.</p>
|
||||||
<!-- <v-divider class="my-6"></v-divider> -->
|
<v-alert
|
||||||
<!-- <p>Use only lowercase letters and numbers, no spaces.</p> -->
|
variant="tonal"
|
||||||
<!-- <v-chip prepend-icon="mdi-information" color="info" rounded="xl">
|
color="info"
|
||||||
Members will have read & write permissions.
|
title="Important Information"
|
||||||
</v-chip> -->
|
text="All team members should use the same passphrase to access the same data."
|
||||||
|
rounded="lg"
|
||||||
|
density="comfortable"
|
||||||
|
border
|
||||||
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
<v-col cols="12">
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
>
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="email"
|
v-model="email"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@ -83,16 +82,10 @@
|
|||||||
hint="Members will have read & write permissions."
|
hint="Members will have read & write permissions."
|
||||||
required
|
required
|
||||||
autofocus
|
autofocus
|
||||||
class="mt-2"
|
class="my-2"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<!-- <v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-btn variant="text" class="mb-4">+ Add More</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row> -->
|
|
||||||
</v-form>
|
</v-form>
|
||||||
|
|
||||||
<v-divider />
|
<v-divider />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user