more UI polish, added other fields to metadata form

src/components/Board.js

@@ -6,7 +6,7 @@ import { shortenAddress } from '../utils/orbitdb';
 import moment from 'moment'
 
 export default function Board({ address, posts, metadata, replicating, stats, replicationInfo, lastReplicated }) {
-    const { email, website, title } = metadata || {}
+    const { email, website, title, description } = metadata || {}
     const peerCount = (stats.peers || []).length
     const online = peerCount > 0
     const writeable = stats.access ? (stats.access.writeable ? 'Yes' : 'No') : '?'
@@ -24,6 +24,7 @@ export default function Board({ address, posts, metadata, replicating, stats, re
                 <Header.Content>{title || 'Unnamed Board'}</Header.Content>
                 <Header.Subheader>Board</Header.Subheader>
             </Header>
+            { description ? <p>{description}</p> : null }
             <Divider />
             <List relaxed>
                 <List.Item>
@@ -75,7 +76,7 @@ export default function Board({ address, posts, metadata, replicating, stats, re
                     <List.Icon name='globe' size="large" verticalAlign="middle"/>
                     <List.Content>
                         <List.Header>Website</List.Header>
-                        <List.Content>{website ? <a href={website}>{website}</a> : 'N/A'}</List.Content>
+                        <List.Content>{website ? <a href={website} target="__blank">{website}</a> : 'N/A'}</List.Content>
                     </List.Content>
                 </List.Item>
                 <List.Item>

src/components/BoardEditorForm.js

@@ -1,16 +1,19 @@
 import React, { Component } from 'react'
 import { Icon, Container, Card, Form, Button } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
 
 export default class BoardEditorForm extends Component {
     constructor(props){
         super(props)
         this.state = {
-            title: props.title || ''
+            title: props.title || '',
+            website: props.website || '',
+            email: props.email || ''
         }
     }
 
     render() {
-        const { title } = this.state
+        const { title, website, email } = this.state
         const { address, updateBoardMetadata } = this.props
         return <Container>
             <Card fluid centered style={{marginTop:'5em',maxWidth:'40em'}}>
@@ -33,9 +36,31 @@ export default class BoardEditorForm extends Component {
                                 onChange={this.updateTitle.bind(this)}
                             />
                         </Form.Field>
-                        <Button fluid onClick={() => updateBoardMetadata(address, this.state)}>
-                            <Icon name="save"/> Save
-                        </Button>
+                        <Form.Group fluid widths="equal">
+                            <Form.Field>
+                                <label>Website</label>
+                                <input
+                                    value={website}
+                                    onChange={this.updateWebsite.bind(this)}
+                                />
+                            </Form.Field>
+                            <Form.Field>
+                                <label>Email</label>
+                                <input
+                                    value={email}
+                                    type="email"
+                                    onChange={this.updateEmail.bind(this)}
+                                />
+                            </Form.Field>
+                        </Form.Group>
+                        <div className="ui two buttons">
+                            <Button as={Link} to={'/'}>
+                                <Icon name="arrow left"/> Back
+                            </Button>
+                            <Button type="submit" onClick={() => updateBoardMetadata(address, this.state)}>
+                                <Icon name="save"/> Save
+                            </Button>
+                        </div>
                     </Form>
                 </Card.Content>
             </Card>
@@ -46,4 +71,14 @@ export default class BoardEditorForm extends Component {
         const title = event.target.value
         this.setState({ title })
     }
+
+    updateWebsite(event) {
+        const website = event.target.value
+        this.setState({ website })
+    }
+
+    updateEmail(event) {
+        const email = event.target.value
+        this.setState({ email })
+    }
 }

src/components/OpenBoardForm.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Container, Card, Form, Button } from 'semantic-ui-react'
+import { Icon, Container, Card, Form, Button } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
 
 export default class OpenBoardForm extends Component {
     constructor(props){
@@ -38,7 +39,14 @@ export default class OpenBoardForm extends Component {
                                 onChange={this.updateAddress.bind(this)}
                             />
                         </Form.Field>
-                        <Button fluid onClick={() => openBoard({ address })}>Open</Button>
+                        <div className="ui two buttons">
+                            <Button as={Link} to={'/'}>
+                                <Icon name="arrow left"/> Back
+                            </Button>
+                            <Button type="submit" onClick={() => openBoard({ address })}>
+                                <Icon name="plus"/> Open
+                            </Button>
+                        </div>
                     </Form>
                 </Card.Content>
             </Card>

src/containers/BoardEditor.js

@@ -13,14 +13,13 @@ function BoardEditor({ boards, boardEditor, match, updateBoardMetadata }) {
         board={board}
         address={address}
         updateBoardMetadata={updateBoardMetadata}
-        {...boardEditor}
+        {...board.metadata}
     />
 }
 
 function mapStateToProps(state){
     return {
-        boards: state.boards.boards,
-        boardEditor: state.boardEditor
+        boards: state.boards.boards
     }
 }