diff --git a/index.html b/index.html index b6d4c830c..7cdf8d195 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,10 @@ - + <%= appNameFull %> diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx index d8ed539ff..106184ec8 100644 --- a/src/components/ActionBar.tsx +++ b/src/components/ActionBar.tsx @@ -1,16 +1,18 @@ -import { BoxProps, HStack } from "@chakra-ui/react"; +import { BoxProps, HStack, StackProps } from "@chakra-ui/react"; import { ReactNode } from "react"; export interface ActionBarProps extends BoxProps { itemsLeft?: ReactNode; itemsCenter?: ReactNode; itemsRight?: ReactNode; + itemsLeftProps?: StackProps; } const ActionBar = ({ itemsLeft, itemsCenter, itemsRight, + itemsLeftProps, ...rest }: ActionBarProps) => { return ( @@ -20,10 +22,15 @@ const ActionBar = ({ justifyContent="space-between" bgColor="brand2.500" h="64px" + gap={0} minH="64px" {...rest} > - + {itemsLeft} {itemsCenter && {itemsCenter}} diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx index 559715961..6af0b277c 100644 --- a/src/components/AppLogo.tsx +++ b/src/components/AppLogo.tsx @@ -1,22 +1,19 @@ -import { As, Divider, HStack } from "@chakra-ui/react"; +import { Divider, HStack, StackProps } from "@chakra-ui/react"; import { useDeployment } from "../deployment"; -const AppLogo = ({ - color = "#FFF", - as, -}: { +interface AppLogoProps extends StackProps { color?: string; - beta?: boolean; - as?: As; -}) => { +} + +const AppLogo = ({ color = "#FFF", ...props }: AppLogoProps) => { const { AppLogo, OrgLogo } = useDeployment(); return ( {OrgLogo && ( <> diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx index 7d0e1f172..fc2015208 100644 --- a/src/components/DefaultPageLayout.tsx +++ b/src/components/DefaultPageLayout.tsx @@ -34,6 +34,7 @@ import ProjectDropTarget from "./ProjectDropTarget"; import SaveDialogs from "./SaveDialogs"; import SettingsMenu from "./SettingsMenu"; import ToolbarMenu from "./ToolbarMenu"; +import HelpMenuItems from "./HelpMenuItems"; interface DefaultPageLayoutProps { titleId?: string; @@ -93,9 +94,10 @@ const DefaultPageLayout = ({ spacing={0} bgColor="whitesmoke" > - + {showPageTitle && ( @@ -105,21 +107,41 @@ const DefaultPageLayout = ({ )} } - itemsLeft={toolbarItemsLeft || } + itemsLeft={ + toolbarItemsLeft || ( + + ) + } + itemsLeftProps={{ width: 0 }} itemsRight={ <> {toolbarItemsRight} - + + + {menuItems} + + + {/* Toolbar items when sm window size. */} {menuItems} + + } diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx index d13b3dcd4..81dd9bc92 100644 --- a/src/components/HelpMenu.tsx +++ b/src/components/HelpMenu.tsx @@ -1,42 +1,32 @@ import { Box, + BoxProps, IconButton, Menu, MenuButton, - MenuDivider, - MenuItem, MenuList, Portal, useDisclosure, } from "@chakra-ui/react"; import { useRef } from "react"; -import { MdOutlineCookie } from "react-icons/md"; -import { - RiExternalLinkLine, - RiFeedbackLine, - RiInformationLine, - RiQuestionLine, -} from "react-icons/ri"; -import { FormattedMessage, useIntl } from "react-intl"; -import FeedbackForm from "./FeedbackForm"; -import { useDeployment } from "../deployment"; +import { RiQuestionLine } from "react-icons/ri"; +import { useIntl } from "react-intl"; import AboutDialog from "./AboutDialog"; +import FeedbackForm from "./FeedbackForm"; +import HelpMenuItems from "./HelpMenuItems"; -interface HelpMenuProps { - isMobile?: boolean; -} +interface HelpMenuProps extends BoxProps {} /** * A help button that triggers a drop-down menu with actions. */ -const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => { +const HelpMenu = ({ ...rest }: HelpMenuProps) => { const aboutDialogDisclosure = useDisclosure(); const feedbackDisclosure = useDisclosure(); const intl = useIntl(); const MenuButtonRef = useRef(null); - const deployment = useDeployment(); return ( - + { onClose={feedbackDisclosure.onClose} finalFocusRef={MenuButtonRef} /> - + { /> - {deployment.supportLinks.main && ( - <> - } - > - - - } - onClick={feedbackDisclosure.onOpen} - > - - - - - )} - {deployment.termsOfUseLink && ( - } - > - - - )} - {deployment.privacyPolicyLink && ( - } - > - - - )} - {deployment.compliance.manageCookies && ( - } - > - - - )} - {(deployment.privacyPolicyLink || - deployment.compliance.manageCookies || - deployment.termsOfUseLink) && } - } - onClick={aboutDialogDisclosure.onOpen} - > - - + diff --git a/src/components/HelpMenuItems.tsx b/src/components/HelpMenuItems.tsx new file mode 100644 index 000000000..04ff25f88 --- /dev/null +++ b/src/components/HelpMenuItems.tsx @@ -0,0 +1,95 @@ +import { MenuDivider, MenuItem, useDisclosure } from "@chakra-ui/react"; +import { useRef } from "react"; +import { MdOutlineCookie } from "react-icons/md"; +import { + RiExternalLinkLine, + RiFeedbackLine, + RiInformationLine, +} from "react-icons/ri"; +import { FormattedMessage } from "react-intl"; +import { useDeployment } from "../deployment"; +import AboutDialog from "./AboutDialog"; +import FeedbackForm from "./FeedbackForm"; + +const HelpMenuItems = () => { + const aboutDialogDisclosure = useDisclosure(); + const feedbackDisclosure = useDisclosure(); + const MenuButtonRef = useRef(null); + const deployment = useDeployment(); + return ( + <> + + + {deployment.supportLinks.main && ( + <> + } + > + + + } + onClick={feedbackDisclosure.onOpen} + > + + + + + )} + {deployment.termsOfUseLink && ( + } + > + + + )} + {deployment.privacyPolicyLink && ( + } + > + + + )} + {deployment.compliance.manageCookies && ( + } + > + + + )} + {(deployment.privacyPolicyLink || + deployment.compliance.manageCookies || + deployment.termsOfUseLink) && } + } + onClick={aboutDialogDisclosure.onOpen} + > + + + + ); +}; + +export default HelpMenuItems; diff --git a/src/components/PercentageMeter.tsx b/src/components/PercentageMeter.tsx index 6139c433a..c366a951f 100644 --- a/src/components/PercentageMeter.tsx +++ b/src/components/PercentageMeter.tsx @@ -50,7 +50,6 @@ const PercentageMeter = ({ bgColor={i === 0 || i === numTicks + 1 ? undefined : "white"} w={0.5} h={height} - zIndex={1} /> )) } diff --git a/src/components/ToolbarMenu.tsx b/src/components/ToolbarMenu.tsx index 9a4b0a797..c363558c8 100644 --- a/src/components/ToolbarMenu.tsx +++ b/src/components/ToolbarMenu.tsx @@ -1,5 +1,6 @@ import { Box, + BoxProps, IconButton, Menu, MenuButton, @@ -9,9 +10,8 @@ import { import { ReactNode } from "react"; import { RiMenuLine } from "react-icons/ri"; -interface ToolbarMenuProps { +interface ToolbarMenuProps extends BoxProps { label: string; - isMobile?: boolean; children: ReactNode; icon?: JSX.Element; variant?: ThemeTypings["components"]["Menu"]["variants"]; @@ -22,12 +22,12 @@ const ToolbarMenu = ({ label, icon, children, - isMobile, variant, onDarkBackground = true, + ...props }: ToolbarMenuProps) => { return ( - + { > - +