Skip to content

Commit 6ad6e66

Browse files
maxwoffordmaxwofford
authored
Merge branch 'main' into onboard_gallery
2 parents b156119 + 0da52d8 commit 6ad6e66

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1242
-772
lines changed

‎.github/workflows/caniuse-update.yml

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: Update Browserslist database
2+
3+
on:
4+
workflow_dispatch:
5+
schedule:
6+
- cron: '0 2 1,15 * *'
7+
8+
permissions:
9+
contents: write
10+
pull-requests: write
11+
12+
jobs:
13+
update-browserslist-database:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- name: Checkout repository
17+
uses: actions/checkout@v4
18+
with:
19+
fetch-depth: 0
20+
- name: Configure git
21+
run: |
22+
git config --global user.email "[email protected]"
23+
git config --global user.name "GitHub Action"
24+
- name: Update Browserslist database and create PR if applies
25+
uses: c2corg/browserslist-update-action@v2
26+
with:
27+
github_token: ${{ secrets.GITHUB_TOKEN }}
28+
branch: browserslist-update
29+
base_branch: main
30+
commit_message: 'build: update Browserslist db'
31+
title: 'build: update Browserslist db'
32+
body: Auto-generated by [browserslist-update-action](https://github.com/c2corg/browserslist-update-action/). Caniuse database has been updated. Review changes, merge this PR, and be merry.

‎.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "none",
4+
"arrowParens": "avoid",
5+
"printWidth": 80,
6+
"semi": false
7+
}

‎components/bio.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import Icon from '@hackclub/icons'
33
import { useState } from 'react'
44

55
export default function Bio({ popup = true, spanTwo = false, ...props }) {
6-
let { img, name, teamRole, pronouns, text, subrole, href, video } = props
6+
let { img, name, teamRole, pronouns, text, subrole, email, href, video } =
7+
props
78
const [expand, setExpand] = useState(false)
89
return (
910
<>
@@ -94,6 +95,13 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
9495
)}
9596
</Text>
9697
</Flex>
98+
{!popup && email && (
99+
<Text color="muted" as={'a'} href={`mailto:${email}@hackclub.com`}>
100+
{email}@hackclub.com
101+
<br />
102+
</Text>
103+
)}
104+
97105
{!popup && (
98106
<>
99107
<Text mt={2} mb={0} color="black">

‎components/fiscal-sponsorship/apply/checkbox.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useEffect, useState } from 'react'
2+
import Icon from '../../icon'
3+
import { useRouter } from 'next/router'
4+
5+
export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
6+
const [checked, setChecked] = useState(defaultChecked)
7+
const toggle = () => setChecked(!checked)
8+
const router = useRouter()
9+
10+
/* Fill in the field with the value from sessionStorage.
11+
For other input elements, the value is set in the Field component,
12+
but these checkboxes hold their state in useState rather than in the DOM. */
13+
useEffect(() => {
14+
const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
15+
if (value) {
16+
const input = document.getElementById(name)
17+
input && setChecked(!!value)
18+
}
19+
}, [router.query, name])
20+
21+
return (
22+
<>
23+
<input aria-hidden="true" type="hidden" value={checked} name={name} />
24+
<Icon
25+
glyph={checked ? 'checkmark' : 'checkbox'}
26+
size={size}
27+
id={name}
28+
name={name}
29+
aria-checked={checked}
30+
role="checkbox"
31+
tabindex="0"
32+
onClick={() => toggle()}
33+
onKeyDown={e => e.key === 'Enter' && toggle()}
34+
/>
35+
</>
36+
)
37+
}

‎components/fiscal-sponsorship/apply/org-form.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react'
22
import { Input, Select, Textarea } from 'theme-ui'
3-
// import Checkbox from './checkbox'
3+
import Checkbox from './checkbox'
44
import Field from './field'
55
// This is using country-list instead of country-list-js as it has a smaller bundle size
66
import { getNames } from 'country-list'
@@ -54,10 +54,10 @@ export default function OrganizationInfoForm({ requiredFields }) {
5454
))}
5555
</Select>
5656
</Field>
57-
{/* <Field
57+
<Field
5858
name="transparent"
5959
label="Transparency mode"
60-
col={false}
60+
col={true}
6161
description={`
6262
Transparent accounts’ balances and donations are public.
6363
You choose who has access to personal details.
@@ -67,7 +67,7 @@ export default function OrganizationInfoForm({ requiredFields }) {
6767
requiredFields={requiredFields}
6868
>
6969
<Checkbox defaultChecked={true} name="transparent" />
70-
</Field> */}
70+
</Field>
7171
<Field
7272
name="eventDescription"
7373
label={`Tell us about your ${org.toLowerCase()}`}

‎components/fiscal-sponsorship/apply/personal-form.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export default function PersonalInfoForm({ requiredFields }) {
8484
<div />
8585
<Field
8686
label="Your Hack Club Slack username"
87+
description="For teenagers only!"
8788
name="slackUsername"
8889
requiredFields={requiredFields}
8990
>
@@ -111,7 +112,7 @@ export default function PersonalInfoForm({ requiredFields }) {
111112
name="userPhone"
112113
id="userPhone"
113114
type="tel"
114-
placeholder="1-855-625-HACK"
115+
placeholder="+1 (844) 237 2290"
115116
/>
116117
</Field>
117118
<Field

‎components/fiscal-sponsorship/contact.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Icon from '../icon'
2+
import { Flex, Link, Text } from 'theme-ui'
3+
4+
const phoneNumber = '+1 (844) 237-2290'
5+
const phoneNumberUri = '+1-844-237-2290'
6+
const email = '[email protected]'
7+
8+
export default function ContactBanner({ sx }) {
9+
return (
10+
<Flex
11+
sx={{
12+
bg: 'sunken',
13+
color: 'slate',
14+
alignItems: 'center',
15+
p: 3,
16+
gap: [3, 2],
17+
...sx
18+
}}
19+
>
20+
<Icon
21+
glyph="message"
22+
sx={{ color: 'inherit', flexShrink: 0, my: -1 }}
23+
aria-hidden
24+
/>
25+
<Text
26+
sx={{
27+
textWrap: 'balance',
28+
a: { color: 'inherit', mx: '0.125em', whiteSpace: 'nowrap' }
29+
}}
30+
>
31+
Questions? Email <Link href={`mailto:${email}`}>{email}</Link>{' '}
32+
or&nbsp;call <Link href={`tel:${phoneNumberUri}`}>{phoneNumber}</Link>
33+
</Text>
34+
</Flex>
35+
)
36+
}

‎components/nav.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react'
22
import styled from '@emotion/styled'
33
import { css, keyframes } from '@emotion/react'
4-
import { Box, Container, Flex, Link, Text } from 'theme-ui'
4+
import { Box, Container, Flex, Link } from 'theme-ui'
55
import theme from '../lib/theme'
66
import Icon from './icon'
77
import Flag from './flag'
@@ -68,7 +68,7 @@ const hoverColor = name =>
6868
slate: 'black',
6969
black: 'slate',
7070
primary: 'error'
71-
}[name] || 'black')
71+
})[name] || 'black'
7272

7373
const slide = keyframes({
7474
from: { transform: 'translateY(-25%)', opacity: 0 },
@@ -198,13 +198,13 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
198198
const baseColor = dark
199199
? color || 'white'
200200
: color === 'white' && scrolled
201-
? 'black'
202-
: color
201+
? 'black'
202+
: color
203203
const toggleColor = dark
204204
? color || 'snow'
205205
: toggled || (color === 'white' && scrolled)
206-
? 'slate'
207-
: color
206+
? 'slate'
207+
: color
208208

209209
return (
210210
<Root

‎components/onboard/youtube-video.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useMemo } from "react"
2+
3+
const YoutubeVideo = ({
4+
'youtube-id': youtubeID = 'dQw4w9WgXcQ',
5+
list,
6+
title = "YouTube video player",
7+
width,
8+
height,
9+
}) => {
10+
const src = useMemo(() => {
11+
const url = new URL(`https://www.youtube.com/embed/${youtubeID}`)
12+
if (list) {
13+
url.searchParams.set('list', list)
14+
}
15+
return url
16+
}, [youtubeID, list])
17+
18+
const allowlist = [
19+
'accelerometer',
20+
'autoplay',
21+
'clipboard-write',
22+
'encrypted-media',
23+
'gyroscope',
24+
'picture-in-picture',
25+
'web-share',
26+
'fullscreen'
27+
].join('; ')
28+
29+
return (
30+
<iframe
31+
src={src}
32+
title={title}
33+
{...{ width, height }}
34+
frameborder="0"
35+
allow={allowlist}
36+
allowfullscreen>
37+
</iframe>
38+
)
39+
}
40+
41+
export default YoutubeVideo

‎components/slack/arrows.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { VisibilityContext } from 'react-horizontal-scrolling-menu'
2+
import { useContext } from 'react'
3+
import Icon from '@hackclub/icons'
4+
import { Box, Link } from 'theme-ui'
5+
6+
function Arrow({ direction, disabled, onClick }) {
7+
return (
8+
<Link
9+
onClick={onClick}
10+
sx={{
11+
borderRadius: 100,
12+
boxShadow: 'none',
13+
backgroundColor: 'black',
14+
padding: '8px',
15+
cursor: 'pointer',
16+
placeItems: 'center',
17+
display: 'flex',
18+
mr: 2,
19+
opacity: disabled ? '0.5' : '1',
20+
pointerEvents: disabled ? 'none' : 'auto',
21+
transition: 'opacity 0.3s ease'
22+
}}
23+
>
24+
<Icon
25+
glyph={direction === 'left' ? 'view-back' : 'view-forward'}
26+
size={32}
27+
color="white"
28+
/>
29+
</Link>
30+
)
31+
}
32+
33+
export function LeftArrow() {
34+
const { scrollPrev } =
35+
useContext(VisibilityContext)
36+
37+
const visibility = useContext(VisibilityContext)
38+
const isVisible = visibility.useIsVisible("first", false);
39+
40+
return (
41+
<Arrow direction="left" disabled={isVisible} onClick={() => scrollPrev()} />
42+
)
43+
}
44+
45+
export function RightArrow() {
46+
const { scrollNext } =
47+
useContext(VisibilityContext)
48+
49+
const visibility = useContext(VisibilityContext)
50+
const isVisible = visibility.useIsVisible("last", false);
51+
52+
return (
53+
<Arrow direction="right" disabled={isVisible} onClick={() => scrollNext()} />
54+
)
55+
}
56+
57+
export default function Arrows() {
58+
return (
59+
<Box
60+
sx={{
61+
display: 'flex',
62+
marginBottom: 32,
63+
position: 'relative',
64+
// this is v janky please ignore, thank you.
65+
ml: ['1rem', '1rem', '1rem', 'calc(50vw - 36.5rem)']
66+
}}
67+
>
68+
<div style={{ display: 'flex' }}>
69+
<LeftArrow /> <RightArrow />
70+
</div>
71+
</Box>
72+
)
73+
}

0 commit comments

Comments
 (0)