feat: new error message

- clean up of translation code
Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/scss/index.scss

@@ -116,25 +116,45 @@ body {
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
-.statsTopBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+/* error */
+.criticalError {
+  display: grid;
+  place-items: center;
+  width: 100vw;
+  height: 100vh;
+  .criticalError-message {
+    color: #fff;
+  }
+  p {
+    color: #ffffffc0;
+  }
 
-  button {
-    margin-bottom: 15px;
-    flex-flow: row !important;
-    padding-left: 20px;
-    padding-right: 20px;
+  .criticalError-actions {
+    display: flex;
+    flex-flow: row;
+    gap: 20px;
+  }
+
+  button,
+  a {
+    background: #0e1013;
+    box-shadow: 0 0 0 1px #484848;
+    border: 0;
+    color: #fff;
+    border-radius: 12px;
+    padding: 10px 30px 10px 30px;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    justify-content: center;
+    gap: 20px;
+    transition: 0.5s;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      background: #1e1e1e;
+    }
   }
 }
-
-.preferences {
-  transition: 0.4s ease-in-out;
-}
-
-.preferencesInactive {
-  opacity: 0.5;
-  pointer-events: none;
-  transition: 0.4s ease-in-out;
-}