more text!

components/slack/join-form.js

@@ -1,13 +1,13 @@
 import {
+  Box,
   Card,
-  Label,
-  Input,
-  Textarea,
-  Select,
   Grid,
-  Text,
+  Input,
+  Label,
   Link,
-  Box
+  Select,
+  Text,
+  Textarea
 } from 'theme-ui'
 import { useRouter } from 'next/router'
 import useForm from '../../lib/use-form'
@@ -139,17 +139,36 @@ const JoinForm = ({ sx = {} }) => {
         )}
 
         {!isAdult && (
-          <Submit
-            status={status}
-            mt={'0px!important'}
-            labels={{
-              default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
-              error: 'Something went wrong',
-              success: useWaitlist
-                ? "We'll be in touch soon!"
-                : 'Email coming soon!'
-            }}
-          />
+          <Box>
+            <Submit
+              status={status}
+              mt={'0px!important'}
+              labels={{
+                default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
+                error: 'Something went wrong',
+                success: useWaitlist
+                  ? "We'll be in touch soon!"
+                  : 'Check your email for invite!'
+              }}
+            />
+            {status === 'success' && (
+              <Text
+                variant="caption"
+                color="secondary"
+                as="div"
+                sx={{
+                  maxWidth: '600px',
+                  textAlign: 'center',
+                  mt: 3
+                }}
+              >
+                Check your spam folder too! Not there?{' '}
+                <Link href="mailto:slack@hackclub.com" sx={{ ml: 1 }}>
+                  Send us an email
+                </Link>
+              </Text>
+            )}
+          </Box>
         )}
       </form>
     </Card>