ShareBoard WIP

webapp/src/components/modal.scss

@@ -1,7 +1,7 @@
 .Modal {
     position: absolute;
     top: 25px;
-    left: -200px;
+    left: -230px;
     z-index: 10;
 
 	min-width: 430px;

webapp/src/components/shareBoardComponent.scss

@@ -0,0 +1,13 @@
+.ShareBoardComponent {
+    display: flex;
+    flex-direction: column;
+
+    > .row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .spacer {
+        flex-grow: 1;
+    }
+}

webapp/src/components/shareBoardComponent.tsx

@@ -3,23 +3,54 @@
 import React from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
+import Button from '../widgets/buttons/button'
+import Switch from '../widgets/switch'
+
 import Modal from './modal'
+import './shareBoardComponent.scss'
 
 type Props = {
     onClose: () => void
     intl: IntlShape
 }
 
-class ShareBoardComponent extends React.PureComponent<Props> {
+type State = {
+    isShared?: boolean
+}
+
+class ShareBoardComponent extends React.PureComponent<Props, State> {
+    state: State = {}
+
     render(): JSX.Element {
+        const {intl} = this.props
+
         return (
             <Modal
                 onClose={this.props.onClose}
             >
-                {'TODO'}
+                <div className='ShareBoardComponent'>
+                    <div className='row'>
+                        <div>{intl.formatMessage({id: 'ShareBoard.share', defaultMessage: 'Publish to web and share this board to anyone'})}</div>
+                        <div className='spacer'/>
+                        <Switch
+                            isOn={Boolean(this.state.isShared)}
+                            onChanged={this.onShareChanged}
+                        />
+                    </div>
+                    {this.state.isShared &&
+                        <div className='row'>
+                            <Button>{'Copy link'}</Button>
+                        </div>
+                    }
+                </div>
             </Modal>
         )
     }
+
+    private onShareChanged = (isOn: boolean) => {
+        // TODO
+        this.setState({isShared: isOn})
+    }
 }
 
 export default injectIntl(ShareBoardComponent)