Updated about look and feel to match design

src/components/About.react.js

@@ -25,39 +25,40 @@ var Preferences = React.createClass({
   render: function () {
     return (
       <div className="preferences">
-        <div className="preferences-content">
+        <div className="about-content">
           <a onClick={this.handleGoBackClick}>Go Back</a>
-          <RetinaImage src="banner.png"/>
+          <h2>Installed Software</h2>
-          <table className="table">
+          <div className="row">
-            <thead>
+            <div className="col-md-6">
-              <tr>
+              <RetinaImage src="cartoon-kitematic.png"/>
-                <th>APP NAME</th>
+              <h3>{packages.name}</h3>
-                <th>VERSION</th>
+              <p>{packages.version}</p>
-              </tr>
+            </div>
-            </thead>
+            <div className="col-md-6">
-            <tbody>
+              <RetinaImage src="cartoon-docker.png"/>
-              <tr>
+              <h3>Docker</h3>
-                <td>{packages.name}</td>
+              <p>{packages["docker-version"]}</p>
-                <td>{packages.version}</td>
+            </div>
-              </tr>
+          </div>
-              <tr>
+          <div className="row">
-                <td>Docker</td>
+            <div className="col-md-6">
-                <td>{packages["docker-version"]}</td>
+              <RetinaImage src="cartoon-docker-machine.png"/>
-              </tr>
+              <h3>Docker Machine</h3>
-              <tr>
+              <p>{packages["docker-machine-version"]}</p>
-                <td>Docker Machine</td>
+            </div>
-                <td>{packages["docker-machine-version"]}</td>
+            <div className="col-md-6">
-              </tr>
+              <RetinaImage src="cartoon-docker-compose.png"/>
-              <tr>
+              <h3>Docker Compose</h3>
-                <td>Docker Compose</td>
+              <p>{packages["docker-compose-version"]}</p>
-                <td>{packages["docker-compose-version"]}</td>
+            </div>
-              </tr>
+          </div>
-              <tr>
+          <h2>Third-Party Software</h2>
-                <td>VirtualBox</td>
+          <div className="row">
-                <td>{packages["virtualbox-version"]}</td>
+            <div className="col-md-6 col-md-offset-3">
-              </tr>
+              <h3>VirtualBox</h3>
-            </tbody>
+              <p>{packages["virtualbox-version"]}</p>
-          </table>
+            </div>
+          </div>
         </div>
       </div>
     );

styles/preferences.less

@@ -6,7 +6,7 @@
   align-items: flex-start;
   justify-content: center;
 
-  .preferences-content {
+  .preferences-content, .about-content {
     flex: 1 auto;
     margin-top: 45px;
     padding: 50px;
@@ -37,4 +37,22 @@
       }
     }
   }
+  .about-content {
+    margin-top: 0px;
+    h2 {
+      font-size: 3rem;
+      text-align: center;
+    }
+    .row {
+      text-align: center;
+    }
+    h3 {
+      font-size: 2rem;
+      text-align: center;
+    }
+    p {
+      color: @gray-normal;
+      font-size: 1.5rem;
+    }
+  }
 }