More graceful error screen.

This commit is contained in:
Sean Li 2015-06-12 16:46:27 -07:00 committed by Jeffrey Morgan
parent 35ab1976b6
commit b8592d448b
3 changed files with 23 additions and 6 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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;