frontpage form tweaks, disable button based on input state

src/components/atoms/Form/Form.module.scss

@@ -13,6 +13,13 @@
     }
 }
 
+.formMinimal {
+    composes: form;
+    background: none;
+    padding: 0;
+    border: 0;
+}
+
 .formHeader {
     margin-bottom: $spacer;
 }

src/components/atoms/Form/Form.tsx

@@ -6,14 +6,20 @@ const Form = ({
     description,
     children,
     onSubmit,
+    minimal,
     ...props
 }: {
     title?: string
     description?: string
     children: any
     onSubmit?: any
+    minimal?: boolean
 }) => (
-    <form className={styles.form} onSubmit={onSubmit} {...props}>
+    <form
+        className={minimal ? styles.formMinimal : styles.form}
+        onSubmit={onSubmit}
+        {...props}
+    >
         {title && (
             <header className={styles.formHeader}>
                 <h1 className={styles.formTitle}>{title}</h1>

src/routes/Home.module.scss

@@ -2,6 +2,11 @@
 
 .home {
     display: block;
+
+    form {
+        margin-top: $spacer * 2;
+        margin-bottom: $spacer * 4;
+    }
 }
 
 .published {

src/routes/Home.tsx

@@ -26,15 +26,19 @@ class Home extends Component<HomeProps, HomeState> {
                 description={meta.description}
                 className={styles.home}
             >
-                <Form onSubmit={this.searchAssets}>
+                <Form onSubmit={this.searchAssets} minimal>
                     <Input
                         type="search"
                         name="search"
-                        label="Search"
+                        label="Search for data sets"
                         placeholder="i.e. almond sales data"
                         value={this.state.search}
                         onChange={this.inputChange}
-                        group={<Button>Search</Button>}
+                        group={
+                            <Button primary disabled={!this.state.search}>
+                                Search
+                            </Button>
+                        }
                     />
                 </Form>