diff --git a/components/announcement.js b/components/announcement.js index 57536346..a34c5e68 100644 --- a/components/announcement.js +++ b/components/announcement.js @@ -1,6 +1,7 @@ -import { Card, Text } from 'theme-ui' +import { Card, Text, Box } from 'theme-ui' import { keyframes } from '@emotion/react' import Icon from './icon' +import Image from 'next/image' const unfold = keyframes({ from: { transform: 'scaleY(0)' }, @@ -12,6 +13,8 @@ const Announcement = ({ copy, iconLeft, iconRight, + imgSrc, + imgAlt, color = 'accent', sx = {}, ...props @@ -48,6 +51,16 @@ const Announcement = ({ sx={{ mr: [2, 3], ml: 2, color, display: ['none', 'block'] }} /> )} + {imgSrc && ( + + {imgAlt} + + )} { + const value = + router.query[name] || sessionStorage.getItem('bank-signup-' + name) + if (value) { + const input = document.getElementById(name) + if (input) input.value = value + } + }, [router.query, name]) + + return ( + div': { + width: '100%' + }, + 'input, select, textarea': { + border: '1px solid', + borderColor: 'smoke', + outlineColor: 'blue', + '&:-webkit-autofill': { + boxShadow: '0 0 0 100px white inset !important', + WebkitTextFillColor: 'black !important' + } + } + }} + > + + {children} + {description && ( + + {description} + + )} + + ) +} diff --git a/components/fiscal-sponsorship/apply/form-container.js b/components/fiscal-sponsorship/apply/form-container.js new file mode 100644 index 00000000..d544335a --- /dev/null +++ b/components/fiscal-sponsorship/apply/form-container.js @@ -0,0 +1,39 @@ +import { forwardRef } from 'react' +import { Box, Container } from 'theme-ui' + +const formContainer = forwardRef(({ children, ...props }, ref) => { + return ( + + + {children} + + + ) +}) + +// https://stackoverflow.com/a/67993106/10652680 +formContainer.displayName = 'formContainer' +export default formContainer diff --git a/components/fiscal-sponsorship/apply/hcb-info.js b/components/fiscal-sponsorship/apply/hcb-info.js new file mode 100644 index 00000000..55312a94 --- /dev/null +++ b/components/fiscal-sponsorship/apply/hcb-info.js @@ -0,0 +1,66 @@ +import { Box, Link, Heading } from 'theme-ui' +import Icon from '../../icon' + +export default function HCBInfo() { + return ( + + + HCB is a{' '} + + fiscal sponsor + + + + + + HCB provides a financial platform. + + + HCB is not a bank. + + HCB is not for for-profits. +

+ If you’re looking to set up a for-profit entity, consider{' '} + + Stripe Atlas + + . +

+
+ ) +} diff --git a/components/hcb/apply/org-form.js b/components/fiscal-sponsorship/apply/org-form.js similarity index 64% rename from components/hcb/apply/org-form.js rename to components/fiscal-sponsorship/apply/org-form.js index f71c467d..c418b492 100644 --- a/components/hcb/apply/org-form.js +++ b/components/fiscal-sponsorship/apply/org-form.js @@ -1,15 +1,15 @@ import { useState, useEffect } from 'react' -import { Input, Textarea } from 'theme-ui' -import Checkbox from './checkbox' -import AddressInput from './address-input' +import { Input, Select, Textarea } from 'theme-ui' +// import Checkbox from './checkbox' import Field from './field' -import AutofillColourFix from './autofill-colour-fix' +// This is using country-list instead of country-list-js as it has a smaller bundle size +import { getNames } from 'country-list' export default function OrganizationInfoForm({ requiredFields }) { - const [org, setOrg] = useState('organization') + const [org, setOrg] = useState('Organization') useEffect(() => { - if (navigator.language === 'en-GB') setOrg('organisation') + if (navigator.language === 'en-GB') setOrg('Organisation') }, []) return ( @@ -23,7 +23,6 @@ export default function OrganizationInfoForm({ requiredFields }) { name="eventName" id="eventName" placeholder="Shelburne School Hackathon" - sx={{ ...AutofillColourFix }} /> - + - - + */}