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 =
- Skynet + Skynet
{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 = () => { -
- +
+