From b8592d448bfa47214319531a6aaf6e78ac773459 Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Fri, 12 Jun 2015 16:46:27 -0700
Subject: [PATCH] More graceful error screen.

---
 src/components/ContainerHome.react.js      | 10 +++++-----
 src/components/NewContainerSearch.react.js |  2 +-
 styles/right-panel.less                    | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js
index e6fec53db0..198730eeb1 100644
--- a/src/components/ContainerHome.react.js
+++ b/src/components/ContainerHome.react.js
@@ -52,11 +52,11 @@ var ContainerHome = React.createClass({
     let body;
     if (this.props.container.Error) {
       body = (
-        <div className="details-progress">
-          <h3>An error occurred:</h3>
-          <h2>{this.props.container.Error}</h2>
-          <h3>If you feel that this error is invalid, please <a onClick={this.handleErrorClick}>file a ticket on our GitHub repo.</a></h3>
-          <Radial progress={100} error={true} thick={true} transparent={true}/>
+        <div className="details-progress error">
+          <h2>We&#39;re sorry. There seem to be an error:</h2>
+          <p className="error-message">{this.props.container.Error}</p>
+          <p>If this error is invalid, please file a ticket on our Github repo.</p>
+          <a className="btn btn-action" onClick={this.handleErrorClick}>File Ticket</a>
         </div>
       );
     } else if (this.props.container && this.props.container.State.Downloading) {
diff --git a/src/components/NewContainerSearch.react.js b/src/components/NewContainerSearch.react.js
index d5ce1ab14a..7465a5ff70 100644
--- a/src/components/NewContainerSearch.react.js
+++ b/src/components/NewContainerSearch.react.js
@@ -126,7 +126,7 @@ module.exports = React.createClass({
         <div className="no-results">
           <h2>Please verify your Docker Hub account email address</h2>
           <div className="verify">
-            <button className="btn btn-primary" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
+            <button className="btn btn-action" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
           </div>
           <RetinaImage src="inspection.png" checkIfRetinaImgExists={false}/>
         </div>
diff --git a/styles/right-panel.less b/styles/right-panel.less
index 71d5ea0dd3..95135eda25 100644
--- a/styles/right-panel.less
+++ b/styles/right-panel.less
@@ -184,6 +184,23 @@
       margin-bottom: 20px;
       text-align: center;
     }
+    &.error {
+      p {
+        color: @gray-darker;
+        &.error-message {
+          span {
+            display: block;
+            margin-bottom: 0.5rem;
+          }
+          text-align: center;
+          color: @brand-negative;
+          background-color: lighten(@brand-negative, 32%);
+          padding: 1rem;
+          border-radius: @border-radius;
+          -webkit-user-select: text;
+        }
+      }
+    }
   }
   .details-panel {
     flex: 1 auto;