From 8487eadb44487f7c1d0cf2429fd8053afd471921 Mon Sep 17 00:00:00 2001 From: Caleb Denio Date: Mon, 8 Jul 2024 12:26:32 -0400 Subject: [PATCH] Clear out various React warnings (#1271) --- components/footer.js | 2 +- components/force-theme.js | 5 ++++- components/index/cards/button.js | 2 +- components/index/cards/card-model.js | 2 +- components/index/cards/clubs.js | 1 - components/index/github.js | 1 - components/nav.js | 8 ++++++-- components/react-tooltip.js | 7 +++++++ pages/index.js | 20 ++++++++++---------- 9 files changed, 30 insertions(+), 18 deletions(-) create mode 100644 components/react-tooltip.js diff --git a/components/footer.js b/components/footer.js index 76afb92a..75e91991 100644 --- a/components/footer.js +++ b/components/footer.js @@ -5,7 +5,7 @@ import NextLink from 'next/link' import theme from '@hackclub/theme' import Icon from './icon' -const Base = styled(Box)` +const Base = styled(Box, { shouldForwardProp: prop => prop !== "dark" })` background: ${props => props.dark ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)` diff --git a/components/force-theme.js b/components/force-theme.js index b5b54409..5f374e1b 100644 --- a/components/force-theme.js +++ b/components/force-theme.js @@ -1,8 +1,11 @@ +import { useEffect } from 'react' import { useColorMode } from 'theme-ui' const ForceTheme = ({ theme }) => { const [colorMode, setColorMode] = useColorMode() - setColorMode(theme) + useEffect(() => { + setColorMode(theme) + }, []) return null } diff --git a/components/index/cards/button.js b/components/index/cards/button.js index 792aedd5..7201113e 100644 --- a/components/index/cards/button.js +++ b/components/index/cards/button.js @@ -1,6 +1,6 @@ import React from 'react' import { Box, Button, Text } from 'theme-ui' -import ReactTooltip from 'react-tooltip' +import ReactTooltip from '../../react-tooltip' import Icon from '@hackclub/icons' export default function Buttons({ diff --git a/components/index/cards/card-model.js b/components/index/cards/card-model.js index ed1e9e0e..f3c0cb7e 100644 --- a/components/index/cards/card-model.js +++ b/components/index/cards/card-model.js @@ -1,7 +1,7 @@ import Icon from '../../icon' import { Box, Card, Flex, Image, Link, Text } from 'theme-ui' import { Zoom } from 'react-reveal' -import ReactTooltip from 'react-tooltip' +import ReactTooltip from '../../react-tooltip' import Comma from '../../comma' /** @jsxImportSource theme-ui */ diff --git a/components/index/cards/clubs.js b/components/index/cards/clubs.js index fe035e25..5df58bb7 100644 --- a/components/index/cards/clubs.js +++ b/components/index/cards/clubs.js @@ -2,7 +2,6 @@ import React, { useState } from 'react' import Buttons from './button' import CardModel from './card-model' import { Box, Grid, Flex, Image, Text } from 'theme-ui' -import ReactTooltip from 'react-tooltip' /** @jsxImportSource theme-ui */ diff --git a/components/index/github.js b/components/index/github.js index 1e6b77e9..e1eeba5b 100644 --- a/components/index/github.js +++ b/components/index/github.js @@ -5,7 +5,6 @@ export default function GitHub({ type, img, user, - key, text, time, message, diff --git a/components/nav.js b/components/nav.js index 8ba6a3ee..4c5c49e9 100644 --- a/components/nav.js +++ b/components/nav.js @@ -41,7 +41,9 @@ const fixed = props => } ` -const Root = styled(Box)` +const Root = styled(Box, { + shouldForwardProp: prop => !['bgColor', 'scrolled', 'toggled'].includes(prop) +})` position: fixed; top: 0; width: 100vw; @@ -113,7 +115,9 @@ const layout = props => } } ` -const NavBar = styled(Box)` +const NavBar = styled(Box, { + shouldForwardProp: prop => !['isMobile', 'toggled'].includes(prop) +})` display: none; ${layout}; a { diff --git a/components/react-tooltip.js b/components/react-tooltip.js new file mode 100644 index 00000000..ea73af25 --- /dev/null +++ b/components/react-tooltip.js @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic' + +const ReactTooltip = dynamic(() => import('react-tooltip'), { + ssr: false +}) + +export default ReactTooltip diff --git a/pages/index.js b/pages/index.js index 30c8fcf2..b1674a8a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -203,7 +203,7 @@ function Page({ priority gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))" /> - theme.util.gx('red', 'orange'), - '-webkit-background-clip': 'text', - '-webkit-text-fill-color': 'transparent' + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent' }} > joy of code @@ -411,15 +411,15 @@ function Page({ count === images.length - 2 ? images[0].src : images.length - 1 - ? images[1].src - : images[count + 2].src + ? images[1].src + : images[count + 2].src } alt={ count === images.length - 2 ? images[0].alt : images.length - 1 - ? images[1].alt - : images[count + 2].alt + ? images[1].alt + : images[count + 2].alt } width={3000} height={2550} @@ -924,8 +924,8 @@ function Page({ ml: 0, whiteSpace: ['wrap', 'nowrap'], background: theme => theme.util.gx('red', 'orange'), - '-webkit-background-clip': 'text', - '-webkit-text-fill-color': 'transparent' + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent' }} > Hack Club