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

web/satellite/vuetify-poc: ui ux improvements

Browse Source 
This change improves the satellite v2 user interface and overall
experience.

Change-Id: I702a6aa6b0b1a676bb2c404ab54f0ecef3b1ad7a
This commit is contained in:
Tome Boshevski 2023-11-09 13:26:11 -06:00 committed by Storj Robot
parent 07e2a9af06
commit 83ea3772e2
64 changed files with 521 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
View File

@ -27,7 +27,6 @@
item-value="name"
no-data-text="No results found"
select-strategy="all"
class="elevation-1"
@update:itemsPerPage="onUpdateLimit"
@update:page="onUpdatePage"
@update:sortBy="onUpdateSortBy"
@ -53,7 +52,7 @@
>
<v-icon icon="mdi-dots-horizontal" />
<v-menu activator="parent">
<v-list class="pa-2">
<v-list class="pa-1">
<v-list-item class="text-error" density="comfortable" link rounded="lg" @click="() => onDeleteClick(item.raw.name)">
<template #prepend>
<icon-trash bold />

12
web/satellite/vuetify-poc/src/components/BrowserRowActions.vue
View File

@ -28,13 +28,13 @@
>
<v-icon icon="mdi-dots-horizontal" />
<v-menu activator="parent">
<v-list class="pa-2">
<v-list class="pa-1">
<template v-if="file.type !== 'folder'">
<v-list-item density="comfortable" link rounded="lg" @click="emit('previewClick')">
<template #prepend>
<icon-preview />
</template>
<v-list-item-title class="pl-2 text-body-2 font-weight-medium">
<v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
Preview
</v-list-item-title>
</v-list-item>
@ -49,7 +49,7 @@
<icon-download />
</template>
<v-fade-transition>
<v-list-item-title v-show="!isDownloading" class="pl-2 text-body-2 font-weight-medium">
<v-list-item-title v-show="!isDownloading" class="pl-2 ml-2 text-body-2 font-weight-medium">
Download
</v-list-item-title>
</v-fade-transition>
@ -63,18 +63,18 @@
<template #prepend>
<icon-share bold />
</template>
<v-list-item-title class="pl-2 text-body-2 font-weight-medium">
<v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
Share
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-1" />
<v-list-item density="comfortable" link rounded="lg" base-color="error" @click="emit('deleteFileClick')">
<template #prepend>
<icon-trash bold />
</template>
<v-list-item-title class="pl-2 text-body-2 font-weight-medium">
<v-list-item-title class="pl-2 ml-2 text-body-2 font-weight-medium">
Delete
</v-list-item-title>
</v-list-item>

3
web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
View File

@ -24,9 +24,8 @@
:headers="headers"
:items="tableFiles"
:search="search"
class="elevation-1"
:item-value="(item: BrowserObjectWrapper) => item.browserObject.Key"
no-data-text="No results found"
no-data-text="No data found"
:page="cursor.page"
hover
must-sort

13
web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
View File

@ -25,8 +25,7 @@
:loading="areBucketsFetching"
:items-length="page.totalCount"
:items-per-page-options="tableSizeOptions(page.totalCount)"
no-data-text="No results found"
class="elevation-1"
no-data-text="No buckets found"
hover
@update:itemsPerPage="onUpdateLimit"
@update:page="onUpdatePage"
@ -85,8 +84,8 @@
v-bind="activatorProps"
/>
</template>
<v-list class="pa-0">
<v-list-item rounded-lg class="ma-1" link @click="() => showBucketDetailsModal(item.raw.name)">
<v-list class="pa-1">
<v-list-item rounded-lg link @click="() => showBucketDetailsModal(item.raw.name)">
<template #prepend>
<icon-bucket size="18" />
</template>
@ -94,7 +93,7 @@
View Bucket Details
</v-list-item-title>
</v-list-item>
<v-list-item rounded-lg class="ma-1" link @click="() => showShareBucketDialog(item.raw.name)">
<v-list-item rounded-lg link @click="() => showShareBucketDialog(item.raw.name)">
<template #prepend>
<icon-share size="18" />
</template>
@ -102,8 +101,8 @@
Share Bucket
</v-list-item-title>
</v-list-item>
<v-divider />
<v-list-item rounded-lg class="ma-1 text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
<v-divider class="my-1" />
<v-list-item rounded-lg class="text-error text-body-2" link @click="() => showDeleteBucketDialog(item.raw.name)">
<template #prepend>
<icon-trash />
</template>

2
web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
View File

@ -10,7 +10,7 @@
</v-card-title>
</template>
<v-card-text>
<v-chip rounded color="green" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
<v-chip rounded color="default" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
</template>

10
web/satellite/vuetify-poc/src/components/ProjectCard.vue
View File

@ -47,9 +47,9 @@
<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()">
<v-menu activator="parent" location="bottom" transition="fade-transition">
<v-list class="pa-1">
<v-list-item link @click="() => onSettingsClick()">
<template #prepend>
<icon-settings />
</template>
@ -58,9 +58,9 @@
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-1" />
<v-list-item link class="mt-1" rounded="lg" @click="emit('inviteClick')">
<v-list-item link class="mt-1" @click="emit('inviteClick')">
<template #prepend>
<icon-team size="18" />
</template>

4
web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
View File

@ -23,7 +23,6 @@
:items="items"
:search="search"
no-data-text="No results found"
class="elevation-1"
item-key="path"
>
<template #item.name="{ item }">
@ -79,7 +78,7 @@
:loading="decliningIds.has(item.raw.id)"
>
<v-icon icon="mdi-dots-horizontal" size="18" />
<v-menu activator="parent" location="bottom end" transition="scale-transition">
<v-menu activator="parent" location="bottom" transition="scale-transition">
<v-list class="pa-1">
<template v-if="item.raw.role === ProjectRole.Owner">
<v-list-item link @click="() => onSettingsClick(item.raw)">
@ -90,6 +89,7 @@
Project Settings
</v-list-item-title>
</v-list-item>
<v-divider class="my-1" />
<v-list-item link>
<template #prepend>
<icon-team size="18" />

17
web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
View File

@ -2,26 +2,21 @@
// See LICENSE for copying information.
<template>
<v-card min-height="24" :border="0" class="mb-2 elevation-0">
<v-row v-if="selectedMembers.length > 0" class="justify-end align-center ma-0">
<p>{{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }} selected</p>
</v-row>
</v-card>
<v-card variant="flat" :border="true" rounded="xlg">
<v-row align="center" class="ma-0">
<v-col v-if="selectedMembers.length" class="px-0 mr-0 ml-2 mt-2" cols="auto">
<v-col v-if="selectedMembers.length" class="pa-0" cols="auto">
<v-btn
class=" text-caption"
class="text-caption ml-2 mt-2"
prepend-icon="mdi-trash-can-outline"
variant="outlined"
size="large"
color="default"
@click="showDeleteDialog"
>
Remove
Remove {{ selectedMembers.length }} user{{ selectedMembers.length !== 1 ? 's' : '' }}
</v-btn>
</v-col>
<v-col class="px-0 mx-2 mt-2">
<v-col class="pa-0">
<v-text-field
v-model="search"
label="Search"
@ -33,6 +28,7 @@
clearable
density="comfortable"
rounded="lg"
class="mx-2 mt-2"
/>
</v-col>
</v-row>
@ -46,7 +42,6 @@
:items-length="page.totalCount"
:items-per-page-options="tableSizeOptions(page.totalCount)"
no-data-text="No results found"
class="elevation-1"
item-value="email"
select-strategy="all"
item-selectable="selectable"

3
web/satellite/vuetify-poc/src/components/TokenTransactionsTableComponent.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card :border="true" rounded="xlg">
<v-text-field
v-model="search"
label="Search"
@ -26,7 +26,6 @@
:search="search"
:custom-key-sort="customSortFns"
no-data-text="No results found"
class="elevation-1"
>
<template #item.timestamp="{ item }">
<p class="font-weight-bold">

2
web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
View File

@ -10,7 +10,7 @@
</v-card-title>
</template>
<v-card-item>
<v-progress-linear color="green" :model-value="progress" rounded height="6" />
<v-progress-linear color="default" :model-value="progress" rounded height="6" />
</v-card-item>
<v-card-item>
<v-row>

3
web/satellite/vuetify-poc/src/components/billing/BillingHistoryTab.vue
View File

@ -2,14 +2,13 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card :border="true" rounded="xlg">
<v-data-table
:loading="isLoading"
:headers="headers"
:items="historyItems"
:must-sort="false"
no-data-text="No results found"
class="elevation-1"
hover
>
<template #item.amount="{ item }">

6
web/satellite/vuetify-poc/src/components/dialogs/AddTeamMemberDialog.vue
View File

@ -14,7 +14,7 @@
@update:model-value="v => model = v"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/team/teamMembers.svg" alt="Team members">
</template>
@ -40,7 +40,7 @@
<v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onPrimaryClick">
<v-row>
<v-col v-if="needsUpgrade">
Upgrade now to unlock collaboration and bring your team together in this project.
<p class="mb-4">Upgrade now to unlock collaboration and bring your team together in this project.</p>
</v-col>
<template v-else>
<v-col cols="12">
@ -87,7 +87,7 @@
:append-icon="needsUpgrade ? 'mdi-arrow-right' : undefined"
@click="onPrimaryClick"
>
{{ needsUpgrade ? 'Upgrade' : 'Send Invite' }}
{{ needsUpgrade ? 'Continue' : 'Send Invite' }}
</v-btn>
</v-col>
</v-row>

18
web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
View File

@ -11,12 +11,21 @@
>
<v-card ref="innerContent" rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"
>
<img src="@poc/assets/icon-folder.svg" alt="folder icon">
</v-sheet>
</template>
<v-card-title class="font-weight-bold">
New Folder
</v-card-title>
</template>
<template #append>
<v-btn
@ -33,7 +42,7 @@
<v-divider />
<v-form v-model="formValid" class="pa-8 pb-3">
<v-form v-model="formValid" class="px-7 pt-9 pb-4">
<v-row>
<v-col
cols="12"
@ -42,7 +51,8 @@
v-model="folder"
variant="outlined"
:rules="folderRules"
label="Enter Folder Name"
label="Folder Name"
placeholder="Enter a folder name"
:hide-details="false"
required
autofocus

16
web/satellite/vuetify-poc/src/components/dialogs/BucketDetailsDialog.vue
View File

@ -10,9 +10,16 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="py-4 pl-7">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/buckets/createBucket.svg" alt="bucket">
<v-sheet
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"
>
<icon-bucket />
</v-sheet>
</template>
<v-card-title class="font-weight-bold">
@ -103,10 +110,11 @@ import {
VRow,
VCol,
VBtn,
VForm,
VTextField,
VSheet,
} from 'vuetify/components';
import IconBucket from '../icons/IconBucket.vue';
import { useLoading } from '@/composables/useLoading';
import { Bucket } from '@/types/buckets';
import { useBucketsStore } from '@/store/modules/bucketsStore';

3
web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
View File

@ -14,7 +14,7 @@
<template #prepend>
<img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
</template>
<v-card-title class="font-weight-bold">Edit Name</v-card-title>
<v-card-title class="font-weight-bold">Edit Account Name</v-card-title>
<template #append>
<v-btn
icon="$close"
@ -35,6 +35,7 @@
variant="outlined"
:rules="rules"
label="Full name"
placeholder="Enter your name"
:hide-details="false"
required
autofocus

2
web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
View File

@ -10,7 +10,7 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="px-6 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
</template>

5
web/satellite/vuetify-poc/src/components/dialogs/CreateAccessDialog.vue
View File

@ -4,13 +4,14 @@
<template>
<v-dialog
v-model="model"
width="400px"
min-width="320px"
max-width="420px"
transition="fade-transition"
scrollable
:persistent="isCreating"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4 pos-relative">
<v-card-item class="pa-5 pl-7 pos-relative">
<template #prepend>
<img class="d-block" :src="STEP_ICON_AND_TITLE[step].icon">
</template>

16
web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
View File

@ -11,7 +11,7 @@
>
<v-card ref="innerContent" rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-card-title class="font-weight-bold">
<!-- <img src="../assets/icon-bucket-color.svg" alt="Bucket" width="40"> -->
@ -33,21 +33,21 @@
<v-divider />
<v-form v-model="formValid" class="pa-8 pb-3" @submit.prevent="onCreate">
<v-row class="ma-0">
<v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="onCreate">
<v-row>
<v-col>
<p>Buckets are used to store and organize your files.</p>
<v-col class="px-0 flex-1-1-100">
<v-text-field
v-model="bucketName"
variant="outlined"
:rules="bucketNameRules"
label="Enter bucket name"
placeholder="demo-bucket"
hint="Lowercase letters, numbers, hyphens (-), and periods (.)"
label="Bucket name"
placeholder="my-bucket"
hint="Allowed characters [a-z] [0-9] [-.]"
:hide-details="false"
required
autofocus
class="mt-8 mb-3"
class="mt-7 mb-3"
minlength="3"
maxlength="63"
/>

2
web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue
View File

@ -13,7 +13,7 @@
@update:model-value="v => model = v"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img v-if="isProjectLimitReached && usersStore.state.user.paidTier && showLimitIncreaseDialog" class="d-block" src="@/../static/images/modals/limit.svg" alt="Speedometer">
<img v-else class="d-block" src="@/../static/images/common/blueBox.svg" alt="Box">

4
web/satellite/vuetify-poc/src/components/dialogs/DeleteAccessDialog.vue
View File

@ -9,10 +9,10 @@
:persistent="isLoading"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"

4
web/satellite/vuetify-poc/src/components/dialogs/DeleteBucketDialog.vue
View File

@ -9,10 +9,10 @@
:persistent="isLoading"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"

4
web/satellite/vuetify-poc/src/components/dialogs/DeleteFileDialog.vue
View File

@ -9,10 +9,10 @@
:persistent="isLoading"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"

8
web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
View File

@ -10,7 +10,7 @@
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
@ -26,11 +26,11 @@
/>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-card-item class="px-8 py-4">
<p>Enter the authentication code generated in your two-factor application to disable 2FA.</p>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-card-item class="px-8 pt-4 pb-0">
<v-form v-model="formValid" class="pt-2" @submit.prevent="disable">
<v-text-field
@ -52,7 +52,7 @@
{{ useRecoveryCode ? "or use 2FA code" : "or use a recovery code" }}
</a>
</v-card-item>
<v-divider class="mx-8 my-4" />
<v-divider class="my-4" />
<v-card-actions dense class="px-7 pb-5 pt-0">
<v-col class="pl-0">
<v-btn

2
web/satellite/vuetify-poc/src/components/dialogs/EditProjectDetailsDialog.vue
View File

@ -9,7 +9,7 @@
:persistent="isLoading"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/modals/boxesIcon.svg" alt="Boxes">
</template>

2
web/satellite/vuetify-poc/src/components/dialogs/EditProjectLimitDialog.vue
View File

@ -9,7 +9,7 @@
:persistent="isLoading"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/modals/limit.svg" alt="Speedometer">
</template>

46
web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
View File

@ -10,7 +10,7 @@
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
@ -26,42 +26,37 @@
/>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-window v-model="step" :class="{ 'overflow-y-auto': step === 0 }">
<!-- QR code step -->
<v-window-item :value="0">
<v-card-item class="px-8 py-4">
<v-card-item class="pa-7">
<p>Scan this QR code in your two-factor application.</p>
</v-card-item>
<v-card-item align="center" justify="center" class="rounded-lg border mx-8 py-4">
<v-card-item align="center" justify="center" class="rounded-lg border mx-7">
<v-col cols="auto">
<canvas ref="canvas" />
</v-col>
</v-card-item>
<v-divider class="mx-8 my-4" />
<v-card-item class="px-8 py-4 pt-0">
<v-card-item class="pa-7">
<p>Unable to scan? Enter the following code instead.</p>
</v-card-item>
<v-card-item class="rounded-lg border mx-8 pa-0">
<v-col class="py-2 px-3" cols="auto">
<p class="font-weight-bold"> {{ userMFASecret }}</p>
<v-card-item class="rounded-lg border mx-7 mb-7 py-2">
<v-col>
<p class="font-weight-medium text-body-2 text-center"> {{ userMFASecret }}</p>
</v-col>
</v-card-item>
</v-window-item>
<!-- Enter code step -->
<v-window-item :value="1">
<v-card-item class="px-8 py-4">
<v-card-item class="pa-7">
<p>Enter the authentication code generated in your two-factor application to confirm your setup.</p>
</v-card-item>
<v-divider class="mx-8" />
<v-card-item class="px-8 pt-4 pb-0">
<v-form v-model="formValid" class="pt-2" @submit.prevent>
<v-form v-model="formValid" class="pt-7" @submit.prevent>
<v-text-field
v-model="confirmPasscode"
variant="outlined"
density="compact"
hint="e.g.: 000000"
hint="Example: 123456"
:rules="rules"
:error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
label="2FA Code"
@ -75,11 +70,11 @@
<!-- Save codes step -->
<v-window-item :value="2">
<v-card-item class="px-8 py-4">
<v-card-item class="px-7 py-4">
<p>Please save these codes somewhere to be able to recover access to your account.</p>
</v-card-item>
<v-divider class="mx-8" />
<v-card-item class="px-8 py-4">
<v-divider />
<v-card-item class="px-7 py-4">
<p
v-for="(code, index) in userMFARecoveryCodes"
:key="index"
@ -89,9 +84,10 @@
</v-card-item>
</v-window-item>
</v-window>
<v-divider class="mx-8 my-4" />
<v-card-actions dense class="px-7 pb-5 pt-0">
<v-col v-if="step !== 2" class="pl-0">
<v-divider />
<v-card-actions class="pa-7">
<v-row>
<v-col v-if="step !== 2">
<v-btn
variant="outlined"
color="default"
@ -103,7 +99,7 @@
Cancel
</v-btn>
</v-col>
<v-col class="px-0">
<v-col>
<v-btn
v-if="step === 0"
color="primary"
@ -123,7 +119,7 @@
:disabled="!formValid"
@click="enable"
>
Enable
Confirm
</v-btn>
<v-btn
@ -136,6 +132,7 @@
Done
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
@ -153,6 +150,7 @@ import {
VDialog,
VDivider,
VForm,
VRow,
VTextField,
VWindow,
VWindowItem,

14
web/satellite/vuetify-poc/src/components/dialogs/EnterBucketPassphraseDialog.vue
View File

@ -8,7 +8,7 @@
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="py-4 pl-7">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg">
</template>
@ -31,13 +31,12 @@
<v-divider />
<v-card-item class="py-4">
<v-form v-model="formValid">
<v-card-item class="pa-7 pb-3">
<v-form v-model="formValid" @submit.prevent="onContinue">
<v-row>
<v-col cols="12">
<p>
Enter your encryption passphrase to view and manage your data in the browser.
This passphrase will be used to unlock all buckets in this project.
Enter your encryption passphrase to view and manage the data in this project.
</p>
</v-col>
@ -46,11 +45,12 @@
v-model="passphrase"
:base-color="isWarningState ? 'warning' : ''"
label="Encryption Passphrase"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
:type="isPassphraseVisible ? 'text' : 'password'"
variant="outlined"
:hide-details="false"
:rules="[ RequiredRule ]"
autofocus
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
/>
</v-col>
@ -68,7 +68,7 @@
<v-divider />
<v-card-actions>
<v-card-actions class="pa-4">
<v-col>
<v-btn
variant="outlined"

21
web/satellite/vuetify-poc/src/components/dialogs/GeographicDistributionDialog.vue
View File

@ -8,10 +8,11 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
variant="tonal"
width="40"
height="40"
rounded="lg"
@ -51,6 +52,16 @@
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn
variant="outlined"
color="default"
block
@click="model = false"
>
Close
</v-btn>
</v-col>
<v-col>
<v-btn
variant="outlined"
@ -60,15 +71,11 @@
href="https://docs.storj.io/learn#what-happens-when-you-upload"
target="_blank"
rel="noopener noreferrer"
append-icon="mdi-open-in-new"
>
Learn more
</v-btn>
</v-col>
<v-col>
<v-btn variant="flat" block @click="model = false">
Close
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>

2
web/satellite/vuetify-poc/src/components/dialogs/InactivityDialog.vue
View File

@ -8,7 +8,7 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session expiring">
</template>

2
web/satellite/vuetify-poc/src/components/dialogs/JoinProjectDialog.vue
View File

@ -9,7 +9,7 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 pa-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-card-title class="font-weight-bold">Join Project</v-card-title>
</template>

12
web/satellite/vuetify-poc/src/components/dialogs/MFACodesDialog.vue
View File

@ -10,7 +10,7 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
@ -25,13 +25,13 @@
/>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<template v-if="isConfirmCode">
<v-card-item class="px-8 py-4">
<p>Enter the authentication code generated in your two-factor application to regenerate recovery codes.</p>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-card-item class="px-8 pt-4 pb-0">
<v-form v-model="formValid" class="pt-2" @submit.prevent="regenerate">
<v-text-field
@ -54,13 +54,13 @@
</a>
</v-card-item>
<v-divider class="mx-8 my-4" />
<v-divider class="my-4" />
</template>
<template v-else>
<v-card-item class="px-8 py-4">
<p>Please save these codes somewhere to be able to recover access to your account.</p>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-card-item class="px-8 py-4">
<p
v-for="(code, index) in userMFARecoveryCodes"
@ -69,7 +69,7 @@
{{ code }}
</p>
</v-card-item>
<v-divider class="mx-8 mb-4" />
<v-divider class="mb-4" />
</template>
<v-card-actions dense class="px-7 pb-5 pt-0">

2
web/satellite/vuetify-poc/src/components/dialogs/ManagePassphraseDialog.vue
View File

@ -4,7 +4,7 @@
<template>
<v-dialog v-model="model" max-width="420" transition="fade-transition">
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" :src="stepInfo[step].ref.value?.iconSrc || LockIcon">
</template>

4
web/satellite/vuetify-poc/src/components/dialogs/RemoveProjectMemberDialog.vue
View File

@ -9,10 +9,10 @@
:persistent="isLoading"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"

2
web/satellite/vuetify-poc/src/components/dialogs/SessionExpiredDialog.vue
View File

@ -9,7 +9,7 @@
persistent
>
<v-card rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session expired">
</template>

2
web/satellite/vuetify-poc/src/components/dialogs/SetSessionTimeoutDialog.vue
View File

@ -28,7 +28,7 @@
</v-card-item>
<v-divider />
<v-card-item class="px-6 pt-6 pb-3">
<p>Select your session timeout duration.</p>
<p>Select your account session timeout duration.</p>
</v-card-item>
<v-card-item class="px-6 pb-7">
<v-select

19
web/satellite/vuetify-poc/src/components/dialogs/ShareDialog.vue
View File

@ -9,10 +9,10 @@
:persistent="isLoading"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template #prepend>
<v-sheet
class="bg-on-surface-variant d-flex justify-center align-center"
class="border-sm d-flex justify-center align-center"
width="40"
height="40"
rounded="lg"
@ -40,37 +40,35 @@
<div class="pa-7 share-dialog__content" :class="{ 'share-dialog__content--loading': isLoading }">
<v-row>
<v-col cols="12">
<v-alert class="mt-3" density="compact" type="warning">
<v-alert type="info">
Sharing a {{ shareText.toLowerCase() }} will create a publicly shareable URL.
Anyone with this link will be able to access your shared {{ shareText.toLowerCase() }}.
</v-alert>
</v-col>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-4">Share via</p>
<div class="ma-n2">
<v-chip-group class="ma-n2">
<v-chip
v-for="opt in ShareOptions"
:key="opt"
:color="SHARE_BUTTON_CONFIGS[opt].color"
:href="SHARE_BUTTON_CONFIGS[opt].getLink(link)"
link
class="ma-2"
class="ma-2 font-weight-medium"
>
<component
:is="SHARE_BUTTON_CONFIGS[opt].icon"
class="share-dialog__content__icon"
size="21"
size="16"
/>
{{ opt }}
</v-chip>
</div>
</v-chip-group>
</v-col>
<v-divider class="my-2" />
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-2">Copy link</p>
<v-textarea :model-value="link" variant="solo-filled" rows="1" auto-grow no-resize flat readonly>
<v-textarea :model-value="link" variant="solo-filled" rounded="lg" hide-details="auto" rows="1" auto-grow no-resize flat readonly class="text-body-2">
<template #append-inner>
<input-copy-button :value="link" />
</template>
@ -122,6 +120,7 @@ import {
VChip,
VTextarea,
VAlert,
VChipGroup,
} from 'vuetify/components';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';

11
web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/EnterPassphraseStep.vue
View File

@ -12,22 +12,23 @@
<v-text-field
v-model="passphrase"
label="Encryption Passphrase"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
:type="isPassphraseVisible ? 'text' : 'password'"
variant="outlined"
:hide-details="false"
:rules="[ RequiredRule ]"
autofocus
class="mt-2 mb-n4"
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
/>
</v-col>
<v-col v-if="ackRequired" cols="12">
<v-checkbox
v-if="ackRequired"
density="compact"
color="primary"
label="Yes, I saved my encryption passphrase."
label="I saved my encryption passphrase."
:hide-details="false"
:rules="[ RequiredRule ]"
class="mt-4 mb-n7"
/>
</v-col>
</v-row>

10
web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/PassphraseGeneratedStep.vue
View File

@ -2,30 +2,26 @@
// See LICENSE for copying information.
<template>
<v-form ref="form" class="pa-8">
<v-form ref="form" class="pa-7">
<v-row>
<v-col v-if="$slots.default" cols="12">
<slot />
</v-col>
<save-buttons :name="name" :items="[ passphrase ]" type="passphrase" />
<v-divider class="my-3" />
<v-col cols="12">
<text-output-area
label="Encryption Passphrase"
:value="passphrase"
center-text
:tooltip-disabled="isTooltipDisabled"
show-copy
/>
</v-col>
<v-col cols="12">
<v-checkbox
density="compact"
color="primary"
label="Yes, I saved my encryption passphrase."
label="I saved my encryption passphrase."
:hide-details="false"
:rules="[ RequiredRule ]"
class="mt-4 mb-n7"
/>
</v-col>
</v-row>

2
web/satellite/vuetify-poc/src/components/dialogs/commonPassphraseSteps/SaveButtons.vue
View File

@ -5,7 +5,6 @@
<v-col cols="6">
<v-btn
variant="outlined"
size="small"
block
:color="justCopied ? 'success' : 'default'"
:prepend-icon="justCopied ? 'mdi-check' : 'mdi-content-copy'"
@ -17,7 +16,6 @@
<v-col cols="6">
<v-btn
variant="outlined"
size="small"
block
:color="justDownloaded ? 'success' : 'default'"
:prepend-icon="justDownloaded ? 'mdi-check' : 'mdi-tray-arrow-down'"

2
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessCreatedStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="pa-8">
<div class="pa-7">
<v-row>
<v-col cols="12">
Copy or save the Access Grant as it will only appear once.

30
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/AccessEncryptionStep.vue
View File

@ -2,36 +2,36 @@
// See LICENSE for copying information.
<template>
<v-form ref="form" class="pa-8 pb-4">
<v-form ref="form" class="pa-7 pb-4">
<v-row>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p>
<!-- <p class="text-subtitle-2 font-weight-bold mb-2">Encryption Passphrase</p> -->
<v-radio-group v-model="passphraseOption" hide-details="auto">
<template v-if="isPromptForPassphrase">
<v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase">
<v-radio v-if="isPromptForPassphrase" label="Enter your project passphrase" :value="PassphraseOption.SetMyProjectPassphrase" density="compact">
<template #label>
Enter my project passphrase
<info-tooltip>
You will enter your encryption passphrase on the next step.
Make sure it's the same one you use for this project.
This will allow you to manage existing data you have uploaded with the same passphrase.
Make sure it's the same passphrase you use for this project.
This will allow you to manage existing data you have uploaded.
</info-tooltip>
</template>
</v-radio>
<v-text-field
v-model="passphrase"
class="mt-3"
class="mt-6"
variant="outlined"
label="Enter Encryption Passphrase"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-off' : 'mdi-eye'"
label="Encryption Passphrase"
:append-inner-icon="isPassphraseVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
:type="isPassphraseVisible ? 'text' : 'password'"
:rules="passphraseRules"
:hide-details="false"
autofocus
@click:append-inner="isPassphraseVisible = !isPassphraseVisible"
/>
<v-divider class="my-4" />
<!-- <v-divider class="my-4" /> -->
</template>
<v-radio v-else :value="PassphraseOption.UseExistingPassphrase">
<v-radio v-else :value="PassphraseOption.UseExistingPassphrase" density="compact" class="pb-4">
<template #label>
Use the current passphrase
<info-tooltip>
@ -41,14 +41,14 @@
</template>
</v-radio>
<v-btn
class="align-self-start"
variant="text"
class="align-self-start mt-2 mb-4"
variant="outlined"
color="default"
:append-icon="areAdvancedOptionsShown ? '$collapse' : '$expand'"
:disabled="isAdvancedOptionSelected"
@click="areAdvancedOptionsShown = !areAdvancedOptionsShown"
>
Advanced
Advanced Options
</v-btn>
<v-expand-transition>
<div v-show="areAdvancedOptionsShown">
@ -76,7 +76,7 @@
</v-col>
<v-expand-transition>
<v-col v-show="areAdvancedOptionsShown" cols="12">
<v-alert class="mb-4" type="warning" variant="tonal" rounded="xlg">
<v-alert class="mb-4" type="info" variant="tonal" rounded="xlg">
Creating a new passphrase for this access will prevent it from accessing any data
that has been uploaded with the current passphrase.
</v-alert>

2
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CLIAccessCreatedStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="pa-8">
<div class="pa-7">
<v-row>
<v-col cols="12">
Copy or save the satellite address and API key as they will only appear once.

93
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ChoosePermissionsStep.vue
View File

@ -2,13 +2,15 @@
// See LICENSE for copying information.
<template>
<v-form ref="form" class="pa-8">
<v-form ref="form" class="pa-7">
<v-row>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-5">Select the permissions for this access</p>
<v-select
v-model="permissions"
:items="allPermissions"
label="Permissions"
label="Access Permissions"
variant="outlined"
color="default"
multiple
@ -20,15 +22,14 @@
<template #prepend-item>
<v-list-item
title="All permissions"
color="primary"
:active="areAllPermsSelected"
density="compact"
@click="toggleSelectedPerms"
>
<template #prepend>
<v-checkbox-btn
v-model="areAllPermsSelected"
:indeterminate="permissions.length != 0 && !areAllPermsSelected"
color="primary"
/>
</template>
</v-list-item>
@ -36,22 +37,52 @@
</template>
<template #item="{ props: slotProps }">
<v-list-item v-bind="slotProps" color="primary">
<v-list-item v-bind="slotProps" density="compact">
<template #prepend="{ isSelected }">
<v-checkbox-btn :model-value="isSelected" color="primary" />
<v-checkbox-btn :model-value="isSelected" />
</template>
</v-list-item>
</template>
</v-select>
<!-- <v-chip-group
v-model="permissions"
column
multiple
class="mb-3"
>
<v-chip
rounded="xl"
class="text-body-2"
filter
variant="outlined"
value="All"
>
All
</v-chip>
<v-chip
v-for="perm in allPermissions"
:key="perm"
:value="perm"
rounded="xl"
class="text-body-2"
filter
variant="outlined"
>
{{ perm }}
</v-chip>
</v-chip-group> -->
</v-col>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-5">Choose buckets to give access to</p>
<v-autocomplete
v-model="buckets"
v-model:search="bucketSearch"
class="choose-permissions-step__buckets-field"
:items="allBucketNames"
label="Buckets"
label="Access Buckets"
variant="outlined"
color="default"
no-data-text="No buckets found."
@ -67,34 +98,53 @@
<template #prepend-item>
<v-list-item
title="All buckets"
color="primary"
:active="isAllBucketsSelected"
density="compact"
@click="isAllBucketsSelected = !isAllBucketsSelected"
>
<template #prepend>
<v-checkbox-btn v-model="isAllBucketsSelected" color="primary" />
<v-checkbox-btn v-model="isAllBucketsSelected" />
</template>
</v-list-item>
<v-divider />
</template>
<template #item="{ props: slotProps }">
<v-list-item v-bind="slotProps" color="primary">
<v-list-item v-bind="slotProps" density="compact">
<template #prepend="{ isSelected }">
<v-checkbox-btn :model-value="isSelected" color="primary" />
<v-checkbox-btn :model-value="isSelected" />
</template>
</v-list-item>
</template>
</v-autocomplete>
<!-- <v-chip-group
v-model="buckets"
column
multiple
class="mb-3"
>
<v-chip
class="text-body-2"
rounded="xl"
filter
variant="outlined"
value="All Buckets"
>
All Buckets
</v-chip>
</v-chip-group> -->
</v-col>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-5">Choose when your access will expire</p>
<v-select
ref="endDateSelector"
v-model="endDate"
variant="outlined"
color="default"
label="End date"
label="Access Expiration Date"
return-object
:hide-details="false"
:items="endDateItems"
@ -112,9 +162,24 @@
<template #item="{ item, props: itemProps }">
<v-divider v-if="(item.raw as AccessGrantEndDate).date === null" />
<v-list-item v-bind="itemProps" />
<v-list-item v-bind="itemProps" density="compact" />
</template>
</v-select>
<!-- <v-chip-group
v-model="endDate"
column
>
<v-chip
class="text-body-2"
rounded="xl"
filter
variant="outlined"
value="No end date"
>
No expiration
</v-chip>
</v-chip-group> -->
</v-col>
</v-row>
@ -167,7 +232,7 @@ const endDateItems: EndDateListItem[] = [
{ title: '1 month', date: getNowOffset(0, 1) },
{ title: '6 months', date: getNowOffset(0, 6) },
{ title: '1 year', date: getNowOffset(0, 0, 1) },
{ title: 'No end date', date: null },
{ title: 'No expiration', date: null },
];
const emit = defineEmits<{

22
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/ConfirmDetailsStep.vue
View File

@ -2,21 +2,19 @@
// See LICENSE for copying information.
<template>
<div class="pa-8">
<div class="pa-7">
<v-row>
<v-col cols="12">
Confirm that the access details are correct before creating.
</v-col>
<v-divider class="my-1" />
<v-col class="pa-1" cols="12">
<div
<p>Confirm that the access details are correct before creating.</p>
<v-list lines="one">
<v-list-item
v-for="item in items"
:key="item.title"
class="d-flex justify-space-between ma-2"
>
<p class="flex-shrink-0 mr-4">{{ item.title }}</p>
<p class="text-body-2 text-medium-emphasis text-right">{{ item.value }}</p>
</div>
:title="item.title"
:subtitle="item.value"
class="pl-0"
/>
</v-list>
</v-col>
</v-row>
</div>
@ -24,7 +22,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { VRow, VCol, VDivider } from 'vuetify/components';
import { VRow, VCol, VList, VListItem } from 'vuetify/components';
import { Permission, AccessType } from '@/types/createAccessGrant';
import { AccessGrantEndDate } from '@poc/types/createAccessGrant';

16
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
View File

@ -2,38 +2,36 @@
// See LICENSE for copying information.
<template>
<v-form ref="form" class="pa-8" @submit.prevent>
<v-form ref="form" class="pa-7 pb-4" @submit.prevent>
<v-row>
<v-col cols="12">
<p class="text-subtitle-2 font-weight-bold mb-5">Enter Access Name</p>
<v-text-field
v-model="name"
label="Access Name"
placeholder="Enter name for this access"
variant="outlined"
color="default"
autofocus
:hide-details="false"
:rules="nameRules"
class="mb-n2"
/>
</v-col>
<v-col cols="12">
<h4 class="mb-2">Type</h4>
<v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false">
<p class="text-subtitle-2 font-weight-bold mb-2">Select Access Type</p>
<v-input v-model="types" :rules="[ RequiredRule ]" :hide-details="false" class="mb-n2">
<div>
<v-checkbox
v-for="accessType in typeOrder"
:key="accessType"
v-model="typeInfos[accessType].model.value"
color="primary"
density="compact"
:hide-details="true"
>
<template #label>
<span class="ml-2">{{ typeInfos[accessType].name }}</span>
<span>{{ typeInfos[accessType].name }}</span>
<info-tooltip>
{{ typeInfos[accessType].description }}
<a class="text-surface" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
<a class="link" :href="ACCESS_TYPE_LINKS[accessType]" target="_blank">
Learn more
</a>
</info-tooltip>

4
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EncryptionInfoStep.vue
View File

@ -13,7 +13,9 @@
<v-checkbox
density="compact"
label="I understand, don't show this again."
hide-details
color="default"
:hide-details="false"
:rules="[ RequiredRule ]"
@update:model-value="value => LocalData.setServerSideEncryptionModalHidden(value)"
/>
</v-col>

4
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/S3CredentialsCreatedStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="pa-8">
<div class="pa-7">
<v-row>
<v-col cols="12">
Copy or save the S3 credentials as they will only appear once.
@ -48,7 +48,7 @@ const saveItems = computed<SaveButtonsItem[]>(() => [
]);
defineExpose({
title: 'Credentials Generated',
title: 'S3 Credentials Generated',
onEnter: () => isTooltipDisabled.value = false,
onExit: () => isTooltipDisabled.value = true,
});

11
web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/TextOutputArea.vue
View File

@ -11,6 +11,7 @@
variant="solo-filled"
:label="label"
:model-value="value"
rounded="xlg"
rows="1"
auto-grow
no-resize
@ -25,7 +26,6 @@
class="bg-background"
variant="outlined"
color="default"
size="small"
prepend-icon="mdi-lock-outline"
@click="isBlurred = false"
>
@ -73,10 +73,17 @@ const isBlurred = ref<boolean>(true);
:deep(textarea) {
font-family: monospace;
font-size: 14px;
margin-bottom: 8px;
margin-top: 8px;
}
:deep(.v-field__field), :deep(.v-field__append-inner) {
filter: blur(10px);
filter: blur(50px);
}
:deep(.v-field-label--floating) {
top: 10px !important;
}
&--unblur {

2
web/satellite/vuetify-poc/src/components/dialogs/managePassphraseSteps/EncryptionPassphraseStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="pa-8 pb-4">
<div class="pa-8">
<v-row>
<v-col cols="12">
The encryption passphrase will be used to encrypt the files you upload in this project.

8
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/AddCreditCardStep.vue
View File

@ -2,13 +2,11 @@
// See LICENSE for copying information.
<template>
<p class="pb-4">
<p class="pt-2 pb-4">
By saving your card information, you allow Storj to charge your card for future payments in accordance with
the terms.
</p>
<v-divider />
<div class="py-4">
<StripeCardElement
ref="stripeCardInput"
@ -23,7 +21,7 @@
<v-btn
block
variant="outlined"
color="grey-lighten-1"
color="default"
:disabled="loading"
@click="emit('back')"
>
@ -44,7 +42,7 @@
</v-btn>
</v-col>
</v-row>
<p class="mt-1 text-caption text-center">Your information is secured with 128-bit SSL & AES-256 encryption.</p>
<p class="mt-1 text-caption text-center">Information is secured with 128-bit SSL & AES-256 encryption.</p>
</div>
</template>

38
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/InfoBullet.vue
View File

@ -2,25 +2,39 @@
// See LICENSE for copying information.
<template>
<v-row class="pa-0 flex-nowrap">
<v-col class="pa-2" cols="1">
<img v-if="!isPro" src="@/../static/images/modals/upgradeFlow/greyCheckmark.svg" alt="checkmark">
<img v-else src="@/../static/images/modals/upgradeFlow/greenCheckmark.svg" alt="checkmark">
</v-col>
<v-col class="pa-2" cols="11">
<p class="font-weight-bold">
<v-list>
<v-list-item>
<template #prepend>
<v-icon
v-if="!isPro"
color="default"
icon="mdi-check-circle-outline"
size="small"
class="mr-3 text-disabled"
/>
<v-icon
v-else
color="primary"
icon="mdi-check-circle-outline"
size="small"
class="mr-3 opacity-100"
/>
</template>
<v-list-item-title>
{{ title }}
<v-tooltip v-if="$slots.moreInfo" max-width="200px" location="top" activator="parent">
<slot name="moreInfo" />
</v-tooltip>
</p>
<p>{{ info }}</p>
</v-col>
</v-row>
</v-list-item-title>
<v-list-item-subtitle>
{{ info }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
</template>
<script setup lang="ts">
import { VCol, VRow, VTooltip } from 'vuetify/components';
import { VList, VListItem, VListItemTitle, VListItemSubtitle, VIcon, VTooltip } from 'vuetify/components';
const props = withDefaults(defineProps<{
isPro?: boolean;

9
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue
View File

@ -4,16 +4,15 @@
<template>
<v-dialog
v-model="model"
width="auto"
scrollable
min-width="460px"
:max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '700px' : '460px'"
:max-width="step === UpgradeAccountStep.Info || step === UpgradeAccountStep.PricingPlanSelection ? '720px' : '460px'"
transition="fade-transition"
:persistent="loading"
:scrim="scrim"
>
<v-card ref="content" rounded="xlg">
<v-card-item class="pl-7 py-4">
<v-card-item class="pa-5 pl-7">
<template v-if="step === UpgradeAccountStep.Success" #prepend>
<img class="d-block" src="@/../static/images/modals/upgradeFlow/success.svg" alt="success">
</template>
@ -29,7 +28,7 @@
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-divider />
<v-card-item class="px-8 py-4">
<v-window v-model="step">
@ -142,7 +141,7 @@ const model = computed<boolean>({
const stepTitles = computed(() => {
return {
[UpgradeAccountStep.Info]: 'Your account',
[UpgradeAccountStep.Info]: 'Upgrade',
[UpgradeAccountStep.Options]: 'Upgrade to Pro',
[UpgradeAccountStep.AddCC]: 'Add Credit Card',
[UpgradeAccountStep.AddTokens]: 'Add tokens',

27
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
View File

@ -4,34 +4,34 @@
<template>
<v-row>
<v-col v-if="!smAndDown" cols="6">
<h4 class="font-weight-bold mb-2">Free</h4>
<h4 class="font-weight-bold my-2">Free Account</h4>
<v-btn
block
disabled
color="grey"
color="default"
>
Current
</v-btn>
<div class="border-sm rounded-lg pa-4 mt-3 mb-3">
<v-card class="my-4">
<InfoBullet title="Projects" :info="freeProjects" />
<InfoBullet title="Storage" :info="`${freeUsageValue(user.projectStorageLimit)} limit`" />
<InfoBullet title="Egress" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
<InfoBullet title="Download" :info="`${freeUsageValue(user.projectBandwidthLimit)} limit`" />
<InfoBullet title="Segments" :info="`${user.projectSegmentLimit.toLocaleString()} segments limit`" />
<InfoBullet title="Link Sharing" info="Link sharing with Storj domain" />
</div>
</v-card>
</v-col>
<v-col :cols="smAndDown ? 12 : '6'">
<h4 class="font-weight-bold mb-2">Pro Account</h4>
<h4 class="font-weight-bold my-2">Pro Account</h4>
<v-btn
class="mb-1"
block
color="success"
:loading="loading"
append-icon="mdi-arrow-right"
@click="emit('upgrade')"
>
Upgrade to Pro
Upgrade
</v-btn>
<div class="border-sm rounded-lg pa-4 mt-3 mb-3">
<v-card class="my-4">
<InfoBullet is-pro title="Projects" :info="projectsInfo" />
<InfoBullet is-pro :title="storagePrice" :info="storagePriceInfo" />
<InfoBullet is-pro :title="downloadPrice" :info="downloadInfo">
@ -42,7 +42,7 @@
<InfoBullet is-pro title="Segments" :info="segmentInfo">
<template #moreInfo>
<a
class="text-surface"
class="link"
href="https://docs.storj.io/dcs/billing-payment-and-accounts-1/pricing/billing-and-payment"
target="_blank"
rel="noopener noreferrer"
@ -52,14 +52,15 @@
</template>
</InfoBullet>
<InfoBullet is-pro title="Secure Custom Domains (HTTPS)" info="Link sharing with your domain" />
</div>
<InfoBullet is-pro title="Team" info="Share projects and collaborate" />
</v-card>
</v-col>
</v-row>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue';
import { VBtn, VCol, VRow } from 'vuetify/components';
import { VBtn, VCol, VRow, VCard } from 'vuetify/components';
import { useDisplay } from 'vuetify';
import { useUsersStore } from '@/store/modules/usersStore';
@ -85,7 +86,7 @@ const storagePrice = ref<string>('Storage $0.004 GB / month');
const storagePriceInfo = ref<string>('25 GB free included');
const segmentInfo = ref<string>('$0.0000088 segment per month');
const projectsInfo = ref<string>('3 projects + more on request');
const downloadPrice = ref<string>('Egress $0.007 GB');
const downloadPrice = ref<string>('Download $0.007 GB');
const downloadInfo = ref<string>('25 GB free every month');
const downloadMoreInfo = ref<string>('');

6
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
View File

@ -2,18 +2,16 @@
// See LICENSE for copying information.
<template>
<p class="pb-4">
<p class="pt-2 pb-4">
Add a credit card to activate your Pro Account, or deposit more than $10 in STORJ tokens to upgrade
and get 10% bonus on your STORJ tokens deposit.
</p>
<v-divider />
<v-row justify="center" class="mx-0 pb-5 pt-4">
<v-col class="pl-0">
<v-btn
variant="flat"
color="success"
color="primary"
block
:loading="loading"
@click="emit('addCard')"

2
web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
View File

@ -3,7 +3,7 @@
<template>
<v-app-bar :elevation="0">
<v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" />
<v-progress-linear indeterminate absolute location="bottom" color="primary" :active="appStore.state.isNavigating" height="3" />
<v-app-bar-nav-icon
v-if="showNavDrawerButton"

6
web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<v-navigation-drawer v-model="model" class="py-1">
<v-navigation-drawer v-model="model">
<v-sheet class="pa-2">
<!-- Project -->
<v-menu location="end" transition="scale-transition">
@ -26,8 +26,8 @@
<!-- <img src="@poc/assets/icon-project.svg" alt="Projects"> -->
<IconProject />
</template>
<v-list-item-title>
<v-chip color="purple2" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
<v-list-item-title class="ml-3">
<v-chip color="secondary" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
My Projects
</v-chip>
</v-list-item-title>

23
web/satellite/vuetify-poc/src/plugins/vuetify.ts
View File

@ -39,14 +39,17 @@ export default createVuetify({
transition: 'fade-transition',
},
VSelect: {
rounded: 'lg',
// rounded: 'lg',
variant: 'outlined',
color: 'secondary',
},
VTextField: {
rounded: 'lg',
variant: 'outlined',
color: 'secondary',
},
VList: {
rounded: 'xlg',
rounded: 'lg',
},
VListItem: {
rounded: 'lg',
@ -56,6 +59,22 @@ export default createVuetify({
},
VCard: {
border: true,
rounded: 'xlg',
},
VTable: {
class: 'elevation-0',
},
VCheckbox: {
color: 'primary',
},
VAlert: {
rounded: 'xlg',
},
VChip: {
rounded: 'lg',
},
// VTable: {
// elevation: 0,
// },
},
});

109
web/satellite/vuetify-poc/src/styles/styles.scss
View File

@ -7,17 +7,22 @@ html {
overflow-y: auto !important;
}
body {
text-rendering: optimizeLegibility;
letter-spacing: -0.01em;
}
// Light Theme
.v-theme--light {
--v-border-color: 0, 0, 0;
--v-border-opacity: 0.1;
--v-theme-overlay-multiplier: 0.75;
--v-border-color: #e0e0e0;
--v-theme-overlay-multiplier: 0.75 !important;
--v-border-opacity: 0.07 !important;
}
// Dark Theme
.v-theme--dark {
--v-theme-overlay-multiplier: 0.75;
--v-theme-overlay-multiplier: 0.75 !important;
--v-border-opacity: 0.07 !important;
}
// Nav
@ -41,8 +46,17 @@ html {
}
// Button Shadow
.v-btn--variant-outlined, .v-btn--elevated, .v-btn--variant-flat {
box-shadow: rgba(50, 50, 93, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px !important;
.v-btn--elevated,
.v-btn--variant-flat {
box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
}
.v-btn--variant-outlined {
box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
}
.v-btn--elevated:hover,
.v-btn--variant-flat:hover,
.v-btn--variant-outlined {
box-shadow: rgba(31, 35, 40, 0.04) 0px 1px 0px 0px;
}
// Button Outlines
@ -62,10 +76,8 @@ html {
}
// Button focus style
.v-btn:focus {
// box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(103, 146, 244) 0px 0px 0px 3px !important;
// box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
// outline: none !important;
.v-btn:focus:active {
box-shadow: currentColor 0px 0px 0px 1px, currentColor 0px 0px 0px 1px !important;
}
// Button sizes
@ -81,9 +93,15 @@ html {
// Menu border
.v-overlay__content .v-list {
.v-menu > .v-overlay__content > .v-card, .v-menu > .v-overlay__content > .v-sheet, .v-menu > .v-overlay__content > .v-list {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
// border-radius: 12px !important;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
}
.v-navigation-drawer--temporary {
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 10px !important;
}
.v-navigation-drawer__scrim {
opacity: 0.3;
}
// Menu list item
@ -93,14 +111,15 @@ html {
// Card Light Theme
.v-card.v-theme--light {
border: 1px solid #e0e0e0;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 0px 0px;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
box-shadow: rgba(88, 102, 126, 0.07) 0px 4px 20px;
}
// Card Dark Theme
.v-card.v-theme--dark {
background: --v-theme-surface;
box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
// Cards Padding
@ -129,10 +148,15 @@ html {
// Make the checkbox selection square instead of rounded
.v-selection-control__input {
border-radius: 8px;
border-radius: 8px !important;
}
.v-selection-control__input::before {
border-radius: 8px;
border-radius: 8px !important;
}
// Label opacity
.v-label {
opacity: 1 !important;
}
// Ensure that the compact checkbox isn't too close to its label
@ -140,6 +164,7 @@ html {
margin-left: 8px;
}
// Sorting icon
.mdi-arrow-up::before, .mdi-arrow-down::before {
font-size: 14px;
@ -208,7 +233,6 @@ table {
// Links
.link {
color: rgb(var(--v-theme-primary));
text-decoration: none;
background-image: linear-gradient(currentColor,currentColor);
background-size: 0 1px;
@ -217,17 +241,29 @@ table {
transition: background-size .15s ease;
}
.link:hover {
color: rgb(var(--v-theme-secondary));
background-size: 100% 1px;
cursor: pointer;
}
.v-theme--light .link {
color: rgb(var(--v-theme-primary));
}
.v-theme--light .link:hover {
color: rgb(var(--v-theme-secondary));
}
.v-theme--dark .link {
color: rgb(var(--v-theme-secondary));
}
.v-theme--dark .link:hover {
color: rgb(var(--v-theme-info));
}
// Tooltips
.v-tooltip>.v-overlay__content {
background: rgba(var(--v-theme-on-surface),0.9) !important;
color: rgb(var(--v-theme-surface)) !important;
border: 1px solid rgba(var(--v-theme-surface),0.2);
background: rgba(var(--v-theme-surface),0.9) !important;
color: rgba(var(--v-theme-on-surface),0.9) !important;
border: 1px solid rgba(var(--v-theme-on-surface),0.2);
box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 10px 10px !important;
font-weight: 500;
border-radius: 20px !important;
padding: 6px 14px;
@ -263,7 +299,8 @@ table {
letter-spacing: 0 !important;
}
.v-alert__prepend {
margin-top: 12px;
margin-top: 4px;
margin-inline-end: 12px;
}
.v-alert__append, .v-alert__close {
margin-top: 4px;
@ -271,6 +308,9 @@ table {
.v-alert__close .v-btn {
color: rgb(var(--v-theme-on-surface)) !important;
}
.v-alert__content {
font-size: 14px;
}
.bg-on-surface-variant {
background-color: rgb(var(--v-theme-on-surface-variant)) !important;
@ -287,7 +327,12 @@ table {
max-height: 100%;
}
// text styles
// Sizing
.max-h-100 {
max-height: 100%;
}
// Text styles
.text-cursor-pointer {
cursor: pointer;
}
@ -302,3 +347,19 @@ table {
[disabled=false] {
cursor: unset;
}
.break-word {
word-break: break-word;
}
// Vuetify has a bug where any element with the attribute "disabled" forces the default cursor
// even if the value of this attribute is "false".
// This causes text in window items to appear to be unselectable.
[disabled=false] {
cursor: unset;
}
// Opacity
.opacity-100 {
opacity: 1 !important;
}

2
web/satellite/vuetify-poc/src/types/projects.ts
View File

@ -27,7 +27,7 @@ export type ProjectItemRole = Exclude<ProjectRole, ProjectRole.InviteExpired>;
*/
export const PROJECT_ROLE_COLORS: Record<ProjectRole, string> = {
[ProjectRole.Member]: 'green',
[ProjectRole.Owner]: 'purple2',
[ProjectRole.Owner]: 'secondary',
[ProjectRole.Invited]: 'warning',
[ProjectRole.InviteExpired]: 'error',
};

13
web/satellite/vuetify-poc/src/views/AccountSettings.vue
View File

@ -3,14 +3,16 @@
<template>
<v-container>
<!-- <v-breadcrumbs :items="['My Account', 'Settings']" class="pl-0"></v-breadcrumbs> -->
<h1 class="text-h5 font-weight-bold mb-2">Settings</h1>
<v-row>
<v-col>
<PageTitleComponent title="Account Settings" />
</v-col>
</v-row>
<v-card
variant="flat"
:border="true"
class="mx-auto my-6"
class="mx-auto mt-2 my-6"
>
<v-list lines="three">
<v-list-subheader class="mb-2">Profile</v-list-subheader>
@ -155,6 +157,8 @@ import {
VListItemSubtitle,
VListItemAction,
VBtn,
VRow,
VCol,
} from 'vuetify/components';
import { User, UserSettings } from '@/types/users';
@ -163,6 +167,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { useNotify } from '@/utils/hooks';
import { Duration } from '@/utils/time';
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import ChangePasswordDialog from '@poc/components/dialogs/ChangePasswordDialog.vue';
import ChangeNameDialog from '@poc/components/dialogs/ChangeNameDialog.vue';
import EnableMFADialog from '@poc/components/dialogs/EnableMFADialog.vue';

14
web/satellite/vuetify-poc/src/views/Billing.vue
View File

@ -3,11 +3,13 @@
<template>
<v-container>
<!-- <v-breadcrumbs :items="['My Account', 'Billing']" class="pl-0"></v-breadcrumbs> -->
<v-row>
<v-col>
<PageTitleComponent title="Account Billing" />
</v-col>
</v-row>
<h1 class="text-h5 font-weight-bold mb-6">Billing</h1>
<v-card variant="flat" :border="true" color="default" class="mb-6 rounded">
<v-card variant="flat" :border="true" color="default" class="mt-2 mb-6 rounded">
<v-tabs
v-model="tab"
color="default"
@ -53,7 +55,6 @@
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" color="default" size="small" class="mr-2">View Billing History</v-btn>
<!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">Payment Methods</v-btn> -->
</v-card-text>
</v-card>
</v-col>
@ -71,7 +72,6 @@
<v-btn variant="outlined" color="default" size="small" class="mr-2" prepend-icon="mdi-plus">
Add STORJ Tokens
</v-btn>
<!-- <v-btn variant="tonal" color="default" size="small" class="mr-2">View Transactions</v-btn> -->
</v-card-text>
</v-card>
</v-col>
@ -193,7 +193,6 @@
<v-col cols="12" sm="4">
<v-card title="Billing Information" subtitle="Add info for your invoices." variant="flat" :border="true" rounded="xlg">
<v-card-text>
<!-- <v-chip rounded color="purple2" variant="tonal" class="font-weight-bold mb-2">$0</v-chip> -->
<p>You can add personal or company info, billing email, and VAT.</p>
<v-divider class="my-4" />
<v-btn color="primary" size="small" prepend-icon="mdi-plus">Add Billing Information</v-btn>
@ -237,6 +236,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import { Download } from '@/utils/download';
import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
import CreditCardComponent from '@poc/components/CreditCardComponent.vue';
import AddCreditCardComponent from '@poc/components/AddCreditCardComponent.vue';
import BillingHistoryTab from '@poc/components/billing/BillingHistoryTab.vue';

12
web/satellite/vuetify-poc/src/views/Bucket.vue
View File

@ -24,24 +24,24 @@
Upload
</v-btn>
</template>
<v-list class="pa-2">
<v-list class="pa-1">
<v-list-item rounded="lg" :disabled="!isInitialized" @click.stop="buttonFileUpload">
<template #prepend>
<IconFile size="16" class="mr-2" />
</template>
<v-list-item-title class="text-body-2 ml-3">
Upload File
<v-list-item-title class="text-body-2 ml-2">
Upload Files
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-1" />
<v-list-item class="mt-1" rounded="lg" :disabled="!isInitialized" @click.stop="buttonFolderUpload">
<template #prepend>
<icon-folder />
</template>
<v-list-item-title class="text-body-2 ml-3">
Upload Folder
<v-list-item-title class="text-body-2 ml-2">
Upload Folders
</v-list-item-title>
</v-list-item>
</v-list>

2
web/satellite/vuetify-poc/src/views/Projects.vue
View File

@ -19,7 +19,7 @@
<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 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />
</svg>
<!-- <IconNew class="mr-2" width="12px"/> -->
Create Project
New Project
</v-btn>
</v-col>

4
web/satellite/vuetify-poc/src/views/Team.vue
View File

@ -9,8 +9,8 @@
link="https://docs.storj.io/support/users"
/>
<v-col class="pb-0">
<v-row class="mt-2 mb-0">
<v-col>
<v-row class="mt-2 mb-4">
<v-btn @click="isAddMemberDialogShown = true">
<svg width="16" height="16" class="mr-2" 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 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z" fill="currentColor" />