feat(save): move dummy form to component

app/components/DatasetSidebar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Action } from 'redux'
 import classNames from 'classnames'
 import moment from 'moment'
+import SaveForm from './SaveForm'
 
 import { WorkingDataset } from '../models/store'
 
@@ -192,17 +193,7 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = (props: Dat
           )
         }
       </div>
-      <form id='save-form'>
-        <div className='title'>
-          <input type='text' name='title' placeholder='Commit message' />
-        </div>
-        <div className='message'>
-          <textarea name='message' placeholder='Detailed description' />
-        </div>
-        <div className='submit'>
-          <input className='submit'type="submit" value="Submit" />
-        </div>
-      </form>
+      <SaveForm />
     </div>
   )
 }

app/components/SaveForm.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export default class SaveForm extends React.Component<{}> {
+  render () {
+    return (
+      <form id='save-form'>
+        <div className='title'>
+          <input type='text' name='title' placeholder='Commit message' />
+        </div>
+        <div className='message'>
+          <textarea name='message' placeholder='Detailed description' />
+        </div>
+        <div className='submit'>
+          <input className='submit'type="submit" value="Submit" />
+        </div>
+      </form>
+    )
+  }
+}

app/scss/_dataset.scss

@@ -238,37 +238,6 @@ $hover-highlight-color: #F6F8FA;
     padding: 6px;
     background-color: $hover-highlight-color;
   }
-
-  #save-form {
-    background-color: steelblue;
-    height: 180px;
-    display: flex;
-    flex-direction: column;
-    padding: 6px 0;
-
-    input, textarea {
-      width: 100%;
-    }
-
-    textarea {
-      vertical-align: top;
-      resize: none;
-      height: 100%
-    }
-
-    .title {
-      padding: $sidebar-item-padding;
-    }
-
-    .message {
-      flex-grow: 1;
-      padding: $sidebar-item-padding;
-    }
-
-    .submit {
-      padding: $sidebar-item-padding;
-    }
-  }
 }
 
 ////////////////////////////

app/scss/_saveform.scss

@@ -0,0 +1,33 @@
+// TODO import this
+$sidebar-item-padding:  6px 10px;
+
+#save-form {
+  background-color: steelblue;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+
+  input, textarea {
+    width: 100%;
+  }
+
+  textarea {
+    vertical-align: top;
+    resize: none;
+    height: 100%
+  }
+
+  .title {
+    padding: $sidebar-item-padding;
+  }
+
+  .message {
+    flex-grow: 1;
+    padding: $sidebar-item-padding;
+  }
+
+  .submit {
+    padding: $sidebar-item-padding;
+  }
+}

app/scss/style.scss

@@ -26,6 +26,7 @@
 @import "stylesheet";
 
 @import "dataset-list";
+@import "saveform";
 
 @import "dataset";
 @import "welcome";