Fix join form & update announcement

components/home/join-form.js

@@ -2,22 +2,15 @@ import { Card, Label, Input, Checkbox, Textarea } from 'theme-ui'
 import useForm from '../../lib/use-form'
 import Submit from '../submit'
 
-const JoinForm = () => {
+const JoinForm = ({ sx = {} }) => {
   const { status, formProps, useField } = useForm('/api/join')
 
   return (
     <Card
       sx={{
-        variant: 'cards.translucent',
         maxWidth: 'narrow',
         mx: 'auto',
-        label: {
-          display: 'flex',
-          flexDirection: 'column',
-          textAlign: 'left',
-          fontSize: 2,
-          mb: 3
-        }
+        ...sx
       }}
     >
       <form {...formProps}>

pages/index.js

@@ -10,7 +10,7 @@ import {
 } from 'theme-ui'
 import { keyframes } from '@emotion/core'
 import { Slide } from 'react-reveal'
-import NextLink from 'next/link'
+// import NextLink from 'next/link'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
@@ -135,14 +135,12 @@ export default () => (
       }}
     >
       <Container pt={[3, 4]} pb={[5, 6]}>
-        <NextLink href="/elon" passHref>
-          <Announcement
-            copy="Elon Musk has donated $500K!"
-            href="/elon"
-            iconLeft="announcement"
-            color="green"
-          />
-        </NextLink>
+        <Announcement
+          copy="Audrey Tang AMA @ 8pm ET"
+          href="https://events.hackclub.com/ama-with-audrey-tang"
+          iconLeft="event-check"
+          color="red"
+        />
         <Heading
           as="h1"
           variant="title"
@@ -534,7 +532,7 @@ export default () => (
         <Heading as="h2" variant="title" sx={{ fontSize: [5, 6, 7], mb: 4 }}>
           Join our Slack
         </Heading>
-        <JoinForm />
+        <JoinForm sx={{ bg: 'rgba(255,255,255,0.75)' }} />
       </Container>
     </Box>
     <Footer />

pages/slack.js

@@ -68,7 +68,7 @@ export default () => (
           Hack Club Slack
         </Heading>
         <SlideUp>
-          <JoinForm />
+          <JoinForm sx={{ variant: 'cards.translucent' }} />
         </SlideUp>
       </Container>
     </Box>
@@ -139,9 +139,7 @@ export default () => (
             gridColumn: ['span 2', 'span 6'],
             bg: 'blue',
             backgroundImage: theme => `radial-gradient(
-	ellipse farthest-corner at top left, ${theme.colors.cyan}, ${
-              theme.colors.blue
-            })`,
+	ellipse farthest-corner at top left, ${theme.colors.cyan}, ${theme.colors.blue})`,
             p: { color: 'smoke', fontSize: 2, mt: 1, lineHeight: 'caption' }
           }}
         >
@@ -180,15 +178,7 @@ export default () => (
           bg="red"
           sx={{
             backgroundImage: ({ colors }) =>
-              `linear-gradient(${colors.red} 0%, ${colors.red} 16.6666%, ${
-                colors.orange
-              } 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${
-                colors.yellow
-              } 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${
-                colors.blue
-              } 66.6666%, ${
-                colors.blue
-              } 83.3333%, #8067C3 83.3333%, #8067C3 100%)`
+              `linear-gradient(${colors.red} 0%, ${colors.red} 16.6666%, ${colors.orange} 16.6666%, ${colors.orange} 33.333%, ${colors.yellow} 33.333%, ${colors.yellow} 50%, ${colors.green} 50%, ${colors.green} 66.6666%, ${colors.blue} 66.6666%, ${colors.blue} 83.3333%, #8067C3 83.3333%, #8067C3 100%)`
           }}
         >
           <h3>#lgbtq</h3>