add dark mode

DonDyxless · Jan 12, 2023 · 5af6b11 · 5af6b11
1 parent 198958c
commit 5af6b11
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@heroicons/vue": "2.0.13",
     "@popperjs/core": "2.11.6",
     "@vue-leaflet/vue-leaflet": "0.6.1",
+    "@vueuse/core": "9.10.0",
     "@vueuse/head": "1.0.22",
     "array-timsort": "1.0.3",
     "country-code-emoji": "2.3.0",
@@ -48,6 +49,7 @@
     "vue-meta": "3.0.0-alpha.8",
     "vue-router": "4.1.6",
     "vue-tailwind": "2.5.1",
+    "vue-use": "0.2.0",
     "vue3-storage": "0.1.11",
     "webpack": "5.75.0",
     "write-yaml-file": "4.2.0"
@@ -80,6 +82,7 @@
     "style-loader": "3.3.1",
     "tailwindcss": "3.2.4",
     "vue-cli-plugin-yaml-loader": "~1.0.0",
+    "vue-template-compiler": "2.7.14",
     "webpack-cli": "5.0.0",
     "yaml-loader": "^0.6.0"
   },

diff --git a/src/components/layout/HeaderComponent.vue b/src/components/layout/HeaderComponent.vue
@@ -53,6 +53,8 @@
           </div>
           </div>
           <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+
+          <DarkMode />
 
           <!-- Profile dropdown -->
           <Menu as="div" class="relative ml-3">
@@ -167,6 +169,7 @@ import UserLib from '@/shared/user-lib.js'
 
 // import PreferencesComponent from '@/components/PreferencesComponent.vue'
 import AuthComponent from '@/components/user/AuthComponent.vue'
+import DarkMode from '@/components/partials/DarkMode.vue'
 
 import {version} from '../../../package.json'
 
@@ -177,6 +180,7 @@ export default defineComponent({
   components: {
     // PreferencesComponent,
     AuthComponent,
+    DarkMode,
     Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems,
     Bars3Icon, XMarkIcon
   },

diff --git a/src/components/relays/blocks/MapSummary.vue b/src/components/relays/blocks/MapSummary.vue
@@ -51,7 +51,7 @@
       </l-marker>
 
     </l-map>
-    <span @click="this.handleToggleMap()">
+    <span @click="this.handleToggleMap()" id="map_control">
       <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" v-if="!store.layout.mapIsExpanded">full map</button>
       <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" v-if="store.layout.mapIsExpanded">relay list</button>
     </span>
@@ -306,15 +306,15 @@ export default defineComponent({
 </script>
 
 <style>
-/* :root {
+:root {
     --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
 }
 
 @media (prefers-color-scheme: dark) {
     .leaflet-tile {
         filter:var(--map-tiles-filter, none);
 	}
-} */
+}
 </style>
 
 <style>
@@ -585,17 +585,7 @@ export default defineComponent({
 
 </script>
 
-<style>
-/* :root {
-    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
-}
 
-@media (prefers-color-scheme: dark) {
-    .leaflet-tile {
-        filter:var(--map-tiles-filter, none);
-	}
-} */
-</style>
 
 <style scoped>
 

diff --git a/src/components/relays/blocks/RelaysResultTable.vue b/src/components/relays/blocks/RelaysResultTable.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="-mt-10 pt-0 px-1 sm:px-6 lg:px-8">
+   <div class="pt-0 px-1 sm:px-6 lg:px-8">
       <div class="mt-8 flex flex-col">
       <div class="overflow-x-auto">
           <div class="inline-block min-w-full align-middle" v-if="subsectionRelays.length">

diff --git a/src/components/relays/nav/RelaysFindNav.vue b/src/components/relays/nav/RelaysFindNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-white mb-5" v-slot="{ open }">
+  <Disclosure as="nav" id="subsection_nav" class="bg-white mb-5" v-slot="{ open }">
   <div class="mx-auto max-w-7xl px-0">
     <div class="flex h-12 justify-center md:justify-between">
       <div class="flex px-2 lg:px-0">

diff --git a/src/components/relays/pages/RelaysFind.vue b/src/components/relays/pages/RelaysFind.vue
@@ -37,7 +37,7 @@
         <RelaysFindNav />
       </div>
     </div>
-    <div v-if="!this.store.layout.mapIsExpanded">
+    <div id="relays_list_wrapper" v-if="!this.store.layout.mapIsExpanded">
       <div 
           v-for="subsection in navSubsection"
           :key="subsection.slug" > 

diff --git a/src/components/relays/pages/RelaysSingle.vue b/src/components/relays/pages/RelaysSingle.vue
@@ -10,15 +10,15 @@
 
   <div id="wrapper" class="mt-8 mx-auto w-auto max-w-7xl">
 
-      <div v-if="store.tasks.isProcessing('relays/check') && !result" class="flex bg-slate-100 mt-12 shadow">
+      <div v-if="store.tasks.isProcessing('relays/check') && !result" class="data-card flex bg-slate-100 mt-12 shadow">
         <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
           <span class="block lg:text-lg"><strong>Data has not yet populated and is currently being processed.</strong> Depending on the availability of of the <strong>{{ relay  }}</strong>, this may or may not be populated shortly.</span>
         </div>
       </div>
 
       <section v-if="result">
 
-        <div class="overflow-hidden bg-slate-100 shadow sm:rounded-lg">
+        <div class="data-card overflow-hidden bg-slate-100 shadow sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h1>{{geo?.countryCode ? getFlag : ''}}<span @click="copy(relayFromUrl)">{{ relayFromUrl }}</span></h1>
             <p class="mt-1 w-auto text-xl text-gray-500" v-if="result?.info?.description">{{ result.info.description }}</p>
@@ -35,7 +35,7 @@
         </div>
 
         <div v-if="!result?.check?.connect">
-          <div class="block mt-1 py-24 w-auto bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" v-if="!result?.check?.connect">
+          <div class="data-card block mt-1 py-24 w-auto bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" v-if="!result?.check?.connect">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-red-600 dark:text-red-300">This Relay Appears to be offline</h5>
           </div>
           <div class="flex bg-slate-50 shadow mt-12" v-if="Object.keys(this.result?.geo).length">
@@ -45,9 +45,9 @@
           </div>
         </div>
 
-        <div class="mb-10 overflow-hidden bg-slate-400 border-slate-200 shadow sm:rounded-lg">
+        <div v-if="result?.info?.supported_nips" class="mb-10 overflow-hidden bg-slate-400 border-slate-200 shadow sm:rounded-lg">
           <div class="px-1 py-2 sm:px-6">
-            <div class="flex" v-if="result?.info?.supported_nips">
+            <div class="flex">
               <div class="flex-none">
                 <h3 class="text-lg md:text-lg lg:text-xl xl:text-3xl mb-2 px-2 align-middle mt-4 font-black">nips</h3>
               </div>
@@ -59,7 +59,7 @@
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 mb-10" v-if="geo?.dns">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 mb-10" v-if="geo?.dns">
           <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
             <span>
               The IP of <strong>{{ geo?.dns.name }}</strong> is <strong>{{ geo?.dns.data }}</strong> <br />
@@ -69,15 +69,15 @@
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 border mb-10" v-if="this.result?.info?.software">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 border mb-10" v-if="this.result?.info?.software">
           <div class="text-slate-800 text-3xl flex-none w-full block py-1 text-center">
             <span>
                 The current date/time in <strong>{{ geo?.city }}</strong> is <strong>{{ getLocalTime }}</strong>
               </span>
           </div>
         </div>
 
-        <div class="flex sm:rounded-lg bg-slate-50 border-slate-200 shadow" v-if="this.result?.info?.software">
+        <div class="data-card flex sm:rounded-lg bg-slate-50 border-slate-200 shadow" v-if="this.result?.info?.software">
           <div class="text-clip overflow-ellipsis text-slate-800 text-lg md:text-xl lg:text-3xl flex-none w-full block py-1 text-center">
             It's running <strong>{{ getSoftware }}:{{ result.info.version }}</strong>
           </div>
@@ -90,24 +90,24 @@
           </div>
         </div> -->
 
-        <div class="flex bg-slate-50 border-slate-200 mt-12 shadow" v-if="this.result?.info?.pubkey">
+        <div class="data-card flex bg-slate-50 border-slate-200 mt-12 shadow" v-if="this.result?.info?.pubkey">
           <div class="text-slate-800 w-full text-sm md:text-lg lg:text-3xl overflow-ellipsis flex-none block py-1 text-center">
             <code class="block">{{ this.result?.info.pubkey }}</code>
           </div>
         </div>
 
-        <div class="flex bg-slate-50 border-slate-200 shadow mt-12" v-if="this.result?.info?.pubkey">
+        <div class="data-card flex bg-slate-50 border-slate-200 shadow mt-12" v-if="this.result?.info?.pubkey">
           <div class="text-slate-800 w-full flex-none block py-1 text-center">
             Here's the details...
           </div>
         </div>
 
 
 
-        <div class="py-5" v-if="typeof result?.info !== 'undefined'">
-          <div class="overflow-hidden bg-white shadow sm:rounded-lg relative">
+        <div class="py-5" v-if="typeof result?.info !== 'undefined' && Object.keys(result?.info).length">
+          <div class="data-card overflow-hidden bg-white shadow sm:rounded-lg relative">
             <div class="px-4 py-5 sm:px-6">
-              <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Relay Info <code class="text-gray-300 text-xs absolute top-3 right-3">NIP-11</code></h3>
+              <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Relay Info</h3>
             </div>
             <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
               <dl class="sm:divide-y sm:divide-gray-200">
@@ -169,7 +169,7 @@
 
 
       <div :class="getGeoWrapperClass">
-        <div  :class="getDnsClass" class="overflow-hidden bg-white shadow sm:rounded-lg mt-8" v-if="geo">
+        <div  :class="getDnsClass" class="data-card overflow-hidden bg-white shadow sm:rounded-lg mt-8" v-if="geo">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">DNS</h3>
           </div>
@@ -183,7 +183,7 @@
           </div>
         </div>
 
-        <div class="overflow-hidden bg-white shadow sm:rounded-lg mt-8"  :class="getGeoClass" v-if="geo">
+        <div class="data-card overflow-hidden bg-white shadow sm:rounded-lg mt-8"  :class="getGeoClass" v-if="geo">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg md:text1xl lg:text-2xl xl:text-3xl">Geo Data {{geo?.countryCode ? getFlag : ''}}</h3>
           </div>

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,6 +3,88 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+}
+
+body[theme=dark] {
+
+}
+
+
+body[theme=dark] {
+  background: #16171d;
+  color: #fff;
+
+  #relays_list_wrapper {
+    @apply bg-black/20 rounded-lg
+  }
+
+  #headlessui-menu-items-3 {
+    background: #16171d;
+    color: #fff;
+    a:hover {
+      @apply bg-white/10
+    }
+  }
+
+  #subsection_nav {
+    @apply bg-transparent
+  }
+
+  #map_control button {
+    background: #16171d;
+    color: #fff;
+
+  }
+
+  table tbody {
+    border-top:1px solid #333 !important;
+  }
+
+  table tbody tr:hover {
+    @apply bg-slate-50/10
+  }
+
+  * {
+    color: #f0f0f0
+  }
+
+  tr, tbody {
+    @apply bg-transparent
+  }
+
+  main {
+    .data-card {
+      * {
+        @apply border-slate-100/10
+      }
+
+      dl > div {
+        @apply border-none
+      }
+
+      @apply bg-slate-50/10 border-none
+    }
+  }
+
+  .leaflet-tile {
+    filter:var(--map-tiles-filter, none);
+  }
+
+  .leaflet-control-attribution {
+    background:#000
+  }
+}
+
+
+
+
+
+
+
+
+
 
 td ul { padding:0; margin:0; list-style: none; }
 td ul li { list-style: none; }