diff --git a/app/src/components/LearnSyntaxDialog.module.css b/app/src/components/LearnSyntaxDialog.module.css index c1c274a46..be2874bef 100644 --- a/app/src/components/LearnSyntaxDialog.module.css +++ b/app/src/components/LearnSyntaxDialog.module.css @@ -22,6 +22,7 @@ overflow: hidden; max-height: calc(100vh - 20%); grid-template-rows: auto minmax(0, 1fr) auto; + z-index: 51; } .close { diff --git a/app/src/components/LearnSyntaxDialog.tsx b/app/src/components/LearnSyntaxDialog.tsx index ed482d5d1..f5d6e1caa 100644 --- a/app/src/components/LearnSyntaxDialog.tsx +++ b/app/src/components/LearnSyntaxDialog.tsx @@ -89,14 +89,14 @@ export function LearnSyntaxDialog() { id="syntax-help-header" > - + Learn Syntax diff --git a/app/src/components/MightLoseSponsorTrigger.tsx b/app/src/components/MightLoseSponsorTrigger.tsx index b5a4bd426..28e159161 100644 --- a/app/src/components/MightLoseSponsorTrigger.tsx +++ b/app/src/components/MightLoseSponsorTrigger.tsx @@ -1,11 +1,11 @@ import { t, Trans } from "@lingui/macro"; -import * as Tooltip from "@radix-ui/react-tooltip"; +import * as Popover from "@radix-ui/react-popover"; import { Warning } from "phosphor-react"; import { useContext } from "react"; import { useIsLocalChart, useIsValidSponsor } from "../lib/hooks"; import { useRenameDialogStore } from "../lib/renameDialogStore"; -import { IconOutlineButton, tooltipContentProps } from "../ui/Shared"; +import { IconButton2, popoverContentProps } from "../ui/Shared"; import { AppContext } from "./AppContext"; export function MightLoseSponsorTrigger() { @@ -16,17 +16,17 @@ export function MightLoseSponsorTrigger() { if (!isValidSponsor) return null; if (!isLocal) return null; return ( - - - - - - - - + + + + + + + +

- {t`Heads up! Before you clear your cache, remember that this document isn't saved in the cloud.`} + {t`This is a temporary chart, it will be deleted when you clear your browser cache.`}

- - - + + + ); } diff --git a/app/src/components/MightLoseWarning.tsx b/app/src/components/MightLoseWarning.tsx index b31adcacc..157dc2889 100644 --- a/app/src/components/MightLoseWarning.tsx +++ b/app/src/components/MightLoseWarning.tsx @@ -1,12 +1,12 @@ import { Trans } from "@lingui/macro"; -import * as Tooltip from "@radix-ui/react-tooltip"; +import * as Popover from "@radix-ui/react-popover"; import { Warning } from "phosphor-react"; import { useContext } from "react"; import { Link } from "react-router-dom"; import { useIsValidCustomer } from "../lib/hooks"; import { track } from "../lib/track"; -import { IconOutlineButton, tooltipContentProps } from "../ui/Shared"; +import { IconButton2, popoverContentProps } from "../ui/Shared"; import { AppContext } from "./AppContext"; export function MightLoseWarning() { const isValidCustomer = useIsValidCustomer(); @@ -14,14 +14,14 @@ export function MightLoseWarning() { const showMightLoseWarning = !isValidCustomer && !customerIsLoading; if (!showMightLoseWarning) return null; return ( - - - - - - - - + + + + + + + +

This document is only saved on this computer. If you want a way to @@ -36,8 +36,8 @@ export function MightLoseWarning() { > Learn More - - - + + + ); } diff --git a/app/src/components/OnlyInEnglish.tsx b/app/src/components/OnlyInEnglish.tsx index 1400e4c52..332fd8c07 100644 --- a/app/src/components/OnlyInEnglish.tsx +++ b/app/src/components/OnlyInEnglish.tsx @@ -1,25 +1,25 @@ import { Trans } from "@lingui/macro"; -import * as Tooltip from "@radix-ui/react-tooltip"; +import * as Popover from "@radix-ui/react-popover"; import { Translate } from "phosphor-react"; -import { IconOutlineButton, tooltipContentProps } from "../ui/Shared"; +import { IconButton2, popoverContentProps } from "../ui/Shared"; /** * A warning message that a particular page is only available in English. */ export function OnlyInEnglish() { return ( - - - - - - - - + + + + + + + + Sorry! This page is only available in English. - - - + + + ); } diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx index 01a8c1363..4ba9368be 100644 --- a/app/src/components/Tabs/EditStyleTab.tsx +++ b/app/src/components/Tabs/EditStyleTab.tsx @@ -1,6 +1,6 @@ import { Trans } from "@lingui/macro"; import Editor from "@monaco-editor/react"; -import * as Tooltip from "@radix-ui/react-tooltip"; +import * as Popover from "@radix-ui/react-popover"; import produce from "immer"; import { Info } from "phosphor-react"; import postcssParser from "prettier/parser-postcss"; @@ -11,11 +11,7 @@ import { DISCORD_URL } from "../../lib/constants"; import { useLightOrDarkMode } from "../../lib/hooks"; import { useDoc } from "../../lib/useDoc"; import { useUnmountStore } from "../../lib/useUnmountStore"; -import { - Button2, - IconOutlineButton, - tooltipContentProps, -} from "../../ui/Shared"; +import { Button2, IconButton2, popoverContentProps } from "../../ui/Shared"; import { ThemePicker } from "../ThemePicker"; export function EditStyleTab() { @@ -167,14 +163,14 @@ function KeyboardKey({ children }: { children: ReactNode }) { function InfoButton() { return ( - - - - - - - - + + + + + + + +

Customize your theme by editing the Cytoscape CSS{" "} @@ -200,8 +196,8 @@ function InfoButton() { if you get stuck.

- - - + + + ); } diff --git a/app/src/ui/Shared.tsx b/app/src/ui/Shared.tsx index 9780a0db2..4842ab3be 100644 --- a/app/src/ui/Shared.tsx +++ b/app/src/ui/Shared.tsx @@ -1,3 +1,4 @@ +import { PopoverContentProps } from "@radix-ui/react-popover"; import { TooltipContentProps } from "@radix-ui/react-tooltip"; import * as RadixTooltip from "@radix-ui/react-tooltip"; import { HandWaving, Warning } from "phosphor-react"; @@ -183,6 +184,7 @@ export const Button2 = forwardRef< size = "sm", leftIcon, rightIcon, + isLoading, className = "", ...props }, @@ -196,8 +198,8 @@ export const Button2 = forwardRef< ${pSize[size]} ${focusClasses} ${className} `} {...props} - disabled={props.disabled || props.isLoading} - data-is-loading={props.isLoading} + disabled={props.disabled || isLoading} + data-is-loading={isLoading} ref={ref} > {leftIcon && ( @@ -213,7 +215,7 @@ export const Button2 = forwardRef< {rightIcon} )} - {props.isLoading && ( + {isLoading && ( ); } + +export const popoverContentClasses = `${tooltipPopoverContentShared} will-change-[transform,opacity] z-50 data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade`; +export const popoverContentProps: PopoverContentProps = { + sideOffset: 10, + className: popoverContentClasses, +}; diff --git a/app/src/ui/Typography.tsx b/app/src/ui/Typography.tsx index 3e4909719..43366cfe7 100644 --- a/app/src/ui/Typography.tsx +++ b/app/src/ui/Typography.tsx @@ -1,3 +1,4 @@ +import cx from "classnames"; import { ReactNode } from "react"; export const pageTitle = "text-2xl md:text-3xl font-extrabold"; @@ -13,15 +14,23 @@ export function PageTitle({ ); } -export const sectionTitle = - "text-lg md:text-xl font-bold pb-1 border-b dark:border-b-neutral-800"; +export const sectionTitle = "text-lg md:text-xl font-bold"; export function SectionTitle({ children, className = "", + isUnderline = true, ...props -}: { children: ReactNode } & React.HTMLAttributes) { +}: { + children: ReactNode; + isUnderline?: boolean; +} & React.HTMLAttributes) { return ( -

+

{children}

);