re-ordered the data view page

2 files changed, 38 insertions, 14 deletions

diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index f16bb00..eef5d95 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -359,8 +359,8 @@ body {
 .danger-zone {
   margin-top: 24px;
   padding: 16px;
-  background-color: rgba(220, 53, 69, 0.1);
-  border: 1px solid rgba(220, 53, 69, 0.3);
+  background-color: var(--danger-bg-color);
+  border: 1px solid var(--danger-border-color);
   border-radius: var(--radius-md);
 }
 
@@ -380,13 +380,37 @@ body {
 .action-button.danger {
   background-color: var(--danger-color);
   color: white;
+  border: none;
+  padding: 10px 16px;
 }
 
 .action-button.danger:hover {
-  background-color: #e03444;
+  background-color: var(--danger-hover-color);
   box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
 }
 
+/* Ensure the delete button has proper dimensions and appearance */
+#delete-all-data {
+  min-width: 160px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+#delete-all-data i {
+  font-size: 14px;
+}
+
+/* Override any potential conflicting styles */
+.action-button.danger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .app-content {
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index ddc31aa..a9934d7 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -23,6 +23,12 @@
         </header>
 
         <main class="app-content">
+            <div class="actions">
+                <button id="back-button" class="action-button secondary">
+                    <i class="fas fa-arrow-left"></i> Back to Extension
+                </button>
+            </div>
+
             <div class="data-section">
                 <h2 class="section-title">Global Settings</h2>
                 <div id="global-settings-data" class="data-container"></div>
@@ -33,17 +39,6 @@
                 <div id="skip-list-data" class="data-container"></div>
             </div>
 
-            <div class="data-section">
-                <h2 class="section-title">Websites and CSS</h2>
-                <div id="combined-websites-data" class="data-container"></div>
-            </div>
-
-            <div class="actions">
-                <button id="back-button" class="action-button secondary">
-                    <i class="fas fa-arrow-left"></i> Back to Extension
-                </button>
-            </div>
-
             <div class="danger-zone">
                 <h3 class="danger-title">Danger Zone</h3>
                 <div class="danger-actions">
@@ -52,6 +47,11 @@
                     </button>
                 </div>
             </div>
+            
+            <div class="data-section">
+                <h2 class="section-title">Websites and CSS</h2>
+                <div id="combined-websites-data" class="data-container"></div>
+            </div>
         </main>
 
         <footer class="app-footer">