changed error message and styling

Author: rydang

src/app/containers/MainContainer.jsx

@@ -11,7 +11,6 @@ import {
 import { useStoreContext } from '../store';
 
 function MainContainer() {
-  const [npmExists, setnpm] = useState(false);
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
 
@@ -39,7 +38,6 @@ function MainContainer() {
         }
         case 'initialConnectSnapshots': {
           dispatch(initialConnect(payload));
-          setnpm(true);
           break;
         }
         default:
@@ -54,7 +52,19 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
-  if (!npmExists) return <div style={{ color: 'black' }}>Please install our npm package in your app</div>;
+  if (!tabs[currentTab]) {
+    return (
+      <div className="error-container">
+        <a
+          href="https://www.npmjs.com/package/react-time-travel"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          No React application found. Please install our npm package in your app.
+        </a>
+      </div>
+    );
+  }
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
 
   // if viewIndex is -1, then use the sliderIndex instead

src/app/styles/styles.scss

@@ -18,15 +18,30 @@ body {
   overflow: hidden;
 }
 
+.error-container {
+  height: 100%;
+  margin: 0 auto;
+  background-color: $brand-color;
+  overflow: hidden;
+
+  display: grid;
+  justify-content: center;
+  a {
+    color: white;
+    margin-top: 5%;
+    height: 3%;
+  }
+}
+
 .body-container {
   height: 94%;
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;
   grid-template-areas:
-    "actions states"
-    "travel travel"
-    "buttons buttons";
+    'actions states'
+    'travel travel'
+    'buttons buttons';
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -35,10 +50,10 @@ body {
     grid-template-rows: 3fr 5fr 1fr;
     grid-template-columns: auto;
     grid-template-areas:
-      "actions"
-      "states"
-      "travel"
-      "buttons";
+      'actions'
+      'states'
+      'travel'
+      'buttons';
   }
 }
 .travel-container {