From 336ea7a64f6b80bddb8e2423f7307fe8d3fabda2 Mon Sep 17 00:00:00 2001
From: Believethehype <tobias_baur@yahoo.com>
Date: Wed, 31 Jan 2024 10:13:31 +0100
Subject: [PATCH] noogle: adjustments for light mode

---
 ui/noogle/src/components/ImageGeneration.vue  | 11 ++++-----
 ui/noogle/src/components/Search.vue           | 23 +++++++++----------
 .../src/components/SearchResultTable.vue      | 22 +++++++++---------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/ui/noogle/src/components/ImageGeneration.vue b/ui/noogle/src/components/ImageGeneration.vue
index aad00b7..ae5bf73 100644
--- a/ui/noogle/src/components/ImageGeneration.vue
+++ b/ui/noogle/src/components/ImageGeneration.vue
@@ -307,7 +307,7 @@ const submitHandler = async () => {
 
 </script>
 
-
+<!--  font-thin bg-gradient-to-r from-white to-nostr bg-clip-text text-transparent -->
 
 <template>
 
@@ -316,7 +316,7 @@ const submitHandler = async () => {
     <br>
     <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
     <h1 class="text-7xl font-black tracking-wide">Image Generation</h1>
-    <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin">
+    <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin ">
     Generate Images, the decentralized way</h2>
     <h3>
      <br>
@@ -482,7 +482,7 @@ const submitHandler = async () => {
 <style scoped>
 
 .zap-Button{
-  @apply btn hover:bg-amber-400 border-amber-400 text-white;
+  @apply btn hover:bg-amber-400 border-amber-400 text-accent-content;
   bottom: 0;
 }
 
@@ -493,12 +493,11 @@ const submitHandler = async () => {
 }
 
 .c-Input {
-    @apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+  @apply bg-base-200 text-accent dark:bg-black dark:text-white  focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-accent-content transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
 
   width: 350px;
   height: 48px;
-  color: white;
-  background: black;
+
 }
 
 .d-Input {
diff --git a/ui/noogle/src/components/Search.vue b/ui/noogle/src/components/Search.vue
index f22ca96..e6064f7 100644
--- a/ui/noogle/src/components/Search.vue
+++ b/ui/noogle/src/components/Search.vue
@@ -353,22 +353,21 @@ defineProps({
       <img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
       <br>
       <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
-      <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin">
+      <h2 class="text-base-200-content text-center tracking-wide text-2xl">
       Search the Nostr with Data Vending Machines</h2>
       <h3>
        <br>
        <input class="c-Input" type="search" name="s" autofocus placeholder="Search..." v-model="message"  @keyup.enter="send_search_request(message)" @keydown.enter="nextInput">
        <button class="v-Button"  @click="send_search_request(message)">Search the Nostr</button>
       </h3>
-     <!-- <div class="collapse bg-base-200">
-  <input type="checkbox" />
-  <div class="collapse-title text-xl font-medium">
-    Click me to show/hide content
-  </div>
+
+    <!--  <details class="collapse bg-base">
+  <summary class="collapse-title font-thin bg ">Advanced Settings</summary>
   <div class="collapse-content">
-    <p>hello</p>
+    <p>content</p>
   </div>
-</div>-->
+</details> -->
+
     </div>
     <div class="max-w-5xl relative space-y-3">
       <div class="grid grid-cols-1 gap-6">
@@ -405,12 +404,12 @@ defineProps({
 }
 
 .c-Input {
-    @apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+    @apply bg-base-200 text-accent dark:bg-black dark:text-white  focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-accent-content transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
 
   width: 350px;
   height: 48px;
-  color: white;
-  background: black;
+  //color: white;
+  //background: black;
 }
 
 .logo {
@@ -431,7 +430,7 @@ h3 {
 
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1000px) {
 
   .greetings h1,
   .greetings h3 {
diff --git a/ui/noogle/src/components/SearchResultTable.vue b/ui/noogle/src/components/SearchResultTable.vue
index c24a1f1..a460ef6 100644
--- a/ui/noogle/src/components/SearchResultTable.vue
+++ b/ui/noogle/src/components/SearchResultTable.vue
@@ -94,32 +94,32 @@ const headers: Header[] = [
   box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%);
 }
 .customize-table {
-
+  width: auto;
   --easy-table-border: 1px solid #000000;
   --easy-table-row-border: 1px solid #000000;
 
   --easy-table-header-font-size: 14px;
   --easy-table-header-height: 50px;
-  --easy-table-header-font-color: #c1cad4;
-  --easy-table-header-background-color: #242424;
+  --easy-table-header-font-color: bg-accent;
+  --easy-table-header-background-color: bg-base;
 
   --easy-table-header-item-padding: 10px 15px;
 
-  --easy-table-body-even-row-font-color: #fff;
-  --easy-table-body-even-row-background-color: #242424;
+  --easy-table-body-even-row-font-color: bg-accenet;
+  --easy-table-body-even-row-background-color: bg-base;
 
-  --easy-table-body-row-font-color: #c0c7d2;
-  --easy-table-body-row-background-color: #242424;
+  --easy-table-body-row-font-color: bg-accent;
+  --easy-table-body-row-background-color: bg-base;
   --easy-table-body-row-height: 50px;
   --easy-table-body-row-font-size: 14px;
 
-  --easy-table-body-row-hover-font-color: #FFFFFF;
-  --easy-table-body-row-hover-background-color: #242424;
+  --easy-table-body-row-hover-font-color: bg-accent;
+  --easy-table-body-row-hover-background-color: bg-base;
 
   --easy-table-body-item-padding: 10px 15px;
 
-  --easy-table-footer-background-color: #242424;
-  --easy-table-footer-font-color: #c0c7d2;
+  --easy-table-footer-background-color: bg-base;
+  --easy-table-footer-font-color: bg-accent;
   --easy-table-footer-font-size: 14px;
   --easy-table-footer-padding: 0px 10px;
   --easy-table-footer-height: 50px;