diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index 1b42f6155..4a1f7d711 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -8,6 +8,7 @@ import { } from "@floating-ui/react-dom-interactions"; import { Menu } from "@headlessui/react"; import clsx from "clsx"; +import Link from "next/link"; import * as React from "react"; import { transformOriginByPlacement } from "@/utils/constants"; @@ -82,30 +83,25 @@ export const DropdownItem: React.VoidFunctionComponent<{ href?: string; onClick?: React.MouseEventHandler; }> = ({ icon: Icon, label, onClick, disabled, href }) => { - const Element = href ? "a" : "button"; + const Element = href ? Link : "button"; return ( {({ active }) => ( - {Icon && ( - - )} + {Icon && } {label} )} diff --git a/src/components/icons/beaker.svg b/src/components/icons/beaker.svg new file mode 100644 index 000000000..b84a67ad2 --- /dev/null +++ b/src/components/icons/beaker.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/layouts/standard-layout/mobile-navigation.tsx b/src/components/layouts/standard-layout/mobile-navigation.tsx index c947220b4..6a4848843 100644 --- a/src/components/layouts/standard-layout/mobile-navigation.tsx +++ b/src/components/layouts/standard-layout/mobile-navigation.tsx @@ -1,11 +1,11 @@ import clsx from "clsx"; import { AnimatePresence } from "framer-motion"; -import Link from "next/link"; import { useTranslation } from "next-i18next"; import React from "react"; import { LoginLink } from "@/components/auth/login-modal"; import Adjustments from "@/components/icons/adjustments.svg"; +import Beaker from "@/components/icons/beaker.svg"; import Home from "@/components/icons/home.svg"; import Login from "@/components/icons/login.svg"; import Menu from "@/components/icons/menu.svg"; @@ -16,7 +16,10 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover"; import Preferences from "@/components/preferences"; import { useUser } from "@/components/user-provider"; +import Dropdown, { DropdownItem } from "../../dropdown"; import { Logo } from "../../logo"; +import { useModalContext } from "../../modal/modal-provider"; +import OpenBeta from "../../open-beta-modal"; import { UserDropdown } from "./user-dropdown"; export const MobileNavigation = (props: { className?: string }) => { @@ -24,6 +27,7 @@ export const MobileNavigation = (props: { className?: string }) => { const { t } = useTranslation(["common", "app"]); const [isPinned, setIsPinned] = React.useState(false); + const modalContext = useModalContext(); React.useEffect(() => { const scrollHandler = () => { @@ -51,8 +55,9 @@ export const MobileNavigation = (props: { className?: string }) => { )} >
- - + { - - - - - + } + > + + + + {process.env.NEXT_PUBLIC_BETA === "1" ? ( + <> + { + // open modal + modalContext.render({ + content: , + footer: null, + showClose: true, + overlayClosable: true, + }); + }} + label="Feedback" + icon={Beaker} + /> + + ) : null} +
{user ? null : ( @@ -121,36 +148,3 @@ export const MobileNavigation = (props: { className?: string }) => {
); }; - -const AppMenu: React.VoidFunctionComponent<{ className?: string }> = ({ - className, -}) => { - const { t } = useTranslation(["common", "app"]); - return ( -
- - - {t("app:home")} - - - - {t("app:createNew")} - - - - {t("common:support")} - -
- ); -}; diff --git a/src/components/logo.tsx b/src/components/logo.tsx index c7a47d88b..1eb3c93d3 100644 --- a/src/components/logo.tsx +++ b/src/components/logo.tsx @@ -3,7 +3,7 @@ import clsx from "clsx"; export const Logo = (props: { className?: string; color?: boolean }) => { const { color = true } = props; return ( - + { Rallly {process.env.NEXT_PUBLIC_BETA === "1" ? ( - + beta ) : null} diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 60dec557d..c757a4c8b 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -64,7 +64,7 @@ const Modal: React.VoidFunctionComponent = ({ initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.9 }} - className="relative z-50 my-8 inline-block max-w-full transform text-left align-middle" + className="relative z-50 m-3 inline-block max-w-full transform text-left align-middle sm:m-8" >
{showClose ? ( diff --git a/src/components/open-beta-modal.tsx b/src/components/open-beta-modal.tsx new file mode 100644 index 000000000..98f614d70 --- /dev/null +++ b/src/components/open-beta-modal.tsx @@ -0,0 +1,71 @@ +import { Logo } from "./logo"; + +const OpenBeta = () => { + return ( +
+
+ +
+
+
+

+ The open beta allows you to test out new features before they are + officially released to the general public. By participating you, + will have the opportunity to provide feedback and help shape the + future of Rallly! +

+
+
+

Feedback

+

+ +
+

Important

+

+ + You should not rely on the beta for any important data or + information. + +

+

+ The beta should be used exclusively for testing purposes. + Features, polls, accounts, or data may be removed at any time + without prior notice. +

+

+ Any data or information saved on the beta website cannot be + accessed on the production website and vice versa. +

+
+
+
+
+ ); +}; + +export default OpenBeta; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0560fa6b1..4b0ad69e0 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,7 +4,6 @@ import "~/style.css"; import { Inter, Noto_Sans_Mono } from "@next/font/google"; import { inject } from "@vercel/analytics"; -import { domAnimation, LazyMotion, m } from "framer-motion"; import { NextPage } from "next"; import { AppProps } from "next/app"; import Head from "next/head"; @@ -89,17 +88,7 @@ const MyApp: NextPage = ({ Component, pageProps }) => { --font-noto: ${noto.style.fontFamily}; } `} - - {getLayout( - - - , - )} - + {getLayout()} ); };