Clear out various React warnings (#1271)

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)`

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
 }
 

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

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 */

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 */
 

components/index/github.js

@@ -5,7 +5,6 @@ export default function GitHub({
   type,
   img,
   user,
-  key,
   text,
   time,
   message,

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 {

components/react-tooltip.js

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const ReactTooltip = dynamic(() => import('react-tooltip'), {
+  ssr: false
+})
+
+export default ReactTooltip

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))"
           />
-	  <Announcement
+          <Announcement
             width="90vw"
             copy="Build in public this summer!"
             caption="Get domains, breadboards & multimeters, and drawing tablets."
@@ -234,7 +234,7 @@ function Page({
             </Text>
             <Heading>
               <Text
-                as="h1"
+                as="p"
                 variant="title"
                 sx={{
                   color: 'white',
@@ -348,8 +348,8 @@ function Page({
                   whiteSpace: ['wrap', 'nowrap', 'nowrap'],
                   color: 'white',
                   background: theme => 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&nbsp;Club