diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index d468ca4d7..a9657642e 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -48,6 +48,7 @@ const StyledTriggerItem = styled(Trigger, {
export const DropdownContent = styled(Content, {
width: 195,
+ zIndex: 100,
backgroundColor: '$grayBg',
borderRadius: '6px',
outline: '1px solid #323232',
diff --git a/packages/web/components/elements/InfoLink.tsx b/packages/web/components/elements/InfoLink.tsx
index ded8f2c7d..391be830b 100644
--- a/packages/web/components/elements/InfoLink.tsx
+++ b/packages/web/components/elements/InfoLink.tsx
@@ -1,18 +1,11 @@
-import { Info } from 'phosphor-react'
import { VStack } from '../elements/LayoutPrimitives'
import { theme } from '../tokens/stitches.config'
-import { TooltipWrapped } from './Tooltip'
import { EditInfoIcon } from './icons/EditInfoIcon'
type InfoLinkProps = {
href: string
}
-const TooltipStyle = {
- backgroundColor: '#F9D354',
- color: '#0A0806',
-}
-
export function InfoLink(props: InfoLinkProps): JSX.Element {
return (
-
-
-
+
)
diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx
index 9f23377c4..42bd0d7cc 100644
--- a/packages/web/components/elements/MobileInstallHelp.tsx
+++ b/packages/web/components/elements/MobileInstallHelp.tsx
@@ -6,7 +6,6 @@ import {
} from 'phosphor-react'
import { Box, HStack } from '../elements/LayoutPrimitives'
import { StyledText, StyledAnchor } from '../elements/StyledText'
-import { TooltipWrapped } from './Tooltip'
const TooltipStyle = {
backgroundColor: '#F9D354',
@@ -234,51 +233,45 @@ export default function MobileInstallHelp({
}
>
{platformSizes.map((item, idx) => (
-
- setSelectedTooltip(item.label)}
css={{
- ml: '$1',
+ mx: 'auto',
+ borderRadius: '50%',
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: 35,
+ width: 35,
+ cursor: 'pointer',
+ backgroundColor: '$labelButtonsBg',
+ ...(selectedTooltip !== item.label && {
+ filter: 'grayscale(1)',
+ }),
+ '&:focus': {
+ filter: 'grayscale(0)',
+ },
+ '&:active': {
+ filter: 'grayscale(0)',
+ },
+ '@lg': {
+ transition: 'filter .3s linear',
+ '&:hover': {
+ filter: 'grayscale(0)',
+ },
+ },
}}
>
- setSelectedTooltip(item.label)}
- css={{
- mx: 'auto',
- borderRadius: '50%',
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- height: 35,
- width: 35,
- cursor: 'pointer',
- backgroundColor: '$labelButtonsBg',
- ...(selectedTooltip !== item.label && {
- filter: 'grayscale(1)',
- }),
- '&:focus': {
- filter: 'grayscale(0)',
- },
- '&:active': {
- filter: 'grayscale(0)',
- },
- '@lg': {
- transition: 'filter .3s linear',
- '&:hover': {
- filter: 'grayscale(0)',
- },
- },
- }}
- >
- {item.icon}
-
-
-
+ {item.icon}
+
+
))}
diff --git a/packages/web/components/elements/Tooltip.tsx b/packages/web/components/elements/Tooltip.tsx
deleted file mode 100644
index 69ff37a38..000000000
--- a/packages/web/components/elements/Tooltip.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { FC } from 'react'
-import { styled, keyframes } from '@stitches/react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-
-const slideUpAndFade = keyframes({
- '0%': { opacity: 0, transform: 'translateY(2px)' },
- '100%': { opacity: 1, transform: 'translateY(0)' },
-})
-
-const slideRightAndFade = keyframes({
- '0%': { opacity: 0, transform: 'translateX(-2px)' },
- '100%': { opacity: 1, transform: 'translateX(0)' },
-})
-
-const slideDownAndFade = keyframes({
- '0%': { opacity: 0, transform: 'translateY(-2px)' },
- '100%': { opacity: 1, transform: 'translateY(0)' },
-})
-
-const slideLeftAndFade = keyframes({
- '0%': { opacity: 0, transform: 'translateX(2px)' },
- '100%': { opacity: 1, transform: 'translateX(0)' },
-})
-
-const StyledContent = styled(TooltipPrimitive.Content, {
- borderRadius: 4,
- padding: '8px 13px',
- fontSize: 12,
- color: '#FFFFFF',
- backgroundColor: '#1C1C1E',
- '@media (prefers-reduced-motion: no-preference)': {
- animationDuration: '400ms',
- animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
- animationFillMode: 'forwards',
- willChange: 'transform, opacity',
- '&[data-state="delayed-open"]': {
- '&[data-side="top"]': { animationName: slideDownAndFade },
- '&[data-side="right"]': { animationName: slideLeftAndFade },
- '&[data-side="bottom"]': { animationName: slideUpAndFade },
- '&[data-side="left"]': { animationName: slideRightAndFade },
- },
- },
-})
-
-const StyledArrow = styled(TooltipPrimitive.Arrow, {
- fill: '#1C1C1E',
-})
-
-export const TooltipProvider = TooltipPrimitive.Provider
-export const Tooltip = TooltipPrimitive.Root
-export const TooltipTrigger = TooltipPrimitive.Trigger
-export const TooltipContent = StyledContent
-export const TooltipArrow = StyledArrow
-
-type TooltipWrappedProps = {
- children: React.ReactNode;
- tooltipContent: string;
- active?: boolean;
- tooltipSide?: TooltipPrimitive.TooltipContentProps['side']
- align?: TooltipPrimitive.TooltipContentProps['align']
- alignOffset?: TooltipPrimitive.TooltipContentProps['alignOffset']
- arrowStyles?: TooltipPrimitive.TooltipArrowProps['style']
- style?: TooltipPrimitive.TooltipContentProps['style']
-}
-
-const DefaultTooltipStyle = {
- backgroundColor: '#F9D354',
- color: '#0A0806',
-}
-
-const DefaultArrowStyle = {
- fill: '#F9D354'
-}
-
-export const TooltipWrapped: FC = ({
- children,
- active,
- tooltipContent,
- tooltipSide,
- arrowStyles,
- ...props
-}) => {
- return (
-
- {children}
-
- {tooltipContent}
-
-
-
- )
-}
diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index 44b86ee8f..a82a9677f 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -19,15 +19,8 @@ type ConfirmationModalProps = {
}
export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
- const safeOnOpenChange = useCallback(
- (open: boolean) => {
- document.body.style.removeProperty('pointer-events')
- props.onOpenChange(open)
- },
- [props]
- )
return (
-
+
diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
index 3d357749f..0aa8c1f46 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
@@ -50,6 +50,9 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
'0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
},
}}
+ onClick={(event) => {
+ event.stopPropagation()
+ }}
>
{switchOn && (