code tabs on whitelabel template editing.

formspree/js/forms/FormList.js

@@ -200,8 +200,8 @@ class FormItem extends React.Component {
             </Link>
           )}
         </td>
-        {form.features.whitelabel && (
-          <td>
+        <td>
+          {form.features.whitelabel && (
             <Link
               to={`/forms/${form.hashid}/whitelabel`}
               className="no-underline"
@@ -222,8 +222,8 @@ class FormItem extends React.Component {
                 </span>
               )}
             </Link>
-          </td>
-        )}
+          )}
+        </td>
         <td>
           <Link to={`/forms/${form.hashid}/settings`} className="no-underline">
             <span className="ion-gear-b" />

formspree/js/forms/FormPage/Integration.js

@@ -14,9 +14,10 @@ module.exports = class FormIntegration extends React.Component {
 
     this.changeTab = this.changeTab.bind(this)
 
+    this.availableTabs = ['HTML', 'AJAX']
+
     this.state = {
-      activeTab: 'HTML',
-      availableTabs: ['HTML', 'AJAX']
+      activeTab: 'HTML'
     }
   }
 
@@ -85,13 +86,13 @@ req.send(data)`
       <>
         <div className="col-1-1">
           <div className="container">
-            <div className="integration">
+            <div>
               <p>
                 Paste this code in your HTML, modifying it according to your
                 needs:
               </p>
-              <div className="integration-tabs">
-                {this.state.availableTabs.map(tabName => (
+              <div className="code-tabs">
+                {this.availableTabs.map(tabName => (
                   <div
                     key={tabName}
                     data-tab={tabName}

formspree/js/forms/FormPage/Whitelabel.js

@@ -2,6 +2,7 @@
 
 const toastr = window.toastr
 const fetch = window.fetch
+const cs = require('class-set')
 const React = require('react')
 const CodeMirror = require('react-codemirror2')
 const Modal = require('react-modal')
@@ -25,6 +26,7 @@ module.exports = class FormSettings extends React.Component {
     this.preview = this.preview.bind(this)
     this.showSyntax = this.showSyntax.bind(this)
     this.closeModal = this.closeModal.bind(this)
+    this.changeTab = this.changeTab.bind(this)
     this.attemptRevert = this.attemptRevert.bind(this)
     this.revert = this.revert.bind(this)
     this.deploy = this.deploy.bind(this)
@@ -55,10 +57,13 @@ module.exports = class FormSettings extends React.Component {
 <hr>`
     }
 
+    this.availableTabs = ['HTML', 'CSS']
+
     this.state = {
       changes: {},
       modal: null,
-      previewHTML: null
+      previewHTML: null,
+      activeTab: 'HTML'
     }
   }
 
@@ -71,6 +76,35 @@ module.exports = class FormSettings extends React.Component {
       ...this.state.changes
     }
 
+    var shownCode
+    switch (this.state.activeTab) {
+      case 'CSS':
+        shownCode = (
+          <CodeMirror.Controlled
+            value={style}
+            options={{
+              theme: 'oceanic-next',
+              mode: 'css',
+              viewportMargin: Infinity
+            }}
+            onBeforeChange={this.changeStyle}
+          />
+        )
+        break
+      case 'HTML':
+        shownCode = (
+          <CodeMirror.Controlled
+            value={body}
+            options={{
+              theme: 'oceanic-next',
+              mode: 'xml',
+              viewportMargin: Infinity
+            }}
+            onBeforeChange={this.changeBody}
+          />
+        )
+    }
+
     return (
       <>
         <div className="col-1-1" id="whitelabel">
@@ -102,69 +136,54 @@ module.exports = class FormSettings extends React.Component {
               </div>
             </div>
           </div>
-          <div className="container">
-            <label className="row">
-              <div className="col-1-1">Style</div>
-              <div className="col-1-1">
-                <CodeMirror.Controlled
-                  value={style}
-                  options={{
-                    theme: 'oceanic-next',
-                    mode: 'css',
-                    viewportMargin: Infinity
-                  }}
-                  onBeforeChange={this.changeStyle}
-                />
-              </div>
-            </label>
+          <div className="col-1-1">
+            <div className="row right">
+              <a href="#" onClick={this.showSyntax}>
+                syntax quick reference
+              </a>
+            </div>
           </div>
-          <div className="container">
-            <label className="row">
-              <div className="row">
-                <div className="col-1-2">Body</div>
-                <div className="col-1-2 right">
-                  <a href="#" onClick={this.showSyntax}>
-                    syntax quick reference
-                  </a>
+          <div className="row">
+            <div className="code-tabs">
+              {this.availableTabs.map(tabName => (
+                <div
+                  key={tabName}
+                  data-tab={tabName}
+                  onClick={this.changeTab}
+                  className={cs({active: this.state.activeTab === tabName})}
+                >
+                  {tabName}
                 </div>
-              </div>
-              <div className="col-1-1">
-                <CodeMirror.Controlled
-                  value={body}
-                  options={{
-                    theme: 'oceanic-next',
-                    mode: 'xml',
-                    viewportMargin: Infinity
-                  }}
-                  onBeforeChange={this.changeBody}
-                />
-              </div>
-            </label>
+              ))}
+            </div>
+            {shownCode}
           </div>
-          <div className="container">
-            <div className="col-1-6">
-              <button onClick={this.preview}>Preview</button>
-            </div>
-            <div className="col-2-3 right">
-              {Object.keys(this.state.changes).length > 0
-                ? 'changes pending'
-                : null}
-            </div>
-            <div className="col-1-6">
-              <button
-                onClick={this.attemptRevert}
-                disabled={Object.keys(this.state.changes).length === 0}
-              >
-                Revert
-              </button>
-            </div>
-            <div className="col-1-6">
-              <button
-                onClick={this.deploy}
-                disabled={Object.keys(this.state.changes).length === 0}
-              >
-                Deploy
-              </button>
+          <div className="row">
+            <div className="container">
+              <div className="col-1-6">
+                <button onClick={this.preview}>Preview</button>
+              </div>
+              <div className="col-2-3 right">
+                {Object.keys(this.state.changes).length > 0
+                  ? 'changes pending'
+                  : null}
+              </div>
+              <div className="col-1-6">
+                <button
+                  onClick={this.attemptRevert}
+                  disabled={Object.keys(this.state.changes).length === 0}
+                >
+                  Revert
+                </button>
+              </div>
+              <div className="col-1-6">
+                <button
+                  onClick={this.deploy}
+                  disabled={Object.keys(this.state.changes).length === 0}
+                >
+                  Deploy
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -258,6 +277,11 @@ module.exports = class FormSettings extends React.Component {
     )
   }
 
+  changeTab(e) {
+    e.preventDefault()
+    this.setState({activeTab: e.target.dataset.tab})
+  }
+
   changeFromName(e) {
     let value = e.target.value
     this.setState(state => {

formspree/scss/dashboard.scss

@@ -125,7 +125,7 @@
     font-size: 20px;
   }
 
-  .integration-tabs {
+  .code-tabs {
     & > * {
       display: inline-block;
       cursor: pointer;