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/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/templates/article/ShareModal.tsx b/packages/web/components/templates/article/ShareModal.tsx
index 4e3dea330..92e4ba257 100644
--- a/packages/web/components/templates/article/ShareModal.tsx
+++ b/packages/web/components/templates/article/ShareModal.tsx
@@ -102,49 +102,36 @@ export function ShareModalLayout(props: ShareModalLayoutProps): JSX.Element {
Secret URL
-
-
-
+ >
+
{switchOn && (