form tweaks

src/components/atoms/Button.module.scss

@@ -66,6 +66,7 @@
     padding: 0;
     color: $brand-pink;
     font-size: $font-size-base;
+    font-family: inherit;
     box-shadow: none;
     cursor: pointer;
 }

src/data/meta.json

@@ -1,6 +1,6 @@
 {
-  "title": "Commons Marketplace",
-  "description": "",
+  "title": "Commons",
+  "description": "A marketplace to find and publish open data sets in the Ocean Network.",
   "company": "Ocean Protocol Foundation Ltd.",
   "social": [
     {

src/routes/Home.tsx

@@ -5,6 +5,8 @@ import Input from '../components/atoms/Form/Input'
 import Route from '../components/templates/Route'
 import styles from './Home.module.scss'
 
+import meta from '../data/meta.json'
+
 interface HomeState {
     search?: string
 }
@@ -19,8 +21,8 @@ class Home extends Component<HomeProps, HomeState> {
     public render() {
         return (
             <Route
-                title="Commons"
-                description="A marketplace to find and publish open data sets in the Ocean Network."
+                title={meta.title}
+                description={meta.description}
                 className={styles.home}
             >
                 <Form onSubmit={this.searchAssets}>
@@ -28,7 +30,7 @@ class Home extends Component<HomeProps, HomeState> {
                         type="search"
                         name="search"
                         label="Search"
-                        placeholder=""
+                        placeholder="i.e. almond sales data"
                         value={this.state.search}
                         onChange={this.inputChange}
                         group={<Button>Search</Button>}

src/routes/Styleguide.module.scss

@@ -0,0 +1,6 @@
+.buttons {
+    > * {
+        display: block;
+        margin-bottom: 2rem;
+    }
+}

src/routes/Styleguide.tsx

@@ -3,7 +3,7 @@ import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
 import Route from '../components/templates/Route'
-
+import styles from './Styleguide.module.scss'
 import form from '../data/form-styleguide.json'
 
 class Styleguide extends Component {
@@ -24,12 +24,15 @@ class Styleguide extends Component {
     public render() {
         const entries = Object.entries(form.fields)
         return (
-            <Route title="Styleguide">
+            <Route title="Styleguide" className={styles.styleguide}>
+                <div className={styles.buttons}>
                     <Button>I am a button</Button>
                     <Button primary>I am a primary button</Button>
                     <Button href="https://hello.com">
                         I am a link disguised as a button
                     </Button>
+                    <Button link>I am a button disguised as a text link</Button>
+                </div>
 
                 <Form title={form.title} description={form.description}>
                     {this.formFields(entries)}