import React from 'react'
import { Box, Heading, Container, Card, Button } from '@hackclub/design-system'
import Helmet from 'react-helmet'
import Nav from 'components/Nav'
import SlackForm from 'components/SlackForm'

const Fill = Box.withComponent('main').extend`
  padding: 0 !important;
  background: url('/pattern.svg'), linear-gradient(-32deg, #3f46ad, #1c299d);
  min-height: 100vh;
`

const SlackCard = Card.extend`
  max-width: 24rem;
  &,
  input[type='email'] {
    background-color: rgba(255, 255, 255, 0.66);
  }
  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    -webkit-backdrop-filter: blur(4px);
  }
  label {
    color: #1c299d;
  }
  input[type='email']::placeholder,
  ~ a:last-child {
    color: #3f46ad;
  }
`

export default () => (
  <Fill color="white" align="center">
    <Helmet title="Join Our Slack – Hack Club" />
    <Nav color="white" />
    <Heading.h1 f={[5, 6]} mt={4} mb={2}>
      Join the Hack Club Slack
    </Heading.h1>
    <Heading.h2 f={[3, 4]} mb={4} regular>
      Talk to our community, get coding help, have fun.
    </Heading.h2>
    <SlackCard
      w={1}
      p={[3, 4]}
      boxShadowSize="md"
      align="left"
      my={4}
      mx="auto"
    >
      <SlackForm />
    </SlackCard>
    <Button href="https://slack.hackclub.com" inverted>
      Sign in to your account »
    </Button>
  </Fill>
)

@@ -368,25 +368,59 @@
 ;%0A  
-min-height: 100vh
+height: 100%25;%0A  max-height: 100vh;%0A  overflow: auto
 ;%0A%60%0A
@@ -919,24 +919,49 @@
 =%22white%22 /%3E%0A
+    %3CContainer px=%7B3%7D%3E%0A  
     %3CHeading
@@ -996,16 +996,18 @@
 %3E%0A      
+ 
+ 
 Join the
@@ -1023,24 +1023,26 @@
 b Slack%0A    
+  
 %3C/Heading.h1
@@ -1043,24 +1043,26 @@
 ing.h1%3E%0A    
+ 
+ 
 %3CHeading.h2 
@@ -1088,16 +1088,18 @@
 egular%3E%0A
+  
       Ta
@@ -1146,24 +1146,26 @@
 ve fun.%0A    
+  
 %3C/Heading.h2
@@ -1166,16 +1166,33 @@
 ing.h2%3E%0A
+    %3C/Container%3E%0A
     %3CSla

Fix spacing