diff --git a/web/satellite/index-vuetify.html b/web/satellite/index-vuetify.html
index 2f569ee29221..ea5570f80da7 100644
--- a/web/satellite/index-vuetify.html
+++ b/web/satellite/index-vuetify.html
@@ -1,10 +1,10 @@
-
- Storj DCS
diff --git a/web/satellite/vite.config-vuetify.js b/web/satellite/vite.config-vuetify.js
index c74b3e275531..d0f6ffcd80e2 100644
--- a/web/satellite/vite.config-vuetify.js
+++ b/web/satellite/vite.config-vuetify.js
@@ -1,85 +1,55 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-import { resolve } from 'path';
+// Plugins
+import vue from '@vitejs/plugin-vue'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import { defineConfig } from 'vite';
-import { visualizer } from 'rollup-plugin-visualizer';
-import vue from '@vitejs/plugin-vue';
-import viteCompression from 'vite-plugin-compression';
-import vitePluginRequire from 'vite-plugin-require';
-import svgLoader from 'vite-svg-loader';
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
-const productionBrotliExtensions = ['js', 'css', 'ttf', 'woff', 'woff2'];
-
-const plugins = [
+// https://vitejs.dev/config/
+export default defineConfig({
+ base: '/static/dist_vuetify_poc',
+ plugins: [
vue({
- template: { transformAssetUrls }
- }),
- svgLoader({
- svgoConfig: {
- plugins: [{ name: 'removeViewBox', fn: () => {} }],
- },
+ template: { transformAssetUrls }
}),
- vitePluginRequire(),
+ // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
- autoImport: true,
- styles: {
- configFile: 'vuetify-poc/src/styles/settings.scss',
- },
+ autoImport: true,
+ styles: {
+ configFile: 'vuetify-poc/src/styles/settings.scss',
+ },
}),
-];
-
-if (process.env.NODE_ENV === 'production') {
- plugins.push(viteCompression({
- algorithm: 'brotliCompress',
- threshold: 1024,
- ext: '.br',
- filter: new RegExp('\\.(' + productionBrotliExtensions.join('|') + ')$'),
- }));
-}
-
-if (process.env['STORJ_DEBUG_BUNDLE_SIZE']) {
- plugins.push(visualizer({
- open: true,
- brotliSize: true,
- filename: 'analyse.html', // will be saved in project's root
- }));
-}
-
-export default defineConfig(() => {
- return {
- base: '/static/dist_vuetify_poc',
- plugins,
- resolve: {
- alias: {
- '@': resolve(__dirname, './src'),
- '@poc': resolve(__dirname, './vuetify-poc/src'),
- 'stream': 'stream-browserify',
- 'util': 'util/',
- },
- extensions: ['.js', '.ts', '.svg', '.vue', '.mjs'],
- },
- build: {
- outDir: resolve(__dirname, 'dist_vuetify_poc'),
- emptyOutDir: true,
- rollupOptions: {
- input: {
- 'vuetify-poc': resolve(__dirname, './index-vuetify.html'),
- },
- external: [
- /satellite\/src\/views/,
- /satellite\/src\/components/,
- /satellite\/src\/router/,
- ],
- },
- },
- optimizeDeps: {
- exclude: ['* > vuetify/lib/components'],
- },
- define: {
- 'process.env': {},
- },
- };
-});
+ ],
+ define: { 'process.env': {} },
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
+ },
+ extensions: [
+ '.js',
+ '.json',
+ '.jsx',
+ '.mjs',
+ '.ts',
+ '.tsx',
+ '.vue',
+ ],
+ },
+ build: {
+ outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
+ emptyOutDir: true,
+ rollupOptions: {
+ input: {
+ 'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
+ },
+ },
+ },
+ server: {
+ port: 3000,
+ }
+})
diff --git a/web/satellite/vuetify-poc/src/App.vue b/web/satellite/vuetify-poc/src/App.vue
index 63a3a329b9d8..f59dd344c0f1 100644
--- a/web/satellite/vuetify-poc/src/App.vue
+++ b/web/satellite/vuetify-poc/src/App.vue
@@ -2,9 +2,7 @@
// See LICENSE for copying information.
-
-
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
new file mode 100644
index 000000000000..aedd3a26cafd
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
@@ -0,0 +1,16 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue
new file mode 100644
index 000000000000..082f3b4df4c0
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BrowserNewFolderDialog.vue
@@ -0,0 +1,85 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+ New Folder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ Create Folder
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
new file mode 100644
index 000000000000..4628c1c43c34
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BrowserSnackbarComponent.vue
@@ -0,0 +1,154 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+ Uploading 3 items
+
+
+
+
+
+
+ 4 seconds left...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Image.jpg
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video.mp4
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text.pdf
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bigvideo.mov
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
new file mode 100644
index 000000000000..b5d4e52531d8
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
@@ -0,0 +1,299 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.columns.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Image.jpg
+
+
+
+ Download
+
+
+ Share
+
+
+ Geographic Distribution
+
+
+ More
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
new file mode 100644
index 000000000000..78053b4f3e79
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -0,0 +1,47 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+ {{ item.columns.name }}
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
new file mode 100644
index 000000000000..5206bc2be69c
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -0,0 +1,16 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+ {{ data }}
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/Dashboard.vue b/web/satellite/vuetify-poc/src/components/Dashboard.vue
deleted file mode 100644
index 60f4843c2393..000000000000
--- a/web/satellite/vuetify-poc/src/components/Dashboard.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-// Copyright (C) 2023 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-
-
-
-
- Project overview
- Your {{ limits.objectCount }} files are stored in {{ limits.segmentCount }} segments around the world.
-
-
-
-
-
-
-
- {{ limits.objectCount }}
-
-
-
-
-
-
-
- {{ limits.segmentCount }}
-
-
-
-
-
-
-
- {{ bucketsCount }}
-
-
-
-
-
-
-
- {{ accessGrantsCount }}
-
-
-
-
-
-
-
- {{ teamSize }}
-
-
-
-
-
-
-
- Free
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 10 GB Used
- Limit: 25GB
-
-
- 15 GB Available
- Need more?
-
-
-
-
-
-
-
-
-
-
-
-
- 15 GB Used
- Limit: 25GB per month
-
-
- 10 GB Available
- Need more?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 1,234 Used
- Limit: 10,000
-
-
- 8,765 Available
- Need more?
-
-
-
-
-
-
-
-
-
-
-
-
- 50% Used
- Limit: $1.65
-
-
- 50% Available
- Add a card
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue
new file mode 100644
index 000000000000..512057073324
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/PageSubtitleComponent.vue
@@ -0,0 +1,12 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+ {{ subtitle }} Learn More
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue
new file mode 100644
index 000000000000..0b9f66f6a769
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/PageTitleComponent.vue
@@ -0,0 +1,12 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+ {{ title }}
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
new file mode 100644
index 000000000000..62ae1cb2f31b
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -0,0 +1,115 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+ {{ item.columns.name }}
+
+
+
+
+
+ {{ item.raw.role }}
+
+
+
+
+
+ {{ item.raw.actions }}
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/Team.vue b/web/satellite/vuetify-poc/src/components/Team.vue
deleted file mode 100644
index bad087acf3ce..000000000000
--- a/web/satellite/vuetify-poc/src/components/Team.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-// Copyright (C) 2023 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-
-
-
- Team
- Manage the team of this project. Learn More
-
-
-
- Add Members
-
-
-
-
-
-
-
- Add Members
-
-
-
-
-
-
-
-
-
-
-
- Invite team members to join you in this project.
-
-
-
-
-
-
-
-
-
-
-
-
- Cancel
-
-
- Send Invite
-
-
-
-
-
-
-
-
-
-
-
- {{ item.value.fullName }}
-
-
-
-
-
-
-
-
-
diff --git a/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
new file mode 100644
index 000000000000..519accda3c6b
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/TeamTableComponent.vue
@@ -0,0 +1,104 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+ {{ item.columns.name }}
+
+
+
+
+ {{ item.raw.role }}
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
new file mode 100644
index 000000000000..457fe34e6cb3
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -0,0 +1,28 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+ {{ used }}
+ {{ limit }}
+
+
+ {{ available }}
+ {{ cta }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
new file mode 100644
index 000000000000..92f8d242a666
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
@@ -0,0 +1,22 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue
new file mode 100644
index 000000000000..1820ea4f3e7f
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconAllProjects.vue
@@ -0,0 +1,24 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue
new file mode 100644
index 000000000000..a931cc67dae5
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBrowse.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
new file mode 100644
index 000000000000..32cefae673bf
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue
new file mode 100644
index 000000000000..2cc0c257a5c7
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconDashboard.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue
new file mode 100644
index 000000000000..53fe3ba17bd4
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconDocs.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue
new file mode 100644
index 000000000000..8897bff77ab6
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconFolder.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconForum.vue b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue
new file mode 100644
index 000000000000..adfbd73903b5
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconForum.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconNew.vue b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue
new file mode 100644
index 000000000000..8b59160abc64
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconNew.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue
new file mode 100644
index 000000000000..f980887007e4
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconPassphrase.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconProject.vue b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue
new file mode 100644
index 000000000000..5025c13d6156
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconProject.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconResources.vue b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue
new file mode 100644
index 000000000000..005b2fdd277c
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconResources.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue
new file mode 100644
index 000000000000..89ec79e78266
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconSettings.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue
new file mode 100644
index 000000000000..3d706190ffaf
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconSupport.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
new file mode 100644
index 000000000000..9cc991f535d8
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
@@ -0,0 +1,21 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue
new file mode 100644
index 000000000000..bec0d3034815
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconUpload.vue
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/layouts/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/AppBar.vue
deleted file mode 100644
index 5e393f7a96e0..000000000000
--- a/web/satellite/vuetify-poc/src/layouts/AppBar.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-// Copyright (C) 2023 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- My Account
-
-
-
-
-
-
-
-
- Region
-
- North America 1
-
-
-
-
-
-
- Upgrade
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
- Billing
-
-
-
-
-
-
- Sign Out
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- View all projects
-
-
-
-
-
-
- Create new project
-
-
-
-
-
-
- Manage Passphrase
-
-
-
-
-
-
-
-
- Project
-
-
- My first project
-
-
-
-
-
-
-
-
-
- Overview
-
-
-
-
-
-
-
- Buckets
-
-
-
-
-
-
-
- Browse
-
-
-
-
-
-
-
- Access
-
-
-
-
-
-
-
- Team
-
-
-
-
-
-
-
-
-
-
-
- Docs
-
-
- Read the documentation.
-
-
-
-
-
-
- Forum
-
-
- Join our global community.
-
-
-
-
-
-
- Support
-
-
- Get support for Storj.
-
-
-
-
-
-
-
-
-
- Resources
-
-
-
-
-
-
-
-
-
- Quickstart
-
-
-
-
-
-
-
-
-
- Design Library
-
-
-
-
-
-
-
-
diff --git a/web/satellite/vuetify-poc/src/layouts/default/Account.vue b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
new file mode 100644
index 000000000000..c429fd8274c2
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/layouts/default/Account.vue
@@ -0,0 +1,16 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue
new file mode 100644
index 000000000000..656c15c8631e
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/layouts/default/AccountNav.vue
@@ -0,0 +1,91 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Go back
+
+
+
+
+
+
+
+
+
+
+
+
+ All Projects
+
+
+
+
+
+
+
+
+
+
+ Account Settings
+
+
+
+
+
+
+
+
+
+
+ Account Billing
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
new file mode 100644
index 000000000000..867395baa767
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/layouts/default/AllProjects.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
new file mode 100644
index 000000000000..06391d076911
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -0,0 +1,187 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+
+
+
+ Region
+
+ North America 1
+
+
+
+
+
+
+
+ Upgrade
+
+
+
+
+
+
+
+ Billing
+
+
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+ Sign Out
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/layouts/Default.vue b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
similarity index 94%
rename from web/satellite/vuetify-poc/src/layouts/Default.vue
rename to web/satellite/vuetify-poc/src/layouts/default/Default.vue
index 349235dc27c9..67b2e7bfd738 100644
--- a/web/satellite/vuetify-poc/src/layouts/Default.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/Default.vue
@@ -3,7 +3,8 @@
-
@@ -12,8 +13,9 @@
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
-import AppBar from './AppBar.vue';
-import DefaultView from './DefaultView.vue';
+import DefaultBar from './AppBar.vue'
+import ProjectNav from './ProjectNav.vue'
+import DefaultView from './View.vue'
import { RouteConfig } from '@/types/router';
import { Project } from '@/types/projects';
diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
new file mode 100644
index 000000000000..1de7a5ad9017
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -0,0 +1,287 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Projects
+
+
+
+
+
+
+
+
+
+ My First Project
+
+
+
+
+
+
+
+
+ Shared Projects
+
+
+
+
+
+
+
+ Storj Labs
+
+
+
+
+
+
+
+ Project Settings
+
+
+
+
+
+
+
+
+
+
+ View All Projects
+
+
+
+
+
+
+
+
+ Create New Project
+
+
+
+
+
+
+
+ Manage Passphrase
+
+
+
+
+
+
+
+ Project
+
+
+ My first project
+
+
+
+
+
+
+
+
+
+ Overview
+
+
+
+
+
+
+
+ Buckets
+
+
+
+
+
+
+
+ Browse
+
+
+
+
+
+
+
+ Access
+
+
+
+
+
+
+
+ Team
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Documentation
+
+
+ Go to the Storj docs.
+
+
+
+
+
+
+
+ Community Forum
+
+
+ Join our global community.
+
+
+
+
+
+
+
+ Storj Support
+
+
+ Need help? Get support.
+
+
+
+
+
+
+
+
+ Resources
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/layouts/DefaultView.vue b/web/satellite/vuetify-poc/src/layouts/default/View.vue
similarity index 57%
rename from web/satellite/vuetify-poc/src/layouts/DefaultView.vue
rename to web/satellite/vuetify-poc/src/layouts/default/View.vue
index f91dcc4037a3..73e12e47224d 100644
--- a/web/satellite/vuetify-poc/src/layouts/DefaultView.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/View.vue
@@ -2,9 +2,11 @@
// See LICENSE for copying information.
-
-
+
+
-
+
diff --git a/web/satellite/vuetify-poc/src/main.ts b/web/satellite/vuetify-poc/src/main.ts
index cab33a9ecc27..0e47612d92bc 100644
--- a/web/satellite/vuetify-poc/src/main.ts
+++ b/web/satellite/vuetify-poc/src/main.ts
@@ -1,17 +1,27 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-import { createApp } from 'vue';
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App
+ */
-import App from './App.vue';
+// Components
+import App from './App.vue'
-import { registerPlugins } from '@poc/plugins';
+// Composables
+import { createApp } from 'vue'
-import './styles/settings.scss';
+// Styles
+import './styles/settings.scss'
+// import './styles/styles.scss'
-const app = createApp(App);
-app.config.performance = true;
+// Plugins
+import { registerPlugins } from '@poc/plugins'
-registerPlugins(app);
+const app = createApp(App)
-app.mount('#app');
+registerPlugins(app)
+
+app.mount('#app')
diff --git a/web/satellite/vuetify-poc/src/plugins/index.ts b/web/satellite/vuetify-poc/src/plugins/index.ts
index 6a3aa510c2bd..94d6b65b15b1 100644
--- a/web/satellite/vuetify-poc/src/plugins/index.ts
+++ b/web/satellite/vuetify-poc/src/plugins/index.ts
@@ -1,21 +1,25 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-import { createPinia, setActivePinia } from 'pinia';
-import { App } from 'vue';
-
-import { router } from '../router';
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
-import { loadFonts } from './webfontloader';
-import vuetify from './vuetify';
+// Plugins
+import { createPinia, setActivePinia } from 'pinia';
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+import router from '../router'
const pinia = createPinia();
setActivePinia(pinia);
-export function registerPlugins(app: App): void {
- loadFonts();
- app
- .use(vuetify)
- .use(router)
- .use(pinia);
+export function registerPlugins (app) {
+ loadFonts()
+ app
+ .use(vuetify)
+ .use(router)
+ .use(pinia)
}
diff --git a/web/satellite/vuetify-poc/src/plugins/vuetify.ts b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
index 85b1bdd401f1..f953e5153cba 100644
--- a/web/satellite/vuetify-poc/src/plugins/vuetify.ts
+++ b/web/satellite/vuetify-poc/src/plugins/vuetify.ts
@@ -1,60 +1,110 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-import { Blueprint, createVuetify } from 'vuetify';
-import { md3 } from 'vuetify/lib/blueprints/index.mjs';
-import { VDataTable } from 'vuetify/lib/labs/VDataTable/index.mjs';
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles';
+// import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// Data Table
+import { VDataTable } from 'vuetify/labs/VDataTable'
+
+// Material Design 2
+// import { md2 } from 'vuetify/blueprints'
+
+// Matrial Design 3
+import { md3 } from 'vuetify/blueprints'
+
+// Storj Styles
+import '../styles/styles.scss'
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
- blueprint: md3 as Blueprint,
- theme: {
- themes: {
- light: {
- colors: {
- primary: '#0149FF',
- secondary: '#0218A7',
- info: '#537CFF',
- success: '#00AC26',
- warning: '#FF8A00',
- error: '#FF458B',
- surface: '#fff',
- purple: '#7B61FF',
- blue6: '#091c45',
- blue5: '#0218A7',
- blue4: '#0059D0',
- },
- },
- dark: {
- colors: {
- primary: '#0149FF',
- secondary: '#537CFF',
- background: '#0c121d',
- surface: '#0c121d',
- purple: '#7B61FF',
- blue6: '#091c45',
- blue5: '#2196f3',
- blue4: '#0059D0',
- },
- },
+ // Use blueprint for Material Design 2
+ // blueprint: md2,
+ // Use blueprint for Material Design 3
+ blueprint: md3,
+ theme: {
+ themes: {
+ light: {
+ colors: {
+ primary: '#0149FF',
+ secondary: '#0218A7',
+ info: '#537CFF',
+ success: '#00AC26',
+ warning: '#FF8A00',
+ error: '#FF458B',
+ error2: '#FF0149',
+ surface: '#FFF',
+ purple: '#7B61FF',
+ blue6: '#091c45',
+ blue5: '#0218A7',
+ blue4: '#0059D0',
+ blue2: '#003ACD',
+ yellow: '#FFC600',
+ yellow2: '#FFB701',
+ orange: '#FFA800',
+ green: '#00B150',
+ purple2: '#502EFF',
},
+ },
+ dark: {
+ colors: {
+ primary: '#0149FF',
+ secondary: '#537CFF',
+ // background: '#010923',
+ // background: '#0c121d',
+ background: '#0d1116',
+ error: '#FF458B',
+ error2: '#FF0149',
+ // surface: '#010923',
+ // surface: '#0c121d', dark bluish
+ surface: '#0d1116',
+ purple: '#7B61FF',
+ blue6: '#091c45',
+ blue5: '#2196f3',
+ blue4: '#0059D0',
+ blue2: '#003ACD',
+ yellow: '#FFC600',
+ yellow2: '#FFB701',
+ orange: '#FFA800',
+ warning: '#FF8A00',
+ green: '#00B150',
+ purple2: '#7B61FF',
+ }
+ },
},
- components: {
- VDataTable,
+ },
+ components: {
+ VDataTable,
+ },
+ defaults: {
+ global: {
+ // ripple: false,
},
- defaults: {
- global: {
- // ripple: false,
- },
- VDataTable: {
- fixedHeader: true,
- noDataText: 'Results not found',
- },
- VBtn: {
- elevation: 0,
- density: 'default',
- rounded: 'lg',
- },
+ VDataTable: {
+ fixedHeader: true,
+ noDataText: 'Results not found',
+ },
+ VBtn: {
+ // elevation: 1,
+ density: 'default',
+ // height: 48,
+ rounded: 'lg',
+ // textTransform: 'none',
+ class: 'text-capitalize font-weight-bold',
+ style: 'letter-spacing:0;'
+ },
+ VTooltip: {
+ transition: 'fade-transition',
},
-});
+ },
+})
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
index 1c89462bb6b9..ff5a3bc7c36d 100644
--- a/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
+++ b/web/satellite/vuetify-poc/src/plugins/webfontloader.ts
@@ -1,12 +1,18 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-export async function loadFonts(): Promise {
- const webFontLoader = await import('webfontloader');
+/**
+ * plugins/webfontloader.ts
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
- webFontLoader.load({
- google: {
- families: ['Inter:400,600,800&display=swap'],
- },
- });
+export async function loadFonts () {
+ const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+ webFontLoader.load({
+ google: {
+ families: ['Inter:400,500,700&display=swap'],
+ },
+ })
}
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
index 3e43b698f254..77a3cec57d8f 100644
--- a/web/satellite/vuetify-poc/src/router/index.ts
+++ b/web/satellite/vuetify-poc/src/router/index.ts
@@ -1,29 +1,79 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-import { createRouter, createWebHistory } from 'vue-router';
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
const routes = [
- {
- path: '/vuetifypoc',
- redirect: { path: '/dashboard' },
- component: () => import('@poc/layouts/Default.vue'),
- children: [
- {
- path: '/dashboard',
- name: 'Dashboard',
- component: () => import('@poc/views/Dashboard.vue'),
- },
- {
- path: '/team',
- name: 'Team',
- component: () => import('@poc/views/Team.vue'),
- },
- ],
- },
-];
+ {
+ path: '/vuetifypoc',
+ redirect: { path: '/projects' }, // redirect
+ component: () => import('@poc/layouts/default/Default.vue'),
+ children: [
+ {
+ path: '/dashboard',
+ name: 'Dashboard',
+ component: () => import(/* webpackChunkName: "home" */ '@poc/views/Dashboard.vue'),
+ },
+ {
+ path: '/buckets',
+ name: 'Buckets',
+ component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
+ },
+ {
+ path: '/bucket',
+ name: 'Bucket',
+ component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
+ },
+ {
+ path: '/access',
+ name: 'Access',
+ component: () => import(/* webpackChunkName: "Access" */ '@poc/views/Access.vue'),
+ },
+ {
+ path: '/team',
+ name: 'Team',
+ component: () => import(/* webpackChunkName: "Team" */ '@poc/views/Team.vue'),
+ },
+ ],
+ },
+ {
+ path: '/account',
+ component: () => import('@poc/layouts/default/Account.vue'),
+ children: [
+ {
+ path: '/billing',
+ name: 'Billing',
+ component: () => import(/* webpackChunkName: "Billing" */ '@poc/views/Billing.vue'),
+ },
+ {
+ path: '/account-settings',
+ name: 'Account Settings',
+ component: () => import(/* webpackChunkName: "MyAccount" */ '@poc/views/AccountSettings.vue'),
+ },
+ {
+ path: '/design-library',
+ name: 'Design Library',
+ component: () => import(/* webpackChunkName: "DesignLibrary" */ '@poc/views/DesignLibrary.vue'),
+ },
+ ],
+ },
+ {
+ path: '/projects',
+ component: () => import('@poc/layouts/default/AllProjects.vue'),
+ children: [
+ {
+ path: '/projects',
+ name: 'Projects',
+ component: () => import(/* webpackChunkName: "Projects" */ '@poc/views/Projects.vue'),
+ },
+ ],
+ },
+]
-export const router = createRouter({
- history: createWebHistory(),
- routes,
-});
+const router = createRouter({
+ history: createWebHistory(),
+ routes,
+})
+
+export default router
diff --git a/web/satellite/vuetify-poc/src/styles/settings.scss b/web/satellite/vuetify-poc/src/styles/settings.scss
index 557cbf130c76..9bb5a6c7448b 100644
--- a/web/satellite/vuetify-poc/src/styles/settings.scss
+++ b/web/satellite/vuetify-poc/src/styles/settings.scss
@@ -1,193 +1,36 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
-@use 'vuetify' with (
- $color-pack: false,
- $body-font-family: 'Inter',
-);
-
-.v-theme--light {
- --v-border-color: 0, 0, 0;
- --v-border-opacity: 0.1;
-}
-
-.v-responsive {
- // allow the shadows to appear outside the containers
- overflow: visible;
-}
-
-.v-btn {
- text-transform: none;
- letter-spacing: 0;
- font-weight: 700;
- transition: all 0.2s ease 0s;
- line-height: 1.5rem;
-}
-
-.v-btn.v-theme--light.bg-success {
- color: #fff;
-}
-
-.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: 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--icon {
- padding: 4px;
- height: auto;
- width: auto;
-}
-
-// Headings
-.v-theme--light h1, .v-theme--light h2, .v-theme--light h3, .v-theme--light h4, .v-theme--light h5, .v-theme--light h6 {
- color: #091c45;
-}
-.v-theme--dark h1, .v-theme--dark h2, .v-theme--dark h3, .v-theme--dark h4, .v-theme--dark h5, .v-theme--dark h6 {
- color: #fff;
-}
-
-// Menu border
-.v-menu > .v-overlay__content {
- border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
- border-radius: 9px;
-}
-
-// Menu list item
-.v-list-item--active .v-list-item-title {
- font-weight: 700;
-}
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
-// Card Light Theme
-.v-card.v-theme--dark {
- background: #0c121d;
- border-radius: 12px !important;
-}
+// Warning
+// Duplicated CSS
+// Placing actual styles or importing a regular stylesheet
+// into the settings file will cause them to be
+// duplicated everywhere the file is imported.
-// Card Dark Theme
-.v-card.v-theme--light {
- border: 1px solid #d8dee3;
- border-radius: 12px !important;
-}
+// Only put variables, mixins, and functions in the settings file,
+// styles should be placed in the main stylesheet or loaded another way.
-.v-card-item {
- padding: 1rem;
-}
-// Cards Title
-.v-card-item .v-card-title {
- font-weight: 700;
- font-size: 1.1rem;
- letter-spacing: 0;
-}
+// Use SASS https://vuetifyjs.com/en/features/sass-variables/
-// Overlay behind modals/dialogs opacity and color
-.v-overlay__scrim {
- background: #000;
- opacity: 0.75;
-}
+// @use 'vuetify' with (
+// // $utilities: false,
+// $color-pack: false,
+// $body-font-family: 'Inter',
+// );
-// Align the checkboxes in the tables
-.v-selection-control {
- contain: inherit;
-}
-
-// Make the checkbox selection square instead of rounded
-.v-selection-control__input {
- border-radius: 4px;
-}
-.v-selection-control__input::before {
- border-radius: 4px;
-}
-
-
-// Sorting icon
-.mdi-arrow-up::before, .mdi-arrow-down::before {
- font-size: 16px;
- font-weight: 400;
-}
-
-// Breadcrumbs
-.v-breadcrumbs {
- min-height: 24px;
-}
-.v-breadcrumbs-item {
- padding: 0;
-}
-
-// Snackbar
-.v-snackbar__content {
- width: 100%;
-}
-
-// Table Headers
-.v-data-table-header__content {
- text-transform: uppercase;
- font-size: 0.7rem;
- letter-spacing: 1px;
-}
-
-// Table content
-.v-list-item__content {
- white-space: nowrap;
- overflow: visible;
-}
-
-// Table Footer
-.v-data-table-footer {
- font-size: 14px;
-}
-.v-data-table-footer {
- border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-// Table Fonts
-table {
- font-size: 14px;
-}
-
-// Table Pagination
-.v-data-table-footer__pagination .v-btn {
- width: auto;
-}
-
-// Search styles
-.v-field.v-field--prepended {
- --v-field-padding-start: 8px;
- padding-left: 16px;
-}
-
-// Links
-.link {
- color: rgb(var(--v-theme-secondary));
- text-decoration: none;
- border-bottom: 1px solid;
-}
-.link:hover {
- color: rgb(var(--v-theme-primary));
-}
+// To obtain settings from Vuetify, you must forward its variables from within your local stylesheet
+@forward 'vuetify' with (
+ // $utilities: false,
+ $color-pack: false,
+ $body-font-family: 'Inter',
+ // $button-text-letter-spacing: 'none',
+ // $button-height: 40px,
+);
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/styles/styles.scss b/web/satellite/vuetify-poc/src/styles/styles.scss
new file mode 100644
index 000000000000..2d79a146f882
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/styles/styles.scss
@@ -0,0 +1,290 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+/**
+ * src/styles/styles.scss
+ *
+ * Storj Stylesheet
+ * Work in progress
+ *
+ */
+
+ @use './settings';
+
+// 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;
+}
+
+// Dark Theme
+.v-theme--dark {
+ --v-theme-overlay-multiplier: 0.75;
+}
+
+.v-navigation-drawer {
+ // box-shadow: 0 3px 4px rgba(var(--v-theme-on-surface), 0.05) !important;
+ box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
+ // box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
+}
+.v-app-bar.v-toolbar {
+ 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;
+ box-shadow: 15px 0 30px 0 rgba(0,0,0,.03) !important;
+ // box-shadow: 15px 0 30px 0 rgba(var(--v-theme-on-surface), 0.03) !important;
+}
+
+// Toggle visibility class
+.show {
+ display: block;
+}
+
+// Custom rounded class
+.rounded-xlg {
+ border-radius: 12px !important;
+}
+
+// Success button text
+.v-btn.v-theme--light.bg-success {
+ color: #fff;
+}
+
+// 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;
+ // box-shadow: rgba(50, 50, 93, 0.1) 0px 0px 0px 1px inset, rgba(50, 50, 93, 0.1) 0px 2px 5px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px !important;
+}
+// .v-btn.v-theme--light {
+// box-shadow: 0 1px 2px #eee;
+// }
+// .v-btn.v-theme--dark {
+// box-shadow: 0 1px 2px #000;
+// }
+
+// Button Outlines
+.v-btn.v-theme--light.text-default.v-btn--variant-outlined {
+ border-color: rgba(var(--v-border-color), 0.2);
+ // border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-btn.v-theme--light.text-default.v-btn--variant-outlined:hover {
+ border-color: #9da3a7;
+ // color: rgb(var(--v-theme-primary));
+ border-color: rgba(var(--v-border-color), 0.5);
+}
+.v-btn.v-theme--dark.text-default.v-btn--variant-outlined {
+ 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 {
+ border-color: #a9b0b979;
+}
+
+// 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;
+}
+
+// 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;
+}
+
+// Button Icon
+.v-btn--icon {
+ padding: 4px;
+ height: auto;
+ width: auto;
+}
+
+
+// Menu border
+.v-menu > .v-overlay__content {
+ border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+ border-radius: 12px;
+}
+
+// Menu list item
+.v-list-item--active .v-list-item-title {
+ font-weight: 700;
+}
+
+// Menu list item active background
+// .v-list-item--variant-text .v-list-item__overlay {
+// background: rgb(var(--v-border-color));
+// }
+
+
+// Card Light Theme
+.v-card.v-theme--dark {
+// background: #000b2f;
+// background: #101823;
+// background: #0d1116;
+ background: --v-theme-surface;
+// box-shadow: 0 2px 2px #000b2f;
+// border-bottom-width: 2px !important;
+// box-shadow: 0 2px 2px #00000047;
+// box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
+// border-color: #d9d7d7;
+ box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
+}
+
+// Card Dark Theme
+.v-card.v-theme--light {
+ // background: #f6f7fa;
+ // border-bottom-width: 2px !important;
+ // box-shadow: 0 2px 2px #eee;
+ // box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 16px -8px;
+ // border: 1px solid #d8dee3;
+ border: 1px solid #e0e0e0;
+ // border: none;
+ // box-shadow: rgb(224, 224, 224) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1.5px 0px !important;
+ box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1.5px 0px !important;
+}
+
+// Cards Padding
+.v-card-item {
+ padding: 1rem;
+}
+
+// Cards Title
+.v-card-item .v-card-title {
+ font-weight: 700;
+ font-size: 1.1rem;
+ letter-spacing: 0;
+}
+
+
+// Overlay behind modals/dialogs opacity and color
+.v-overlay__scrim {
+ background: #000;
+ opacity: 0.75;
+}
+
+// Align the checkboxes in the tables
+.v-selection-control {
+ contain: inherit;
+}
+
+// Make the checkbox selection square instead of rounded
+.v-selection-control__input {
+ border-radius: 8px;
+}
+.v-selection-control__input::before {
+ border-radius: 8px;
+}
+
+
+// Sorting icon
+.mdi-arrow-up::before, .mdi-arrow-down::before {
+ // content: "\F005D";
+ font-size: 14px;
+}
+
+// Breadcrumbs
+.v-breadcrumbs {
+ min-height: 24px;
+}
+.v-breadcrumbs-item {
+ padding: 0 !important;
+}
+
+// Snackbar
+.v-snackbar__content {
+ width: 100%;
+}
+
+// Table Headers
+.v-data-table-header__content {
+ text-transform: uppercase;
+ font-size: 0.7rem;
+ letter-spacing: 1px;
+}
+
+// Table content
+.v-list-item__content {
+ white-space: nowrap;
+ overflow: visible;
+}
+
+// Table Footer
+.v-data-table-footer {
+ font-size: 14px;
+}
+.v-data-table-footer {
+ border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+// Table Fonts
+table {
+ font-size: 14px;
+}
+
+// Table Pagination
+.v-data-table-footer__pagination .v-btn {
+ width: auto;
+}
+
+// Search styles
+.v-field.v-field--prepended {
+ --v-field-padding-start: 8px;
+ padding-left: 16px;
+}
+
+
+// Links
+.link {
+ color: rgb(var(--v-theme-primary));
+ text-decoration: none;
+ background-image: linear-gradient(currentColor,currentColor);
+ background-size: 0 1px;
+ background-repeat: no-repeat;
+ background-position: 0 100%;
+ transition: background-size .15s ease;
+}
+.link:hover {
+ color: rgb(var(--v-theme-secondary));
+ background-size: 100% 1px;
+}
+
+
+// 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);
+ font-weight: 500;
+ border-radius: 20px !important;
+ padding: 6px 14px;
+ backdrop-filter: blur(12px);
+}
+
+// Upload Snackbar
+.upload-snackbar .v-snackbar__content {
+ padding: 2px;
+}
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/Access.vue b/web/satellite/vuetify-poc/src/views/Access.vue
new file mode 100644
index 000000000000..3f90b3a3afe3
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/Access.vue
@@ -0,0 +1,289 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+ New Access
+
+
+
+
+
+
+
+
+
+ {{ currentTitle }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Type
+
+
+ Access Grant
+
+
+ Keys to upload, delete, and view your data. Learn more
+
+
+
+
+
+
+ S3 Credentials
+
+
+ Generates access key, secret key, and endpoint to use in your S3 supported application. Learn More
+
+
+
+
+
+
+
+ CLI Access
+
+
+ Create an access grant to run in the command line. Learn more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Permissions
+ Buckets
+ End date
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Learn More
+
+
+ Back
+
+
+
+
+ Next
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
new file mode 100644
index 000000000000..3163f00962f5
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -0,0 +1,147 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+ Settings
+
+
+
+
+ Profile
+
+
+ Name
+
+
+ Tome Boshevski
+
+
+
+
+ Edit Name
+
+
+
+
+
+
+ Email
+
+
+ tome@storj.io
+
+
+
+
+
+
+
+
+
+
+
+ Security
+
+
+ Password
+
+
+ **********
+
+
+
+
+ Change Password
+
+
+
+
+
+ Two-factor authentication
+
+
+ Improve account security by enabling 2FA.
+
+
+
+
+ Enable Two-factor
+
+
+
+
+
+ Session Timeout
+
+
+ Set timeout to log you out for inactivity.
+
+
+
+
+ Set Timeout
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+
+ Product newsletter
+
+
+ Notify me about product updates.
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue
new file mode 100644
index 000000000000..fe5d4052816f
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/Billing.vue
@@ -0,0 +1,318 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+ Billing
+
+
+
+
+ Overview
+
+
+ Payment Methods
+
+
+ STORJ Transactions
+
+
+ Billing History
+
+
+ Billing Information
+
+
+
+
+
+
+
+
+
+
+
+
+ $24
+ View Billing History
+
+
+
+
+
+
+
+
+ $5,284
+ + Add STORJ Tokens
+
+
+
+
+
+
+
+
+ $1.65 off
+ + Add Coupon
+
+
+
+
+
+
+
+ Costs per project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ STORJ
+
+ Deposit Address
+ 0x0683 . . . 2759
+ Total Balance
+ $5,284
+ + Add STORJ Tokens
+ View Transactions
+
+
+
+
+
+
+
+ Visa
+
+ Card Number
+ **** **** **** 2759
+ Exp. Date
+ 12/27
+ Edit
+ Remove
+
+
+
+
+
+
+
+
+ + Add New Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.columns.date }}
+
+
+
+
+ {{ item.raw.status }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.columns.date }}
+
+
+
+
+ {{ item.raw.status }}
+
+
+
+
+
+
+
+
+
+
+
+
+ You can add personal or company info, billing email, and VAT.
+ + Add Billing Information
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
new file mode 100644
index 000000000000..0f9e70930307
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -0,0 +1,68 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue
new file mode 100644
index 000000000000..6928fb289abb
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/Buckets.vue
@@ -0,0 +1,175 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+ New Bucket
+
+
+
+
+
+
+
+
+
+ Create New Bucket
+
+
+
+
+
+
+
+
+
+
+
+ Buckets are used to store and organize your files.
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+ Create Bucket
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index f135431303f0..ccee8ac66c6d 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -2,9 +2,122 @@
// See LICENSE for copying information.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/DesignLibrary.vue b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue
new file mode 100644
index 000000000000..5aeee7ec9061
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/DesignLibrary.vue
@@ -0,0 +1,287 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+ Design Library
+
+
+
+
+
+ Button Variants
+
+
+
+
+
+
+
+ Default Variant
+
+
+
+
+
+ Outlined Variant
+
+
+
+
+
+
+ Tonal Variant
+
+
+
+
+
+
+ Text Variant
+
+
+
+
+
+ Plain Variant
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+ Button Colors
+
+
+
+
+
+
+ Primary Color
+
+
+
+
+
+ Secondary
+
+
+
+
+
+ Success
+
+
+
+
+
+ Warning
+
+
+
+
+
+ Error
+
+
+
+
+
+
+ Button Icons
+
+
+
+
+
+
+
+
+
+
+
+ Prepend
+
+
+
+
+
+ Append Outlined Secondary
+
+
+
+
+
+ Prepend & Append
+
+
+
+
+
+
+
+ Button Sizes
+
+
+
+
+
+ Extra small Button
+
+
+
+ Small Button
+
+
+
+ Regular Button
+
+
+
+ Large Outlined Warning
+
+
+
+ X-Large Button
+
+
+
+
+
+ Button Blocks
+
+
+
+
+
+ Block Button Default
+
+
+ Block Tonal Secondary
+
+
+ Block Tonal Error
+
+
+
+
+
+ Button Loading
+
+
+
+
+
+
+
+
+
+ No Thanks
+
+
+
+ Yes, let's go
+
+
+
+
+
+
+
+
+ Button Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/Projects.vue b/web/satellite/vuetify-poc/src/views/Projects.vue
new file mode 100644
index 000000000000..9a8de20d9805
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/views/Projects.vue
@@ -0,0 +1,357 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+
+
+
+
+ Create Project
+
+
+
+
+
+
+
+
+
+ Create New Project
+
+
+
+
+
+
+
+
+
+
+
+ Enter project name (max 20 characters).
+
+
+
+
+
+
+
+
+
+
+
+ + Add Description (Optional)
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ Create Project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cards
+
+
+
+
+ Table
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Project Settings
+
+
+
+
+
+
+
+ Invite Members
+
+
+
+
+
+
+
+
+ My first project
+
+
+ Project Description
+
+
+
+ Open Project
+
+
+
+
+
+
+
+
+ Storj Labs
+
+
+ Shared team project
+
+
+
+ Open Project
+
+
+
+
+
+
+
+
+ Invitation Project
+
+
+ Example invitation.
+
+
+
+ Join Project
+ Decline
+
+
+
+
+
+
+
+
+ Welcome
+
+
+ Create a project to get started.
+
+
+
+ Create Project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/views/Team.vue b/web/satellite/vuetify-poc/src/views/Team.vue
index 664c2af933b7..723f582f50a5 100644
--- a/web/satellite/vuetify-poc/src/views/Team.vue
+++ b/web/satellite/vuetify-poc/src/views/Team.vue
@@ -2,9 +2,180 @@
// See LICENSE for copying information.
-
+
+
+
+
+
+
+
+ Add Members
+
+
+
+
+
+
+
+
+
+ Add Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Invite team members to join you in this project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ Send Invite
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+ {{ item.columns.name }}
+ 
+
+
+
+ {{ item.columns.name }}
+ 
+
+
+ 
+
+ My Account
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+