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 && (