Merge pull request #1301 from jvwong/iss1299_error-message

Add pc search branding; typos corrected

Author: maxkfranz

src/client/common/components/error-message.js

@@ -5,7 +5,17 @@ const { Link } = require('react-router-dom');
 
 class ErrorMessage extends React.Component {
   render(){
-    const logo = this.props.logo ? h(Link, { to: { pathname: `/`}, target: '_blank' }, [ h('div.pc-logo')]): null;
+    const logo = this.props.logo
+      ? h( Link, { to: { pathname: `/`}, target: '_blank' }, [
+          h('div.error-branding', [
+            h('div.pc-logo'),
+            h('div.error-branding-descriptor', [
+              h('h2.error-subtitle', 'Pathway Commons'),
+              h('h1.error-title', 'Search')
+            ])
+          ])
+      ])
+      : null;
 
     const title = h('h1.error-message-title',
       this.props.title !== undefined ? this.props.title : 'An error occurred' );
@@ -21,8 +31,8 @@ class ErrorMessage extends React.Component {
     ]);
 
     return  h('div.error-message-container', [
-      logo,
       h('div.error-message', [
+        logo,
         title,
         body,
         footer

src/client/features/enrichment/index.js

@@ -77,7 +77,7 @@ class Enrichment extends React.Component {
     if( networkEmpty ) {
       errorMessage = h(ErrorMessage, { title: 'No results to display.', body: 'Try different genes in your search.' , footer: null, logo: true } );
     } else if( error instanceof TimeoutError ) {
-      errorMessage = h( ErrorMessage, { title: 'This is taking longer that we expected', body: 'Try again later.', logo: true } );
+      errorMessage = h( ErrorMessage, { title: 'This is taking longer than expected', body: 'Try again later.', logo: true } );
     } else if( error ) {
       errorMessage = h( ErrorMessage, { logo: true } );
     }

src/client/features/interactions/index.js

@@ -77,7 +77,7 @@ class Interactions extends React.Component {
     if( networkEmpty ) {
       errorMessage = h(ErrorMessage, { title: 'No interactions to display.', body: 'Try different genes in your search.' , footer: null, logo: true } );
     } else if( error instanceof TimeoutError ) {
-      errorMessage = h( ErrorMessage, { title: 'This is taking longer that we expected', body: 'Try again later.', logo: true } );
+      errorMessage = h( ErrorMessage, { title: 'This is taking longer than expected', body: 'Try again later.', logo: true } );
     } else if( error ) {
       errorMessage = h( ErrorMessage, { logo: true } );
     }

src/client/features/search/index.js

@@ -121,7 +121,7 @@ class Search extends React.Component {
     if( this.props.notFoundError ) {
       errorMessage = h( ErrorMessage, { title: 'We couldn\'t find the resource you are looking for', body: 'Check the location and try again.' } );
     } else if( this.state.error instanceof TimeoutError ) {
-      errorMessage = h( ErrorMessage, { title: 'This is taking longer that we expected', body: 'Try again later.' }  );
+      errorMessage = h( ErrorMessage, { title: 'This is taking longer than expected', body: 'Try again later.' }  );
     } else if( this.state.error ) {
       errorMessage = h( ErrorMessage );
     }

src/styles/common/error-message.css

@@ -3,16 +3,44 @@
   justify-content: center;
   align-items: center;
   flex-direction: row;
+  margin: 1.5em;
 
   & .pc-logo {
     background-image: url("../image/pc_logo_dark.svg");
     background-repeat: no-repeat;
-    height: 5em;
-    width: 5em;
-    padding: 0px 10px 0px 0px;
+    height: 3em;
+    width: 3em;
+    padding: 0;
   }
 }
 
+.error-branding {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding-right: 0.5em;
+  margin-bottom: 1em;
+}
+
+.error-branding-descriptor {
+  margin-left: 0.5em;
+}
+
+.error-title {
+  margin: 0;
+  line-height: 1em;
+  color: var(--dark-base-colour);
+  font-size: 2em;
+}
+
+.error-subtitle {
+  margin: 0;
+  line-height: 1em;
+  color: var(--dark-base-colour);
+  font-size: 0.75em;
+}
+
 .error-message {
   display: flex;
   justify-content: center;