From 5e82b0e3e93c11e3611e1e8843689efdf9293738 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Mon, 1 Jul 2024 17:01:14 +1000
Subject: [PATCH] dark mode by default, remove alert buttons

---
 index.html                         | 10 +++---
 src/App.vue                        | 55 +++++-------------------------
 src/components/StorageRequest.vue  |  6 ++--
 src/components/StorageRequests.vue |  9 +++--
 4 files changed, 23 insertions(+), 57 deletions(-)
diff --git a/index.html b/index.html
index 4af18b5..ad35306 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" class="dark">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Codex Testnet</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 70c5f0c..f9a70a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -148,16 +148,14 @@ function handleStorageEvent(event) {
   }
 }
 let lastStoreTimestamp = 0
-requestsStore.$subscribe(
-  (_mutation, state) => {
-    lastStoreTimestamp = Date.now()
-    const storeEventMeta = {
-      source: window.name,
-      timestamp: Date.now()
-    }
-    window.localStorage.setItem(localStorageMetaKey, serializer.serialize(storeEventMeta))
+requestsStore.$subscribe((_mutation, state) => {
+  lastStoreTimestamp = Date.now()
+  const storeEventMeta = {
+    source: window.name,
+    timestamp: Date.now()
   }
-)
+  window.localStorage.setItem(localStorageMetaKey, serializer.serialize(storeEventMeta))
+})
 
 async function detectRunningCodexNode() {
   try {
@@ -183,44 +181,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <button
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    type="button"
-    @click="addAlert('success', 'RequestFulfilled', 'Fulfilled')"
-  >
-    success alert
-  </button>
-  <button
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    type="button"
-    @click="addAlert('warning', 'SlotFreed', 'Freed')"
-  >
-    warning alert
-  </button>
-  <button
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    type="button"
-    @click="addAlert('danger', 'RequestFailed', 'Failed')"
-  >
-    danger alert
-  </button>
-  <button
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    type="button"
-    @click="addAlert('info', 'RequestFinished', 'Finished')"
-  >
-    info alert
-  </button>
-  <button
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    type="button"
-    @click="addSlotAlert('info', 'SlotFreed', 'Freed')"
-  >
-    info alert - Slot
-  </button>
-  <div
-    class="absolute top-0 bottom-0 left-0 right-0 flex flex-col h-full min-w-96 bg-white dark:bg-gray-900"
-  >
+  <div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
     <header class="sticky top-0 z-10 w-full text-center border-b p-4 flex-none">
       <AppNav />
     </header>
diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index be7edda..6f9dae1 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -53,9 +53,11 @@ const stateColour = computed(() => getStateColour(request.value.state))
     <div class="py-4 px-4 ml-4 max-w-2xl flex-1">
       <div
         v-if="enableModeration === true"
-        class="flex flex-col space-between mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100"
+      class="flex flex-col space-between mb-4 p-5 w-full border border-gray-300
+      rounded-lg b-1 bg-gray-100 dark:bg-gray-800"
       >
-        <label for="moderation" class="block mb-2 text-lg font-medium text-gray-900 dark:text-white"
+        <label for="moderation" class="block mb-2 text-lg font-medium
+        text-gray-900 dark:text-white"
           >Moderation station</label
         >
         <div class="flex items-center justify-between space-x-4">
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 0fd8d34..48b11df 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -130,9 +130,12 @@ onMounted(() => {
         />
       </div>
     </div>
-    <div class="shadow-md sm:rounded-lg border-t border-gray-50">
+    <div
+    class="relative overflow-x-auto overflow-y-hidden max-h-screen shadow-md
+    sm:rounded-lg border-t border-gray-50 h-full"
+    >
       <table
-        class="w-full relative text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+        class="w-full relative text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-lg"
       >
         <thead
           class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
@@ -148,7 +151,7 @@ onMounted(() => {
           <tr
             v-for="([requestId, { requestedAt, moderated, state }], idx) in requestsOrdered"
             :key="{ requestId }"
-            class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600"
+            class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600 dark:bg-gray-800"
             @click="router.push({ path: `/request/${requestId}`, query: { enableModeration } })"
           >
             <th
