Merge branch 'main' into dependabot/npm_and_yarn/react-syntax-highlighter-16.1.0

Author: Ethan

.github/workflows/ci.yml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v6
       - run: yarn install
       - run: yarn lint

components/arcade/prizes.js

@@ -62,21 +62,21 @@ const Prizes = ({
           position: 'relative',
           transform: `rotate(${pRotate}deg)`,
           transitionDuration: '0.5s',
-          opacity: stock == 0 ? '0.5' : 1,
+          opacity: stock === 0 ? '0.5' : 1,
           '&:hover': {
-            transform: stock == 0 ? null : 'scale(1.1)',
-            cursor: stock == 0 ? 'default' : 'pointer'
+            transform: stock === 0 ? null : 'scale(1.1)',
+            cursor: stock === 0 ? 'default' : 'pointer'
           }
         }}
         onClick={e => {
           const div = e.currentTarget
           const quantity = div.querySelector('[id*="dropdown-"]')
           const buy = div.querySelector('#buy')
-          if (quantity === e.target || buy == e.target) {
+          if (quantity === e.target || buy === e.target) {
             console.log('TRUE')
             return
           } else {
-            stock != 0
+            stock !== 0
               ? document.getElementById(`${parsedFullName}-info`).showModal()
               : null
           }
@@ -98,7 +98,7 @@ const Prizes = ({
               alt={text}
             />
           </Flex>
-          {stock <= 100 && stock != null && (
+          {stock <= 100 && stock !== null && (
             <Text
               sx={{
                 background: '#CC6CE7',
@@ -113,7 +113,7 @@ const Prizes = ({
               variant="headline"
               className="gaegu"
             >
-              {stock == 0 ? <>Sold out</> : <>Only {stock} left! </>}
+              {stock === 0 ? <>Sold out</> : <>Only {stock} left! </>}
             </Text>
           )}
           <Text
@@ -161,7 +161,7 @@ const Prizes = ({
                 (
                   hoursBalance
                     ? hoursBalance / cost >= 2
-                      ? stock != 0
+                      ? stock !== 0
                       : null
                     : null
                 ) ? (
@@ -182,7 +182,7 @@ const Prizes = ({
                 (
                   hoursBalance
                     ? hoursBalance / cost >= 1
-                      ? stock != 0
+                      ? stock !== 0
                       : null
                     : null
                 ) ? (
@@ -289,7 +289,7 @@ const Prizes = ({
               variant="headline"
               className="gaegu"
             >
-              {cost} {cost == 1 ? 'ticket' : 'tickets'}
+              {cost} {cost === 1 ? 'ticket' : 'tickets'}
             </Text>
             <Flex
               sx={{
@@ -378,7 +378,7 @@ const Prizes = ({
                       (
                         hoursBalance
                           ? hoursBalance / cost >= 2
-                            ? stock != 0
+                            ? stock !== 0
                             : null
                           : null
                       ) ? (
@@ -398,7 +398,7 @@ const Prizes = ({
                       (
                         hoursBalance
                           ? hoursBalance / cost >= 1
-                            ? stock != 0
+                            ? stock !== 0
                             : null
                           : null
                       ) ? (

components/arcade/shop-component.js

@@ -77,7 +77,7 @@ export default function ShopComponent({
       >
         {availableItems
           .sort((a, b) => a['Cost Hours'] - b['Cost Hours'])
-          .filter(item => (item['Stock'] > 0 || item['Stock'] == null))
+          .filter(item => (item['Stock'] > 0 || item['Stock'] === null))
           .map((item) => (
             <Prizes
               img={item['Image URL']}
@@ -101,7 +101,7 @@ export default function ShopComponent({
           ))}
           {availableItems
           .sort((a, b) => a['Cost Hours'] - b['Cost Hours'])
-          .filter(item => (item['Stock'] == 0))
+          .filter(item => (item['Stock'] === 0))
           .map((item) => (
             <Prizes
               img={item['Image URL']}

components/arcade/showcase/create-card.js

@@ -7,7 +7,7 @@ const CreateCard = ({ createCardLink }) => {
     <>
     <a href={createCardLink} className={styles.linkWrapper} rel="noopener noreferrer">
       <div className={styles.card}>
-        <img src={img}/>
+        <img src={img} alt="Create a card" />
         Create a card
       </div>
     </a>

components/arcade/showcase/project-add.js

@@ -52,7 +52,7 @@ const NewProjectForm = ({ authToken }) => {
             success: 'Pulling repo data'
           }}
           sx={{
-            background: status == 'error' ? '#DE4E2B' : '#09AFB4',
+            background: status === 'error' ? '#DE4E2B' : '#09AFB4',
             borderRadius: '10px'
           }}
         />

components/arcade/showcase/project-view.js

@@ -66,6 +66,7 @@ const ProjectView = ({
   useEffect(() => {
     setDarkColor(darkenColor(color, 0.8))
     setInvertedColor(invertColor(textColor))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [color])
 
   // function convertToRawUrl(githubUrl) {
@@ -133,8 +134,8 @@ const ProjectView = ({
         }}
       >
         <h1 className="slackey">{title}</h1>
-        <h2>{description != 'Description Not Found' ? description : <></>}</h2>
-        <h3>{user != 'User Not Found' ? <>By {user}</> : <></>}</h3>
+        <h2>{description !== 'Description Not Found' ? description : <></>}</h2>
+        <h3>{user !== 'User Not Found' ? <>By {user}</> : <></>}</h3>
 
         <div
           className={styles.buttonGroup}
@@ -218,13 +219,13 @@ const ProjectView = ({
             display: 'grid',
             flexWrap: 'wrap',
             gridTemplateColumns:
-              screenshot != '' && video != ''
+              screenshot !== '' && video !== ''
                 ? ['1fr', '1fr 1fr', '1fr 1fr']
                 : '1fr',
             gap: '10px'
           }}
         >
-          {image != '' && (
+          {image !== '' && (
             <div
               sx={{
                 display: 'flex',
@@ -254,7 +255,7 @@ const ProjectView = ({
 
         <p
           className={styles.description}
-          sx={{ textAlign: screenshot.length != 1 ? 'center' : 'left' }}
+          sx={{ textAlign: screenshot.length !== 1 ? 'center' : 'left' }}
         >
           <ReadmeRenderer markdown={markdown} />
         </p>

components/bio.js

@@ -1,9 +1,9 @@
 import Icon from '@hackclub/icons'
 import { useState } from 'react'
-import { Avatar, Box, Card, Flex, Text } from 'theme-ui'
+import { Box, Card, Flex, Text } from 'theme-ui'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  const { img, name, teamRole, pronouns, text, subrole, email, href, video } =
+  const { name, teamRole, pronouns, text, subrole, email, href, video, img } =
     props
   const [expand, setExpand] = useState(false)
   return (
@@ -36,23 +36,21 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           }
         }}
       >
-        <Avatar
-          size={64}
-          width={64}
-          height={64}
-          mr={3}
-          src={img}
-          alt={name}
-          sx={{
-            overflow: 'hidden',
-            objectFit: 'cover',
-            transition: 'transform 0.125s ease-in-out',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
-            flexShrink: 0,
-            width: '64px',
-            height: '64px'
-          }}
-        />
+        {img && (
+          <Box
+            as="img"
+            src={img}
+            alt={name}
+            sx={{
+              width: 96,
+              height: 96,
+              minWidth: 96,
+              borderRadius: '50%',
+              objectFit: 'cover',
+              mr: 3
+            }}
+          />
+        )}
         <Box>
           <Text sx={{ fontSize: [3, 3, 3] }} variant="headline" color="black">
             {name}