From d9feff83bf4bc6f02d4cba121f4a811571cbc5a9 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Sun, 17 Dec 2023 17:34:25 +0100
Subject: [PATCH] style(App): update error dialog to latest design

---
 src/App/ErrorDialog/styles.less | 25 ++++++++++++++++---------
 src/App/styles.less             |  1 -
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/App/ErrorDialog/styles.less b/src/App/ErrorDialog/styles.less
index 01f6634b2..c3f7813d4 100644
--- a/src/App/ErrorDialog/styles.less
+++ b/src/App/ErrorDialog/styles.less
@@ -7,12 +7,12 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
 
     .error-image {
         flex: none;
         width: 12rem;
         height: 12rem;
-        margin-bottom: 1rem;
         object-fit: contain;
         object-position: center;
         opacity: 0.9;
@@ -24,7 +24,7 @@
         font-size: 2rem;
         max-height: 3.6em;
         text-align: center;
-        color: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 
     .buttons-container {
@@ -36,6 +36,8 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
+        gap: 1.5rem;
+        margin-top: 1rem;
 
         .button-container {
             flex-grow: 0;
@@ -45,18 +47,23 @@
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            margin: 2rem 1rem 0;
-            padding: 0 1rem;
+            padding: 0 2.5rem;
             min-width: 8rem;
-            height: 3rem;
-            background-color: @color-accent3;
+            height: 3.5rem;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
 
             &:hover {
-                background-color: @color-accent3-light1;
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                background-color: transparent;
+            }
+
+            &:active {
+                outline: none;
             }
 
             &:global(.disabled) {
-                background-color: @color-surface-dark5;
+                opacity: 0.3;
             }
 
             .label {
@@ -67,7 +74,7 @@
                 font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: @color-surface-light5-90;
+                color: var(--primary-foreground-color);
             }
         }
     }
diff --git a/src/App/styles.less b/src/App/styles.less
index 64177ad65..95566c9a8 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -144,7 +144,6 @@ html {
             .loader-container, .error-container {
                 width: 100%;
                 height: 100%;
-                background-color: @color-background-dark2;
             }
         }
     }