Fixed <Input> update bug

app/components/ResponsePane.js

@@ -67,7 +67,7 @@ class ResponsePane extends Component {
 
           <header className="pane__header"></header>
           <div className="pane__body pane__body--placeholder text-center pad">
-            <h1>Nothing Yet...</h1>
+            <h1>No responses yet...</h1>
             <p>Click the <em>Send</em> button to trigger a request</p>
           </div>
         </section>

app/components/base/Input.js

@@ -48,8 +48,16 @@ class Input extends Component {
   }
 
   shouldComponentUpdate (nextProps) {
+    if (nextProps.type !== this.props.type) {
+      return true;
+    }
+
     // Only update when we have to, or else the cursor will jump to the end.
-    return this.refs.input.value !== nextProps.value;
+    if (this.refs.input.value !== nextProps.value) {
+      return true;
+    }
+
+    return false;
   }
 
   focus () {

app/css/components/pane.scss

@@ -37,10 +37,12 @@
 
     h1 {
       color: $hl;
+      font-size: $font-size-xxl;
     }
 
     p {
       color: $hl-xxl;
+      font-size: $font-size-md;
     }
   }
 }

app/css/constants/dimensions.scss

@@ -14,6 +14,7 @@ $font-size-md: 1.0rem;
 $font-size-lg: 1.1rem;
 $font-size-xl: 1.3rem;
 $font-size-xxl: 1.6rem;
+$font-size-xxxl: 1.8rem;
 
 /* Wrapper */
 $line-height-md: 4rem;