tweak error page

Author: samuelcolvin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

src/components/shared/Error.js

@@ -1,15 +1,15 @@
 import React from 'react'
 
+const HELP_SITE = 'help.tutorcruncher.com/tc-socket/'
+
 const Error = ({children}) => (
   <div className="tcs-errors">
-    <p>
-      An error occurred with TutorCruncher socket:
-    </p>
+    <p>An error occurred while loading TutorCruncher socket:</p>
     <p className="tcs-error-content">{children}</p>
     <p>
-      It's likely that you've configured socket wrongly. You might get more information from the developer console, or
-      <a target="_blank" rel="noopener noreferrer" href="https://help.tutorcruncher.com/tc-socket/">help.tutorcruncher.com/tc-socket/</a>,
-      if you can't work out what's wrong contact [email protected].
+      It's likely that you've configured socket wrongly. You might get more information from the developer console,
+      or <a target="_blank" rel="noopener noreferrer" href={'https://' + HELP_SITE}>{HELP_SITE}</a>,
+      if you still can't work out what's wrong contact [email protected].
     </p>
   </div>
 )

src/styles/tools.scss

@@ -41,21 +41,18 @@
 .tcs-errors {
   margin: 5px;
   padding: 10px 10px;
-  font-size: 13px;
+  font-size: 14px !important;
+  border: 1px solid #f44;
+  border-radius: 4px;
+  color: #444;
   img {
     width: 100%;
   }
   .tcs-error-content {
-    font-family: monospace;
-    background-color: darken(white, 5%);
-    padding: 20px 10px;
+    color: black;
+    padding: 0 20px;
     white-space: pre-wrap;
     word-wrap: break-word;
-    font-size: 12px;
-  }
-  dt {
-    margin: 15px 0 5px;
-    font-weight: 500;
   }
 }