diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js index 973b9941..33c3bc2a 100644 --- a/packages/dashboard-v2/src/components/Slider/Slider.js +++ b/packages/dashboard-v2/src/components/Slider/Slider.js @@ -40,7 +40,8 @@ const Slider = ({ slides, breakpoints, scrollerClassName, className }) => { ); React.useEffect(() => { - const maxIndex = slides.length - visibleSlides; + // Prevent negative values for activeIndex. + const maxIndex = Math.max(slides.length - visibleSlides, 0); // Make sure to not scroll too far when screen size changes. if (activeIndex > maxIndex) { diff --git a/packages/dashboard-v2/src/pages/upgrade.js b/packages/dashboard-v2/src/pages/upgrade.js index 894c8273..8e47472e 100644 --- a/packages/dashboard-v2/src/pages/upgrade.js +++ b/packages/dashboard-v2/src/pages/upgrade.js @@ -10,13 +10,11 @@ import { Panel } from "../components/Panel"; import Slider from "../components/Slider/Slider"; import { CheckmarkIcon } from "../components/Icons"; import { Button } from "../components/Button"; +import { usePortalSettings } from "../contexts/portal-settings"; +import { Alert } from "../components/Alert"; +import HighlightedLink from "../components/HighlightedLink"; -const SLIDER_BREAKPOINTS = [ - { - name: "xl", - scrollable: true, - visibleSlides: 4, - }, +const PAID_PORTAL_BREAKPOINTS = [ { name: "lg", scrollable: true, @@ -33,6 +31,15 @@ const SLIDER_BREAKPOINTS = [ }, ]; +const FREE_PORTAL_BREAKPOINTS = [ + { + name: "xl", + scrollable: true, + visibleSlides: 4, + }, + ...PAID_PORTAL_BREAKPOINTS, +]; + const PlanSummaryItem = ({ children }) => (
This Skynet portal requires a paid subscription.
+
+ If you're not ready for that yet, you can use your account on{" "}
+