Skip to content

Commit 4c79cf9

Browse files
garyhtougaryhtou
committed
Copy edit + Hide HCB info on mobile after first form step
1 parent 27aa406 commit 4c79cf9

File tree

4 files changed

+86
-94
lines changed

4 files changed

+86
-94
lines changed

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const formContainer = forwardRef(({ children, ...props }, ref) => {
1111
sx={{
1212
bg: 'snow',
1313
px: [3, 5],
14-
py: 5,
14+
py: [1, 5],
1515
minHeight: '100dvb',
1616
'&.has-errors div[aria-required="true"] input:placeholder-shown': {
1717
borderColor: 'primary'
@@ -33,9 +33,7 @@ const formContainer = forwardRef(({ children, ...props }, ref) => {
3333
px: 0
3434
}}
3535
>
36-
<MultiStepProvider>
37-
<TeenagerLedProvider>{children}</TeenagerLedProvider>
38-
</MultiStepProvider>
36+
<TeenagerLedProvider>{children}</TeenagerLedProvider>
3937
</Container>
4038
</Box>
4139
)

‎components/fiscal-sponsorship/apply/hcb-info.js

+13-22
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { Box, Link, Heading } from 'theme-ui'
22
import Icon from '../../icon'
3+
import { useMultiStepContext } from './multi-step-context'
4+
import { useEffect } from 'react'
35

46
export default function HCBInfo() {
7+
const { step } = useMultiStepContext()
8+
const firstStep = step === 0
9+
510
return (
611
<Box
712
sx={{
13+
display: firstStep ? 'block' : ['none', 'block'],
814
gridArea: 'info',
915
alignItems: 'start',
1016
mark: { color: '#ec555c', bg: 'inherit' },
@@ -30,6 +36,13 @@ export default function HCBInfo() {
3036
<ul>
3137
<li>Gives your project nonprofit status.</li>
3238
<li>Enables tax-deductible donations.</li>
39+
<li>
40+
HCB is not a bank. We partner partner with{' '}
41+
<Link href="https://column.com" target="_blank">
42+
Column N.A.
43+
</Link>{' '}
44+
to offer restricted funds to fiscally-sponsored projects.
45+
</li>
3346
</ul>
3447
<Heading variant="subheadline">
3548
HCB provides a financial platform.
@@ -40,28 +53,6 @@ export default function HCBInfo() {
4053
<li>Transfer money electronically.</li>
4154
<li>Order cards for you and your team to make purchases.</li>
4255
</ul>
43-
<Heading variant="subheadline">HCB is not a bank.</Heading>
44-
<ul>
45-
<li>
46-
We partner with{' '}
47-
<Link href="https://column.com" target="_blank">
48-
Column N.A.
49-
</Link>{' '}
50-
to offer restricted funds to fiscally-sponsored projects.
51-
</li>
52-
<li>
53-
You can't deposit or withdraw cash. But you can receive any kind of
54-
electronic payment!
55-
</li>
56-
</ul>
57-
<Heading variant="subheadline">HCB is not for for-profits.</Heading>
58-
<p>
59-
If you’re looking to set up a for-profit entity, consider{' '}
60-
<Link href="https://stripe.com/atlas" target="_blank">
61-
Stripe Atlas
62-
</Link>
63-
.
64-
</p>
6556
</Box>
6657
)
6758
}

‎components/fiscal-sponsorship/apply/teenager-or-adult-form.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function TeenagerOrAdultForm({ requiredFields }) {
2626
// NOTE: This depends on Field's useEffect hook to run first.
2727
const eventTeenagerLedElm = document.getElementById('eventTeenagerLed')
2828
setTeenagerLed(eventTeenagerLedElm.value)
29-
}, [])
29+
})
3030

3131
return (
3232
<>

‎pages/fiscal-sponsorship/apply/index.js

+70-67
Original file line numberDiff line numberDiff line change
@@ -8,84 +8,87 @@ import HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
88
import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
99
import ContactBanner from '../../../components/fiscal-sponsorship/contact'
1010
import ApplicationForm from '../../../components/fiscal-sponsorship/apply/application-form'
11+
import { MultiStepProvider } from '../../../components/fiscal-sponsorship/apply/multi-step-context'
1112

1213
export default function Apply() {
1314
return (
1415
<>
1516
<Meta as={Head} title="Apply for HCB" />
1617
<ForceTheme theme="light" />
1718

18-
<Grid
19-
columns={[null, null, 2]}
20-
sx={{
21-
gap: 0,
22-
width: '100%',
23-
minHeight: '100vh',
24-
alignItems: 'start'
25-
}}
26-
>
27-
<Flex
19+
<MultiStepProvider>
20+
<Grid
21+
columns={[null, null, 2]}
2822
sx={{
29-
flexDirection: 'column',
30-
px: [3, 5],
31-
py: 4,
32-
gap: 4,
33-
height: [null, '100svh'],
34-
position: [null, null, 'sticky'],
35-
top: 0,
36-
overflowY: [null, null, 'auto']
23+
gap: 0,
24+
width: '100%',
25+
minHeight: '100vh',
26+
alignItems: 'start'
3727
}}
3828
>
39-
{/* vertically align h1 to top of form */}
40-
<Box as="header" sx={{ mt: [null, 3], mb: 'auto' }}>
41-
<Link href="/fiscal-sponsorship" passHref legacyBehavior>
42-
<Text
43-
as="a"
44-
variant="subheadline"
45-
sx={{
46-
mb: 3,
47-
gap: 2,
48-
display: 'flex',
49-
alignItems: 'center',
50-
color: 'muted',
51-
textDecoration: 'none',
52-
':hover': { color: 'primary' }
53-
}}
54-
>
55-
<Icon
56-
size={24}
57-
glyph="inserter"
58-
style={{ transform: 'rotate(180deg)' }}
59-
/>
60-
Back
61-
</Text>
62-
</Link>
63-
<Heading as="h1" variant="title">
64-
Apply to join
65-
<br />
66-
<Flex sx={{ alignItems: 'center', gap: 3 }}>
67-
<img
68-
src="/fiscal-sponsorship/hcb-icon-small.png"
69-
width={48}
70-
height={48}
71-
alt="HCB logo"
72-
style={{
73-
width: '1em',
74-
height: '1em',
75-
verticalAlign: 'baseline'
29+
<Flex
30+
sx={{
31+
flexDirection: 'column',
32+
px: [3, 5],
33+
py: 4,
34+
gap: 4,
35+
height: [null, '100svh'],
36+
position: [null, null, 'sticky'],
37+
top: 0,
38+
overflowY: [null, null, 'auto']
39+
}}
40+
>
41+
{/* vertically align h1 to top of form */}
42+
<Box as="header" sx={{ mt: [null, 3], mb: 'auto' }}>
43+
<Link href="/fiscal-sponsorship" passHref legacyBehavior>
44+
<Text
45+
as="a"
46+
variant="subheadline"
47+
sx={{
48+
mb: 3,
49+
gap: 2,
50+
display: 'flex',
51+
alignItems: 'center',
52+
color: 'muted',
53+
textDecoration: 'none',
54+
':hover': { color: 'primary' }
7655
}}
77-
/>{' '}
78-
HCB
79-
</Flex>
80-
</Heading>
81-
</Box>
82-
<HCBInfo />
83-
<ContactBanner
84-
sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }}
85-
/>
86-
</Flex>
87-
<ApplicationForm />
88-
</Grid>
56+
>
57+
<Icon
58+
size={24}
59+
glyph="inserter"
60+
style={{ transform: 'rotate(180deg)' }}
61+
/>
62+
Back
63+
</Text>
64+
</Link>
65+
<Heading as="h1" variant="title">
66+
Apply to join
67+
<br />
68+
<Flex sx={{ alignItems: 'center', gap: 3 }}>
69+
<img
70+
src="/fiscal-sponsorship/hcb-icon-small.png"
71+
width={48}
72+
height={48}
73+
alt="HCB logo"
74+
style={{
75+
width: '1em',
76+
height: '1em',
77+
verticalAlign: 'baseline'
78+
}}
79+
/>{' '}
80+
HCB
81+
</Flex>
82+
</Heading>
83+
</Box>
84+
<HCBInfo />
85+
<ContactBanner
86+
sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }}
87+
/>
88+
</Flex>
89+
<ApplicationForm />
90+
</Grid>
91+
</MultiStepProvider>
8992
<Watermark />
9093
</>
9194
)

0 commit comments

Comments
 (0)