diff --git a/docker/nginx/conf.d/server/server.account b/docker/nginx/conf.d/server/server.account
index 127ba4bf..9d444296 100644
--- a/docker/nginx/conf.d/server/server.account
+++ b/docker/nginx/conf.d/server/server.account
@@ -3,6 +3,11 @@ listen 443 ssl http2;
include /etc/nginx/conf.d/include/ssl-settings;
include /etc/nginx/conf.d/include/init-optional-variables;
+# Uncomment to launch new Dashboard under /v2 path
+# location /v2 {
+# proxy_pass http://dashboard-v2:9000;
+# }
+
location / {
proxy_pass http://dashboard:3000;
}
diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js
index 0e269557..d087fa65 100644
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@@ -11,6 +11,7 @@ module.exports = {
title: `Account Dashboard`,
siteUrl: `https://account.${GATSBY_PORTAL_DOMAIN}`,
},
+ pathPrefix: "/v2",
trailingSlash: "never",
plugins: [
"gatsby-plugin-image",
diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json
index 694a6129..80070815 100644
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@@ -11,8 +11,8 @@
"develop": "gatsby develop",
"develop:secure": "dotenv -e .env.development -- gatsby develop --https -p=443",
"start": "gatsby develop",
- "build": "gatsby build",
- "serve": "gatsby serve",
+ "build": "gatsby build --prefix-paths",
+ "serve": "gatsby serve --prefix-paths",
"clean": "gatsby clean",
"lint": "eslint .",
"prettier": "prettier .",
diff --git a/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
index 2a3e400d..f97ca2d5 100644
--- a/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
+++ b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
@@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
import { useUser } from "../../contexts/user";
// import { SimpleUploadIcon } from "../Icons";
-const AVATAR_PLACEHOLDER = "/images/avatar-placeholder.svg";
+import avatarPlaceholder from "../../../static/images/avatar-placeholder.svg";
export const AvatarUploader = (props) => {
const { user } = useUser();
- const [imageUrl, setImageUrl] = useState(AVATAR_PLACEHOLDER);
+ const [imageUrl, setImageUrl] = useState(avatarPlaceholder);
useEffect(() => {
- setImageUrl(user.avatarUrl ?? AVATAR_PLACEHOLDER);
+ setImageUrl(user.avatarUrl ?? avatarPlaceholder);
}, [user]);
return (
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
index 3947638d..f9dbbc36 100644
--- a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from "react";
import fileSize from "pretty-bytes";
import { Link } from "gatsby";
+import cn from "classnames";
import useSWR from "swr";
import { useUser } from "../../contexts/user";
@@ -62,7 +63,9 @@ const ErrorMessage = () => (
);
export default function CurrentUsage() {
+ const { activePlan, plans } = useActivePlan();
const { usage, error, loading } = useUsageData();
+ const nextPlan = useMemo(() => plans.find(({ tier }) => tier > activePlan?.tier), [plans, activePlan]);
const storageUsage = size(usage.storageUsed);
const storageLimit = size(usage.storageLimit);
const filesUsedLabel = useMemo(() => ({ value: usage.filesUsed, unit: "files" }), [usage.filesUsed]);
@@ -89,7 +92,7 @@ export default function CurrentUsage() {
{storageLimit.text}
-
+
@@ -97,7 +100,10 @@ export default function CurrentUsage() {
UPGRADE
{" "}
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
index 1afab541..fd9a015e 100644
--- a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
@@ -21,11 +21,11 @@ const BarLabel = styled.span.attrs({
`}
`;
-export const GraphBar = ({ value, limit, label }) => {
+export const GraphBar = ({ value, limit, label, className }) => {
const percentage = typeof limit !== "number" || limit === 0 ? 0 : (value / limit) * 100;
return (
-
+
diff --git a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
index 3f6f23c2..de4e7e46 100644
--- a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
@@ -1,9 +1,11 @@
import styled from "styled-components";
+import usageGraphBg from "../../../static/images/usage-graph-bg.svg";
+
export const UsageGraph = styled.div.attrs({
className: "w-full my-3 grid grid-flow-row grid-rows-2",
})`
height: 146px;
- background: url(/images/usage-graph-bg.svg) no-repeat;
+ background: url(${usageGraphBg}) no-repeat;
background-size: cover;
`;
diff --git a/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js b/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js
index 0f8b8c62..236cdc9b 100644
--- a/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js
+++ b/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js
@@ -80,7 +80,7 @@ export const AddSponsorKeyForm = forwardRef(({ onSuccess }, ref) => {
json: {
name,
public: "true",
- skylinks: [...skylinks, nextSkylink].filter(Boolean).map(parseSkylink),
+ skylinks: [...skylinks, nextSkylink].filter(Boolean).map((skylink) => parseSkylink(skylink)),
},
})
.json();
diff --git a/packages/dashboard-v2/src/contexts/plans/PlansProvider.js b/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
index 135c9bcb..7c6579ad 100644
--- a/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
+++ b/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
@@ -19,7 +19,14 @@ const aggregatePlansAndLimits = (plans, limits, { includeFreePlan }) => {
// Decorate each plan with its corresponding limits data, if available.
if (limits?.length) {
- return sortedPlans.map((plan) => ({ ...plan, limits: limits[plan.tier] || null }));
+ return limits.map((limitsDescriptor, index) => {
+ const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};
+
+ return {
+ ...asssociatedPlan,
+ limits: limitsDescriptor || null,
+ };
+ });
}
// If we don't have the limits data yet, set just return the plans.
@@ -40,10 +47,12 @@ export const PlansProvider = ({ children }) => {
if (plansError || limitsError) {
setLoading(false);
setError(plansError || limitsError);
- } else if (rawPlans) {
+ } else if (rawPlans || limits) {
setLoading(false);
setPlans(
- aggregatePlansAndLimits(rawPlans, limits?.userLimits, { includeFreePlan: !settings.isSubscriptionRequired })
+ aggregatePlansAndLimits(rawPlans || [], limits?.userLimits, {
+ includeFreePlan: !settings.isSubscriptionRequired,
+ })
);
}
}, [rawPlans, limits, plansError, limitsError, settings.isSubscriptionRequired]);
diff --git a/packages/dashboard-v2/src/layouts/AuthLayout.js b/packages/dashboard-v2/src/layouts/AuthLayout.js
index 8141e606..323e4319 100644
--- a/packages/dashboard-v2/src/layouts/AuthLayout.js
+++ b/packages/dashboard-v2/src/layouts/AuthLayout.js
@@ -3,10 +3,13 @@ import styled from "styled-components";
import { UserProvider } from "../contexts/user";
+import skynetLogo from "../../static/images/logo-black-text.svg";
+import authBg from "../../static/images/auth-bg.svg";
+
const Layout = styled.div.attrs({
className: "min-h-screen w-screen bg-black flex",
})`
- background-image: url(/images/auth-bg.svg);
+ background-image: url(${authBg});
background-repeat: no-repeat;
background-position: center center;
`;
@@ -36,7 +39,7 @@ const AuthLayout =
-
+
{children}
diff --git a/packages/dashboard-v2/src/layouts/DashboardLayout.js b/packages/dashboard-v2/src/layouts/DashboardLayout.js
index 633057eb..8ac7c393 100644
--- a/packages/dashboard-v2/src/layouts/DashboardLayout.js
+++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js
@@ -7,10 +7,12 @@ import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user";
import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
+import dashboardBg from "../../static/images/dashboard-bg.svg";
+
const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden",
})`
- background-image: url(/images/dashboard-bg.svg);
+ background-image: url(${dashboardBg});
background-position: center -280px;
background-repeat: no-repeat;
`;
diff --git a/packages/dashboard-v2/src/pages/settings/developer-settings.js b/packages/dashboard-v2/src/pages/settings/developer-settings.js
index cb58ab51..3f1917c1 100644
--- a/packages/dashboard-v2/src/pages/settings/developer-settings.js
+++ b/packages/dashboard-v2/src/pages/settings/developer-settings.js
@@ -10,6 +10,8 @@ import { AddSponsorKeyForm } from "../../components/forms/AddSponsorKeyForm";
import { Metadata } from "../../components/Metadata";
import HighlightedLink from "../../components/HighlightedLink";
+import apiKeysImg from "../../../static/images/api-keys.svg";
+
const DeveloperSettingsPage = () => {
const { data: allKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys");
const apiKeys = allKeys.filter(({ public: isPublic }) => isPublic === "false");
@@ -103,7 +105,7 @@ const DeveloperSettingsPage = () => {
-
+
>
diff --git a/packages/dashboard-v2/src/pages/settings/export.js b/packages/dashboard-v2/src/pages/settings/export.js
index 437f2b2f..aeb8aed3 100644
--- a/packages/dashboard-v2/src/pages/settings/export.js
+++ b/packages/dashboard-v2/src/pages/settings/export.js
@@ -6,6 +6,8 @@ import { Switch } from "../../components/Switch";
import { Button } from "../../components/Button";
import { Metadata } from "../../components/Metadata";
+import exportImg from "../../../static/images/import-export.svg";
+
const useExportOptions = () => {
const [pinnedFiles, setPinnedFiles] = useState(false);
const [uploadHistory, setUploadHistory] = useState(false);
@@ -65,7 +67,7 @@ const ExportPage = () => {
-
+
>
diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
index fc109d5c..5467f3a5 100644
--- a/packages/dashboard-v2/src/pages/settings/notifications.js
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@@ -1,11 +1,12 @@
import * as React from "react";
-import { StaticImage } from "gatsby-plugin-image";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
import { Switch } from "../../components/Switch";
import { Metadata } from "../../components/Metadata";
+import inboxImg from "../../../static/images/inbox.svg";
+
const NotificationsPage = () => {
return (
<>
@@ -37,8 +38,8 @@ const NotificationsPage = () => {
-
-
+
+
>