clarify wording in PublishOptions

Author: ShMcK

lib/components/Publish/PublishOptions.js

@@ -20,9 +20,15 @@ var FlatButton_1 = require('material-ui/FlatButton');
 var RaisedButton_1 = require('material-ui/RaisedButton');
 var actions_1 = require('../../actions');
 var styles = {
+    dialog: {
+        textAlign: 'center',
+    },
     cancel: {
         float: 'right',
     },
+    note: {
+        float: 'left',
+    },
 };
 var PublishOptionsModal = (function (_super) {
     __extends(PublishOptionsModal, _super);
@@ -36,13 +42,23 @@ var PublishOptionsModal = (function (_super) {
     PublishOptionsModal.prototype.render = function () {
         var _a = this.props, open = _a.open, handleClose = _a.handleClose, version = _a.version, updated = _a.updated;
         return (React.createElement("div", null, 
-            React.createElement(Dialog_1.default, {title: "Current Version: " + version, modal: true, open: open, onRequestClose: handleClose}, 
-                !updated ? React.createElement("p", null, "Tutorial has not changed.") : null, 
-                "Select next version change:", 
+            React.createElement(Dialog_1.default, {style: styles.dialog, title: 'Publish Next Version', modal: true, open: open, onRequestClose: handleClose}, 
+                React.createElement("h2", null, 
+                    "Current: v", 
+                    version), 
+                !updated
+                    ? React.createElement("p", null, "Cannot publish. Tutorial has not changed.")
+                    : React.createElement("p", null, "Describe the semver change:"), 
+                React.createElement("br", null), 
                 React.createElement(FlatButton_1.default, {label: 'Patch', primary: true, disabled: !updated, onTouchTap: this.publish.bind(this, 'patch')}), 
                 React.createElement(FlatButton_1.default, {label: 'Minor', disabled: !updated, onTouchTap: this.publish.bind(this, 'minor')}), 
                 React.createElement(FlatButton_1.default, {label: 'Major', disabled: !updated, onTouchTap: this.publish.bind(this, 'major')}), 
                 React.createElement("br", null), 
+                React.createElement("br", null), 
+                React.createElement("p", {style: styles.note}, 
+                    "What is ", 
+                    React.createElement("a", {href: 'http://semver.org/'}, "semver"), 
+                    "?"), 
                 React.createElement(RaisedButton_1.default, {style: styles.cancel, label: 'Cancel', secondary: true, onTouchTap: handleClose}))
         ));
     };

src/components/Publish/PublishOptions.tsx

@@ -6,9 +6,15 @@ import RaisedButton from 'material-ui/RaisedButton';
 import {tutorialPublish} from '../../actions';
 
 const styles = {
+  dialog: {
+    textAlign: 'center',
+  },
   cancel: {
     float: 'right',
   },
+  note: {
+    float: 'left',
+  },
 };
 
 @connect(state => ({
@@ -29,15 +35,20 @@ export default class PublishOptionsModal extends React.Component<{
     return (
       <div>
         <Dialog
-          title={`Current Version: ${version}`}
+          style={styles.dialog}
+          title='Publish Next Version'
           modal={true}
           open={open}
           onRequestClose={handleClose}
         >
+          <h2>Current: v{version}</h2>
           {/* Note if tutorial has not changed */}
-          {!updated ? <p>Tutorial has not changed.</p> : null}
+          {!updated
+            ? <p>Cannot publish. Tutorial has not changed.</p>
+            : <p>Describe the semver change:</p>
+          }
 
-          Select next version change:
+          <br />
           <FlatButton
             label='Patch'
             primary={true}
@@ -54,7 +65,10 @@ export default class PublishOptionsModal extends React.Component<{
             disabled={!updated}
             onTouchTap={this.publish.bind(this, 'major')}
           />
-          <br/>
+          <br/><br />
+          <p style={styles.note}>
+            What is <a href='http://semver.org/'>semver</a>?
+          </p>
           <RaisedButton
             style={styles.cancel}
             label='Cancel'