Merge pull request #140 from pajasevi/feature/better-error-message

Error message enhancements

app/components/GlobalError/GlobalError.js

@@ -3,16 +3,20 @@ import PropTypes from 'prop-types'
 import { MdClose } from 'react-icons/lib/md'
 import styles from './GlobalError.scss'
 
-const GlobalError = ({ error, clearError }) => (
-  <div className={`${styles.container} ${!error && styles.closed}`}>
-    <div className={styles.content}>
-      <div className={styles.close} onClick={clearError}>
-        <MdClose />
+const GlobalError = ({ error, clearError }) => {
+  setTimeout(clearError, 10000)
+
+  return (
+    <div className={`${styles.container} ${!error && styles.closed}`}>
+      <div className={styles.content}>
+        <div className={styles.close} onClick={clearError}>
+          <MdClose />
+        </div>
+        <h2>{error}</h2>
       </div>
-      <h2>{error}</h2>
     </div>
-  </div>
-)
+  )
+}
 
 
 GlobalError.propTypes = {

app/components/GlobalError/GlobalError.scss

@@ -24,15 +24,20 @@
 
     .close {
       position: absolute;
-      top: calc(50% - 8px);
+      top: 50%;
       right: 10%;
+      transform: translateY(-50%);
       cursor: pointer;
+      font-size: 2rem;
     }
 
     h2 {
+      max-width: 75%;
+      margin-left: auto;
+      margin-right: auto;
       font-size: 20px;
       letter-spacing: 1.5px;
       font-weight: bold;
     }
   }
-}
+}