update styling, errors

Author: physik932

src/styles/index.css

@@ -13,43 +13,19 @@
   height: 25%;
 }
 
-.error {
-  display: block;
-  margin: auto;
-  text-align: center;
-  color: rgb(0, 0, 0);
-  overflow-y: hidden;
-}
-
-.error > img {
-  width: 25%;
-  height: 25%;
-}
-
-.btn-url {
-  width: 100%;
+.urls {
   color: #2F3941;
   background-color: #ffffff;
   background-image: none;
   white-space: nowrap;
   font-weight: 600;
+  width: auto;
 }
 
-.btn-list {
+.url-list {
   text-align: center;
-  width: 90%;
-  margin: auto;
-}
-
-#app {
-  height: 100%;
-  overflow: hidden;
-}
-
-html {
-  overflow: hidden;
 }
 
 ul {  
   list-style-type: none;  
-}
+}

src/templates/default.js

@@ -6,8 +6,8 @@ import { templatingLoop as loop } from '../javascripts/lib/helpers.js'
  */
 function uriMarkup (uri) {
   return (`
-    <li>
-      <a href="${uri.url}" target="_blank" class="btn btn-default btn-url" role="button">${uri.title}</a>
+    <li class="url-list">
+      <a href="${uri.url}" target="_blank" class="list-group-item list-group-item-action urls" role="button">${uri.title}</a>
     </li>
   `)
 }
@@ -18,8 +18,8 @@ function uriMarkup (uri) {
  */
 export default function (templateUris) {
   return (`
-    <div id="well-urls" class="well well-sm">
-      <ul class="btn-list">${loop(templateUris, uriMarkup)}</ul>
+    <div id="well-urls" class="card">
+      <ul class="list-group">${loop(templateUris, uriMarkup)}</ul>
     </div>
   `)
 }

src/templates/error.js

@@ -3,15 +3,17 @@
  */
 export default function (error) {
   return (`
-    <div class="error">
-      <img src="warning.png" />
-      <h4>Oops! Something went wrong! :(</h4>
-      <p>${error}</p>
-      <br/>
-      <p>Please submit an issue below</p>
-      <a class="btn btn-url" target="_blank" href="https://github.com/Ibotta/url_builder_app/issues">
-        Submit Issue
-      </a>
+    <div class="card text-center">
+      <div class="card-body">
+        <div class="alert alert-danger" role="alert">
+          ${error}
+        </div>
+        <p class="card-text">Please copy the error message above, and use the button below to submit an issue to the developer.</p>
+        <p class="card-text">Provide a detailed description of the problem when submitting an issue.</p>
+        <a class="btn btn-danger" target="_blank" href="https://github.com/Ibotta/url_builder_app/issues">
+          Submit Issue
+        </a>
+      </div>
     </div>
   `)
 }