From db63362327a18fb566699d4cec88bf5c9b1c803a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 27 Apr 2024 00:45:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AC=20Translate=20critical=20error=20t?=
 =?UTF-8?q?ext,=20and=20update=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/locales/en.json                    |  8 ++++++++
 src/components/PageStrcture/CriticalError.vue | 17 +++++++++--------
 src/styles/color-themes.scss                  |  7 +++++++
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index d6b119f9..adb9319d 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -312,6 +312,14 @@
       "view-title": "View Config"
     }
   },
+  "critical-error": {
+    "title": "Configuration Load Error",
+    "subtitle": "Dashy has failed to load correctly due to a configuration error.",
+    "sub-ensure-that": "Ensure that",
+    "sub-error-details": "Error Details",
+    "sub-next-steps": "Next Steps",
+    "ignore-button": "Ignore Critical Errors"
+  },
   "widgets": {
     "general": {
       "loading": "Loading...",
diff --git a/src/components/PageStrcture/CriticalError.vue b/src/components/PageStrcture/CriticalError.vue
index ce5b859a..0a0448cc 100644
--- a/src/components/PageStrcture/CriticalError.vue
+++ b/src/components/PageStrcture/CriticalError.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="critical-error-wrap" v-if="shouldShow">
     <button class="close" title="Close Warning" @click="close">🗙</button>
-    <h3>Configuration Load Error</h3>
-    <p>
-      Dashy has failed to load correctly due to a configuration error.
-    </p>
-    <h4>Ensure that</h4>
+    <h3>{{ $t('critical-error.title') }}</h3>
+    <p>{{ $t('critical-error.subtitle') }}</p>
+    <h4>{{ $t('critical-error.sub-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>
-    <h4>Error Details</h4>
+    <h4>{{ $t('critical-error.sub-error-details') }}</h4>
     <pre>{{ this.$store.state.criticalError }}</pre>
-    <h4>Next Steps</h4>
+    <h4>{{ $t('critical-error.sub-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>)
@@ -29,7 +27,9 @@
       </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>
+    <button class="user-doesnt-care" @click="ignoreWarning">
+      {{ $t('critical-error.ignore-button') }}
+    </button>
   </div>
 </template>
 
@@ -69,6 +69,7 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;
+  max-width: 50rem;
   background: var(--background-darker);
   padding: 1rem;
   border-radius: var(--curve-factor);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 211e6aed..ff80b30a 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -1717,6 +1717,7 @@ html[data-theme='neomorphic'] {
   .config-buttons > svg,
   .display-options svg,
   form.minimal input,
+  .critical-error-wrap button.user-doesnt-care,
   a.config-button, button.config-button {
     border-radius: 0.35rem;
     box-shadow: var(--glass-button-shadow);
@@ -1724,6 +1725,7 @@ html[data-theme='neomorphic'] {
     border: 1px solid rgba(255, 255, 255, 0.19);
     background: rgba(255, 255, 255, 0.15);
     transition: all 0.2s ease-in-out;
+    text-decoration: none;
     &:hover, &.selected {
       box-shadow: var(--glass-button-hover-shadow);
       border: 1px solid rgba(255, 255, 255, 0.25) !important;
@@ -1791,6 +1793,11 @@ html[data-theme='neomorphic'] {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(50px);
   }
+
+  .critical-error-wrap {
+    backdrop-filter: blur(15px);
+    background: #0f0528c4;
+  }
 }
 
 html[data-theme='glass'] {