✨ Shows error details, if a critical error happens

src/components/PageStrcture/CriticalError.vue

@@ -1,24 +1,35 @@
 <template>
-  <div
-    class="critical-error-wrap" v-if="shouldShow">
+  <div class="critical-error-wrap" v-if="shouldShow">
+    <button class="close" title="Close Warning" @click="close">🗙</button>
     <h3>Configuration Load Error</h3>
     <p>
-      It looks like there was an error loading the configuration.<br>
+      Dashy has failed to load correctly due to a configuration error.
     </p>
-    <p>Please ensure that:</p>
+    <h4>Ensure that</h4>
     <ul>
       <li>The configuration file can be found at the specified location</li>
       <li>There are no CORS rules preventing client-side access</li>
       <li>The YAML is valid, parsable and matches the schema</li>
     </ul>
-    <p>
-      You can check the browser console for more details.<br>
-      If this issue persists, open a ticket on our GitHub.
-    </p>
-    <h4>Error Details:</h4>
-    <p class="the-error">{{ this.$store.state.criticalError }}</p>
-
-    <button class="user-doesnt-care" @click="ignoreWarning">Ignore Error</button>
+    <h4>Error Details</h4>
+    <pre>{{ this.$store.state.criticalError }}</pre>
+    <h4>Next Steps</h4>
+    <ul>
+      <li>Check the browser console for more details
+        (<a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md#how-to-open-browser-console">see how</a>)
+      </li>
+      <li>View the
+        <a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md">Troubleshooting Guide</a>
+        and <a href="https://dashy.to/docs/">Docs</a>
+      </li>
+      <li>
+        If you've verified the config is present, accessible and valid, and cannot find the solution
+        in the troubleshooting, docs or GitHub issues,
+        then <a href="https://github.com/Lissy93/dashy/issues/new/choose">open a ticket on GitHub</a>
+      </li>
+      <li>Click 'Ignore Critical Errors' below to not show this warning again</li>
+    </ul>
+    <button class="user-doesnt-care" @click="ignoreWarning">Ignore Critical Errors</button>
   </div>
 </template>
 
@@ -28,24 +39,23 @@ import Keys from '@/utils/StoreMutations';
 
 export default {
   name: 'CriticalError',
-  props: {
-    text: String,
-  },
-  data() {
-    return {
-
-    };
-  },
   computed: {
+    /* Determines if we should show this component.
+     * If error present AND user hasn't disabled */
     shouldShow() {
       return this.$store.state.criticalError
       && !localStorage[localStorageKeys.DISABLE_CRITICAL_WARNING];
     },
   },
   methods: {
+    /* Ignore all future errors, by putting a key in local storage */
     ignoreWarning() {
-      this.$store.commit(Keys.CRITICAL_ERROR_MSG, null);
       localStorage.setItem(localStorageKeys.DISABLE_CRITICAL_WARNING, true);
+      this.close();
+    },
+    /* Close this dialog, by removing this error from the local store */
+    close() {
+      this.$store.commit(Keys.CRITICAL_ERROR_MSG, null);
     },
   },
 };
@@ -55,10 +65,10 @@ export default {
 @import '@/styles/media-queries.scss';
 .critical-error-wrap {
   position: absolute;
-  top: 30%;
+  top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 2;
+  z-index: 3;
   background: var(--background-darker);
   padding: 1rem;
   border-radius: var(--curve-factor);
@@ -67,33 +77,39 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  opacity: 0.95;
   gap: 0.5rem;
+  transition: all 0.2s ease-in-out;
   @include tablet-down {
     top: 50%;
     width: 85vw;
   }
-  p, ul, h4 {
+  p, ul, h4, a {
     margin: 0;
     color: var(--white);
   }
+  pre {
+    color: var(--warning);
+    font-size: 0.8rem;
+    overflow: auto;
+    background: var(--transparent-white-10);
+    padding: 0.5rem;
+    border-radius: var(--curve-factor);
+  }
   h4 {
-    margin-top: 1rem;
+    margin: 0.5rem 0 0 0;
+    font-size: 1.2rem;
   }
   h3 {
     font-size: 2.2rem;
     text-align: center;
     background: var(--danger);
-    color: white;
+    color: var(--white);
     margin: -1rem -1rem 1rem -1rem;
     padding: 0.5rem;
   }
   ul {
     padding-left: 1rem;
   }
-  .the-error {
-    color: var(--danger);
-  }
   .user-doesnt-care {
     background: var(--background-darker);
     color: var(--white);
@@ -111,5 +127,26 @@ export default {
       text-decoration: none;
     }
   }
+  .close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    background: var(--background);
+    color: var(--primary);
+    border: none;
+    border-radius: var(--curve-factor);
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--primary);
+      color: var(--background);
+    }
+  }
 }
 </style>