From 596ef1dbc431632e9b52c5fc00c699f25a0ba283 Mon Sep 17 00:00:00 2001 From: Celeste Roselli <72556836+celesteroselli@users.noreply.github.com> Date: Tue, 27 Jan 2026 11:41:17 -0500 Subject: [PATCH] Team page redesign updated (#1786) --- components/arcade/prizes.js | 24 +- components/arcade/shop-component.js | 4 +- components/arcade/showcase/create-card.js | 2 +- components/arcade/showcase/project-add.js | 2 +- components/arcade/showcase/project-view.js | 11 +- components/bio.js | 36 +- components/boardbio.js | 239 ++ components/force-theme.js | 2 +- components/index/cards/blueprint.js | 2 +- components/replit/form.js | 1 + components/slack/join.js | 1 + components/slack/project.js | 1 + components/slack/quote.js | 2 +- pages/acknowledged.tsx | 110 + pages/api/arcade/hack-hour/inventory.js | 2 +- pages/api/arcade/shop.js | 2 +- pages/api/bin/rsvp.js | 2 +- pages/api/team.ts | 2 + pages/arcade/[userAirtableID]/shop.js | 6 +- pages/arcade/index.js | 15 +- pages/arcade/shop.js | 7 +- pages/arcade/showcase/login/[token].js | 38 +- pages/arcade/showcase/my.js | 19 +- .../showcase/project/[projectID]/edit.js | 3 +- .../showcase/project/[projectID]/index.js | 48 +- pages/arcade/showcase/vote.js | 46 +- pages/bin/gallery.js | 4 + pages/bin/prelaunch.js | 38 +- pages/fiscal-sponsorship/directory/index.js | 16 +- pages/team.tsx | 440 ++- public/team.json | 3431 +++++++++-------- 31 files changed, 2562 insertions(+), 1994 deletions(-) create mode 100644 components/boardbio.js create mode 100644 pages/acknowledged.tsx diff --git a/components/arcade/prizes.js b/components/arcade/prizes.js index 3e8b4d18..b32b4007 100644 --- a/components/arcade/prizes.js +++ b/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} /> - {stock <= 100 && stock != null && ( + {stock <= 100 && stock !== null && ( - {stock == 0 ? <>Sold out : <>Only {stock} left! } + {stock === 0 ? <>Sold out : <>Only {stock} left! } )} = 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'} = 2 - ? stock != 0 + ? stock !== 0 : null : null ) ? ( @@ -398,7 +398,7 @@ const Prizes = ({ ( hoursBalance ? hoursBalance / cost >= 1 - ? stock != 0 + ? stock !== 0 : null : null ) ? ( diff --git a/components/arcade/shop-component.js b/components/arcade/shop-component.js index 1fb7819a..8ae537e7 100644 --- a/components/arcade/shop-component.js +++ b/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) => ( a['Cost Hours'] - b['Cost Hours']) - .filter(item => (item['Stock'] == 0)) + .filter(item => (item['Stock'] === 0)) .map((item) => ( { <>
- + Create a card Create a card
diff --git a/components/arcade/showcase/project-add.js b/components/arcade/showcase/project-add.js index d2917190..573305bb 100644 --- a/components/arcade/showcase/project-add.js +++ b/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' }} /> diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js index c30a89bb..68102e29 100644 --- a/components/arcade/showcase/project-view.js +++ b/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 = ({ }} >

{title}

-

{description != 'Description Not Found' ? description : <>}

-

{user != 'User Not Found' ? <>By {user} : <>}

+

{description !== 'Description Not Found' ? description : <>}

+

{user !== 'User Not Found' ? <>By {user} : <>}

- {image != '' && ( + {image !== '' && (

diff --git a/components/bio.js b/components/bio.js index ac34f6bc..7273ae63 100644 --- a/components/bio.js +++ b/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 }) { } }} > - + {img && ( + + )} {name} diff --git a/components/boardbio.js b/components/boardbio.js new file mode 100644 index 00000000..80f6962b --- /dev/null +++ b/components/boardbio.js @@ -0,0 +1,239 @@ +import Icon from '@hackclub/icons' +import { useState } from 'react' +import { Avatar, Box, Card, Flex, Text } from 'theme-ui' + +export default function BoardBox({ popup = true, ...props }) { + const { img, name, teamRole, pronouns, text, subrole, email, href, video } = props + const [expand, setExpand] = useState(false) + + return ( + <> + { + if (text && popup) { + setExpand(true) + } + }} + > + {popup ? ( + <> + + {name} + + + {teamRole} + + {subrole && ( + + {subrole} + + )} + + + ) : ( + <> + + + + {name} + + + + + {teamRole} + + {subrole && ( + <> +
+ + {subrole} + + + )} + {pronouns && ( + + ({pronouns}) + + )} +
+
+ {email && + (email.includes('@') ? ( + + {email} +
+
+ ) : ( + + {email}@hackclub.com +
+
+ ))} + + {text} + + {video && ( + +