From 69f5e65f7bf89fd52a2d1c8ae5310ebe64d374ef Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Sun, 14 Sep 2025 00:01:46 +1000
Subject: [PATCH] Style dialog with dark theme and brand yellow button

---
 src/views/DesktopDialogView.vue | 73 +++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/views/DesktopDialogView.vue b/src/views/DesktopDialogView.vue
index 2e1549139..6d2dc6671 100644
--- a/src/views/DesktopDialogView.vue
+++ b/src/views/DesktopDialogView.vue
@@ -3,39 +3,48 @@
     <div class="dialog-container">
       <div class="dialog-title">{{ title }}</div>
       <div class="dialog-message">{{ message }}</div>
+      <div class="dialog-actions">
+        <button class="dialog-button">{{ t('common.close') }}</button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+const { t } = useI18n()
 
 // Get title and message from query parameters
-const title = computed(() => (route.query.title as string) || 'Dialog')
+const title = computed(() => (route.query.title as string) || 'Quick Setup')
 const message = computed(() => (route.query.message as string) || '')
 </script>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=ABC+ROM:ital@1&display=swap');
+
 .desktop-dialog {
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
 }
 
 .dialog-container {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  border-radius: 12px;
-  padding: 32px;
-  width: 90%;
-  max-width: 440px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  width: 448px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  padding: 24px;
+  background: #2d2d2d;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   animation: slideIn 0.3s ease-out;
 }
 
@@ -51,15 +60,53 @@ const message = computed(() => (route.query.message as string) || '')
 }
 
 .dialog-title {
+  font-family:
+    'ABC ROM',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-style: italic;
   font-size: 20px;
-  font-weight: 600;
-  color: #1a202c;
-  margin-bottom: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  margin: 0;
 }
 
 .dialog-message {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
-  color: #4a5568;
+  color: #b0b0b0;
   line-height: 1.6;
+  margin: 0;
+}
+
+.dialog-actions {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.dialog-button {
+  padding: 10px 24px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #f0ff41;
+  color: #1a1a1a;
+}
+
+.dialog-button:hover {
+  background: #d9e639;
+  transform: translateY(-1px);
+}
+
+.dialog-button:active {
+  transform: translateY(0);
 }
 </style>