Give the app a little bit of styling (#58)

* Add yarn.lock cause it's the new hotness * Update styling to make it a little friendlier to use
skevy · Apr 10, 2017 · 2eabebd · 2eabebd
1 parent a250477
commit 2eabebd
Show file tree

Hide file tree

Showing 6 changed files with 5,472 additions and 93 deletions.
diff --git a/app/app.css b/app/app.css
@@ -1,11 +1,11 @@
 .clearfix:after {
-     visibility: hidden;
-     display: block;
-     font-size: 0;
-     content: " ";
-     clear: both;
-     height: 0;
-     }
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
 .clearfix { display: inline-block; }
 /* start commented backslash hack \*/
 * html .clearfix { height: 1%; }
@@ -109,48 +109,64 @@ body {
   flex: 1;
 }
 
-.config-form {
-  padding: 12px;
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+/* Pure.css overrides */
+.pure-form {
+  margin: 1em 0.2em;
 }
 
-.field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0 12px;
+.pure-form label {
+  margin: .5em 0.5em .2em;
 }
 
-.endpoint-box {
-  flex: 1;
+/* Button customization */
+.button-success,
+.button-error,
+.button-warning,
+.button-secondary {
+  color: white;
+  border-radius: 2px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
-.endpoint-box input {
-  flex: 1;
-  width: 100%;
+.button-success {
+  background: rgb(28, 184, 65); /* this is a green */
 }
 
-.endpoint-box label {
-  text-align: center;
+.button-error {
+  background: rgb(202, 60, 60); /* this is a maroon */
+}
+
+.button-warning {
+  background: rgb(223, 117, 20); /* this is an orange */
+}
+
+.button-secondary {
+  background: rgb(66, 184, 221); /* this is a light blue */
+}
+
+.pure-table {
+  border-left: 0px;
+  border-right: 0px;
+  border-bottom: 0px;
+}
+
+.pure-table thead {
+  background-color: white;
+}
+
+.pure-table th {
+  border-top: 1px solid #eceeef;
 }
 
-@media (max-width: 700px) {
-  .endpoint-box {
-    width: 100%;
-    flex: initial;
-    margin-bottom: 15px;
-  }
+.pure-table-horizontal tr {
+  border-top: 1px solid #eceeef;
 }
 
-.field label {
-  margin-right: 20px;
+.pure-table thead th {
+  border-bottom: 2px solid #eceeef;
 }
 
-.field input, .field select {
-  height: 25px;
-  padding: 5px;
-  font-weight: bold;
-  font-size: 20px;
+.edit-headers-button {
+  margin-left: 1em;
+  float: right;
 }
diff --git a/app/app.html b/app/app.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>GraphiQL</title>
-    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
     <link rel="stylesheet" href="../dist/main.css" />
   </head>
   <body>

diff --git a/app/components/App.js b/app/components/App.js
@@ -251,23 +251,25 @@ export default class App extends React.Component {
     const { currentTabIndex } = this.state;
     const tabEl = (
       <div key={currentTabIndex} className="tabs__tab">
-        <div className="config-form clearfix">
-          <div className="field endpoint-box">
-            <label htmlFor="endpoint">GraphQL Endpoint</label>
-            <input type="text" name="endpoint"
-              value={currentTab.endpoint} onChange={this.handleChange.bind(this, 'endpoint')} />
+        <form className="pure-form">
+          <div className="fieldset">
+            <div className="pure-control-group">
+              <label htmlFor="endpoint">GraphQL Endpoint</label>
+              <input type="text" className="pure-input-1-2" name="endpoint" value={currentTab.endpoint} onChange={this.handleChange.bind(this, 'endpoint')} placeholder="GraphQL Endpoint" />
+
+              <a href="javascript:;" className="pure-button pure-button-primary edit-headers-button" onClick={this.openHeaderEdit}>Edit HTTP Headers</a>
+
+              <div className="pure-control-group" style={{float: 'right'}}>
+                <label htmlFor="method">Method</label>
+
+                <select name="method" value={currentTab.method} onChange={this.handleChange.bind(this, 'method')}>
+                  <option value="get">GET</option>
+                  <option value="post">POST</option>
+                </select>
+              </div>
+            </div>
           </div>
-          <div className="field">
-            <label htmlFor="method">Method</label>
-            <select name="method" value={currentTab.method} onChange={this.handleChange.bind(this, 'method')}>
-              <option value="get">GET</option>
-              <option value="post">POST</option>
-            </select>
-          </div>
-          <div className="field headers">
-            <a href="javascript:;" onClick={this.openHeaderEdit}>Edit HTTP Headers</a>
-          </div>
-        </div>
+        </form>
         <div className="graphiql-wrapper">
           {
             // THIS IS THE GROSSEST THING I'VE EVER DONE AND I HATE IT. FIXME ASAP

diff --git a/app/components/HTTPHeaderEditor.js b/app/components/HTTPHeaderEditor.js
@@ -108,8 +108,10 @@ export default class HTTPHeaderEditor extends React.Component {
         <td>{header.key}</td>
         <td>{header.value.length > 40 ? header.value.substr(0, 40) + '...' : header.value}</td>
         <td>
-          <button onClick={() => this.editRow(i)}>Edit</button>
-          <button onClick={() => this.removeRow(i)}>&times;</button>
+          <div className="pure-button-group" style={{float: 'right'}} role={`edit-header-${header.key}-group`} aria-label={`Edit ${header.key}`}>
+            <button className="pure-button button-secondary" onClick={() => this.editRow(i)}>Edit</button>
+            <button className="pure-button button-error" onClick={() => this.removeRow(i)}>Delete</button>
+          </div>
         </td>
       </tr>
     )
@@ -119,26 +121,32 @@ export default class HTTPHeaderEditor extends React.Component {
     return (
       <tr key={`editing-row-${i}`}>
         <td>
-          <input
-            ref={(c) => (this[`editingRow${i}KeyInput`] = c)}
-            type="text"
-            placeholder="Header Key"
-            defaultValue={header.key}
-            style={{ width: '100%' }}
-          />
+          <form className="pure-form" style={{margin: '0px'}}>
+            <input
+              ref={(c) => (this[`editingRow${i}KeyInput`] = c)}
+              type="text"
+              placeholder="Header name"
+              defaultValue={header.key}
+              style={{ width: '100%' }}
+            />
+          </form>
         </td>
         <td>
-          <input
-            ref={(c) => (this[`editingRow${i}ValueInput`] = c)}
-            type="text"
-            placeholder="Header Value"
-            defaultValue={header.value}
-            style={{ width: '100%' }}
-          />
+          <form className="pure-form" style={{margin: '0px'}}>
+            <input
+              ref={(c) => (this[`editingRow${i}ValueInput`] = c)}
+              type="text"
+              placeholder="Header value"
+              defaultValue={header.value}
+              style={{ width: '100%' }}
+            />
+          </form>
         </td>
         <td>
-          <button onClick={() => this.completeEdit(i)}>&#x2713;</button>
-          <button onClick={() => this.cancelEdit(i)}>&times;</button>
+          <div className="pure-button-group" style={{float: 'right'}} role={`edit-header-${header.key}-group`} aria-label={`Edit ${header.key}`}>
+            <button className="pure-button button-success" onClick={() => this.completeEdit(i)}>Save</button>
+            <button className="pure-button button-error" onClick={() => this.cancelEdit(i)}>Cancel</button>
+          </div>
         </td>
       </tr>
     )
@@ -151,39 +159,45 @@ export default class HTTPHeaderEditor extends React.Component {
       addHeader = (
         <tr>
           <td>
-            <input
-              ref={(c) => (this.newKeyInput = c)}
-              type="text"
-              placeholder="Header Key"
-              style={{ width: '100%' }}
-            />
+            <form className="pure-form" style={{margin: '0px'}}>
+              <input
+                ref={(c) => (this.newKeyInput = c)}
+                type="text"
+                placeholder="Header name"
+                style={{ width: '100%' }}
+              />
+            </form>
           </td>
           <td>
-            <input
-              ref={(c) => (this.newValInput = c)}
-              type="text"
-              placeholder="Header Value"
-              style={{ width: '100%' }}
-            />
+            <form className="pure-form" style={{margin: '0px'}}>
+              <input
+                ref={(c) => (this.newValInput = c)}
+                type="text"
+                placeholder="Header value"
+                style={{ width: '100%' }}
+              />
+            </form>
           </td>
           <td>
-            <button onClick={this.completeAdd}>&#x2713;</button>
-            <button onClick={this.cancelAdd}>&times;</button>
+            <div className="pure-button-group" style={{float: 'right'}} role={`create-new-header-group`} aria-label={`Create new header`}>
+              <button className="pure-button button-success" onClick={this.completeAdd}>Save</button>
+              <button className="pure-button button-error" onClick={this.cancelAdd}>Cancel</button>
+            </div>
           </td>
         </tr>
       )
     }
 
     return (
       <div className="headerEditor">
-        <h2>Edit HTTP Headers</h2>
+        <h2 style={{float: 'left'}}>Edit HTTP Headers</h2>
+        <a href="javascript:;" style={{float: 'right', margin: '1.24em'}} onClick={this.addHeader} className="pure-button pure-button-primary">+ Add Header</a>
         <div>
-          <a href="javascript:;" onClick={this.addHeader}>+ Add Header</a>
-          <table className="pure-table pure-table-striped" style={styles.table}>
+          <table className="pure-table pure-table-horizontal" style={styles.table}>
             <thead>
               <tr>
-                <th>Key</th>
-                <th>Value</th>
+                <th>Header name</th>
+                <th>Header value</th>
                 <th></th>
               </tr>
             </thead>

diff --git a/app/hot-dev-app.html b/app/hot-dev-app.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-  	<meta charset="utf-8">
+    <meta charset="utf-8">
     <title>GraphiQL</title>
-    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
   </head>
   <body>
     <div id="react-root"></div>