diff --git a/apps/www/components/Panel/index.tsx b/apps/www/components/Panel/index.tsx index f88a5fb2b16..1b922bf5466 100644 --- a/apps/www/components/Panel/index.tsx +++ b/apps/www/components/Panel/index.tsx @@ -1,5 +1,6 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react' import { motion } from 'framer-motion' +import { detectBrowser } from 'common' interface Props { outerClassName?: string @@ -26,9 +27,10 @@ const Panel = ({ const outerRef = useRef(null) const innerRef = useRef(null) const trackCursor = hasShimmer || hasInnerShimmer + const isFirefox = typeof window !== 'undefined' && detectBrowser() === 'Firefox' const handleGlow = (event: any) => { - if (!trackCursor || !outerRef.current || !innerRef.current) return null + if (!outerRef.current || !innerRef.current) return null const outerElement = outerRef.current as HTMLDivElement const innerElement = innerRef.current as HTMLDivElement @@ -58,7 +60,7 @@ const Panel = ({ } useEffect(() => { - if (typeof window === 'undefined') return + if (typeof window === 'undefined' || !trackCursor) return window.addEventListener('mousemove', handleGlow) return () => { @@ -71,7 +73,7 @@ const Panel = ({ ref={outerRef} className={[ 'relative z-0 rounded-xl bg-gradient-to-b from-background-surface-300 to-scale-400 p-px shadow-md', - !trackCursor && hasActiveOnHover ? 'hover:bg-none hover:!bg-scale-700' : '', + (isFirefox || !trackCursor) && hasActiveOnHover ? 'hover:bg-none hover:!bg-scale-700' : '', outerClassName, ].join(' ')} whileHover="hover" diff --git a/apps/www/components/Products/DatabaseVisual.tsx b/apps/www/components/Products/DatabaseVisual.tsx index d935a32f934..b432578a64a 100644 --- a/apps/www/components/Products/DatabaseVisual.tsx +++ b/apps/www/components/Products/DatabaseVisual.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useRef, useState } from 'react' +import { detectBrowser } from 'common' const DatabaseVisual = () => { const containerRef = useRef(null) const ref = useRef(null) - const [isActive, setIsActive] = useState(false) const [gradientPos, setGradientPos] = useState({ x: 0, y: 0 }) + const isFirefox = typeof window !== 'undefined' && detectBrowser() === 'Firefox' const handleGlow = (event: any) => { if (!ref.current || !containerRef.current) return null @@ -22,9 +23,8 @@ const DatabaseVisual = () => { const isContainerHovered = xCont > -3 && xCont < containerWidth + 3 && yCont > -3 && yCont < containerHeight + 3 - setIsActive(isContainerHovered) - if (!isContainerHovered) return + if (!isContainerHovered || isFirefox) return const svgElement = ref.current as SVGElement const { x: svgX, y: svgY } = svgElement.getBoundingClientRect() @@ -34,7 +34,7 @@ const DatabaseVisual = () => { } useEffect(() => { - if (typeof window === 'undefined') return + if (typeof window === 'undefined' || isFirefox) return window.addEventListener('mousemove', handleGlow) return () => { @@ -42,6 +42,10 @@ const DatabaseVisual = () => { } }, []) + const gradientTransform = `translate(${ + isFirefox ? '150 150' : `${gradientPos?.x} ${gradientPos?.y}` + }) rotate(45) scale(166 180)` + return (
{ d="M0.183357 -10.5469L0.183377 446.906M14.1834 -10.5469L14.1834 446.906M28.1834 -10.5469L28.1834 446.906M42.1834 -10.5469L42.1834 446.906M56.1834 -10.5469L56.1835 446.906M70.1835 -10.5469L70.1835 446.906M84.1835 -10.5469L84.1835 446.906M98.1835 -10.5469L98.1835 446.906M112.184 -10.5469L112.184 446.906M126.184 -10.5469L126.184 446.906M140.184 -10.5469L140.184 446.906M154.184 -10.5469L154.184 446.906M168.184 -10.5469L168.184 446.906M182.184 -10.5469L182.184 446.906M196.184 -10.5469L196.184 446.906M210.184 -10.5469L210.184 446.906M224.184 -10.5469L224.184 446.906M238.184 -10.5469L238.184 446.906M252.184 -10.5469L252.184 446.906M266.184 -10.5469L266.184 446.906M280.184 -10.5469L280.184 446.906M294.184 -10.5469L294.184 446.906M308.184 -10.5469L308.184 446.906M322.184 -10.5469L322.184 446.906M336.184 -10.5469L336.184 446.906M350.184 -10.5469L350.184 446.906M364.184 -10.5469L364.184 446.906M378.184 -10.5469L378.184 446.906M392.184 -10.5469L392.184 446.906M457.341 -0.25H-0.11253M457.341 13.75H-0.11253M457.341 27.75H-0.112531M457.341 41.7501H-0.112532M457.341 55.7501H-0.112532M457.341 69.7501H-0.112533M457.341 83.7501H-0.112534M457.341 97.7501H-0.112534M457.341 111.75H-0.112535M457.341 125.75H-0.112535M457.341 139.75H-0.112536M457.341 153.75H-0.112537M457.341 167.75H-0.112537M457.341 181.75H-0.112538M457.341 195.75H-0.112538M457.341 209.75H-0.112539M457.341 223.75H-0.11254M457.341 237.75H-0.11254M457.341 251.75H-0.112541M457.341 265.75H-0.112541M457.341 279.75H-0.112542M457.341 293.75H-0.112543M457.341 307.75H-0.112543M457.341 321.75H-0.112544M457.341 335.751H-0.112545M457.341 349.751H-0.112545M457.341 363.751H-0.112546M457.341 377.751H-0.112546M457.341 391.751H-0.112547M457.341 405.751H-0.112548M457.341 419.751H-0.112548M457.341 433.751H-0.112549" stroke="#282828" /> - - - - - - - - - - - - + + + + { - + { - {isActive && ( - <> - - - - - - - {' '} - - - - - - - )} + + + + + + + + + + + + diff --git a/apps/www/components/Products/ProductCard.tsx b/apps/www/components/Products/ProductCard.tsx index 241527e0da0..4bc1a9e2d4c 100644 --- a/apps/www/components/Products/ProductCard.tsx +++ b/apps/www/components/Products/ProductCard.tsx @@ -1,6 +1,7 @@ import React from 'react' import Link from 'next/link' import Panel from '~/components/Panel' +import { detectBrowser } from 'common' const ProductCard = ({ className, @@ -22,60 +23,64 @@ const ProductCard = ({ className?: string onClick?: any alignLeft?: boolean -}) => ( - - - { + const isFirefox = typeof window !== 'undefined' && detectBrowser() === 'Firefox' + + return ( + + -
-
- {icon && ( - - - - )} +
+
+ {icon && ( + + + + )} +
+

{title}

+
+

{subtitle}

+ {highlights && {highlights}} +
-

{title}

-
-

{subtitle}

- {highlights && {highlights}} -
-
- {image} - - - -) + {image} + + + + ) +} export default ProductCard diff --git a/packages/common/helpers.ts b/packages/common/helpers.ts new file mode 100644 index 00000000000..5b8e307dfce --- /dev/null +++ b/packages/common/helpers.ts @@ -0,0 +1,11 @@ +export const detectBrowser = () => { + if (!navigator) return undefined + + if (navigator.userAgent.indexOf('Chrome') !== -1) { + return 'Chrome' + } else if (navigator.userAgent.indexOf('Firefox') !== -1) { + return 'Firefox' + } else if (navigator.userAgent.indexOf('Safari') !== -1) { + return 'Safari' + } +} diff --git a/packages/common/index.tsx b/packages/common/index.tsx index 30b9d33519f..56de36023d9 100644 --- a/packages/common/index.tsx +++ b/packages/common/index.tsx @@ -1,6 +1,7 @@ import SidebarLayout from './layouts/SidebarLayout' export * from './Providers' +export * from './helpers' export * from './hooks' export * from './gotrue' export * from './auth'