fix: dark mode styling

getAlby · Nov 1, 2023 · ddcb1fd · ddcb1fd
1 parent 25a7820
commit ddcb1fd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 52 deletions.
diff --git a/public/css/application.css b/public/css/application.css
@@ -1103,11 +1103,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-purple-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -1351,10 +1346,6 @@ select {
   opacity: 0.5;
 }
 
-.opacity-60 {
-  opacity: 0.6;
-}
-
 .opacity-80 {
   opacity: 0.8;
 }
@@ -1371,11 +1362,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.grayscale {
-  --tw-grayscale: grayscale(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1465,28 +1451,18 @@ select {
     border-color: rgb(38 38 38 / var(--tw-border-opacity));
   }
 
-  .dark\:border-white\/10 {
-    border-color: rgb(255 255 255 / 0.1);
-  }
-
-  .dark\:border-purple-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(192 132 252 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-purple-100 {
+  .dark\:border-purple-300 {
     --tw-border-opacity: 1;
-    border-color: rgb(243 232 255 / var(--tw-border-opacity));
+    border-color: rgb(216 180 254 / var(--tw-border-opacity));
   }
 
-  .dark\:border-purple-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(233 213 255 / var(--tw-border-opacity));
+  .dark\:border-white\/10 {
+    border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:border-purple-300 {
+  .dark\:border-l-gray-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(216 180 254 / var(--tw-border-opacity));
+    border-left-color: rgb(156 163 175 / var(--tw-border-opacity));
   }
 
   .dark\:bg-green-900 {
@@ -1499,6 +1475,11 @@ select {
     background-color: rgb(124 45 18 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-purple-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(88 28 135 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-surface-00dp {
     --tw-bg-opacity: 1;
     background-color: rgb(18 18 18 / var(--tw-bg-opacity));
@@ -1519,21 +1500,6 @@ select {
     background-color: rgb(49 49 49 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(88 28 135 / var(--tw-bg-opacity));
-  }
-
   .dark\:text-gray-100 {
     --tw-text-opacity: 1;
     color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1589,9 +1555,9 @@ select {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .dark\:text-neutral-500 {
+  .dark\:text-orange-200 {
     --tw-text-opacity: 1;
-    color: rgb(115 115 115 / var(--tw-text-opacity));
+    color: rgb(254 215 170 / var(--tw-text-opacity));
   }
 
   .dark\:placeholder-gray-400::-moz-placeholder {

diff --git a/views/apps/new.html b/views/apps/new.html
@@ -52,7 +52,7 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
               <label for="{{$key}}" class="pointer-events-none text-gray-800 dark:text-gray-300 cursor-pointer">{{$value.Description}}</label>
             </div>
             {{if eq $key "pay_invoice"}}
-              <div id="budget-allowance" class="pt-1 pb-2 pl-5 ml-2.5 border-l-2 border-l-gray-200 {{if not $value.Checked }} hidden {{end}}">
+              <div id="budget-allowance" class="pt-1 pb-2 pl-5 ml-2.5 border-l-2 border-l-gray-200 dark:border-l-gray-400 {{if not $value.Checked }}pointer-events-none opacity-30 hidden {{end}}">
                 <p class="text-gray-600 dark:text-neutral-400 mb-2 text-sm">Monthly budget</p>
                 <div id="budget-allowance-limits" class="grid grid-cols-6 grid-rows-2 md:grid-rows-1 md:grid-cols-5 gap-2 text-xs text-gray-800 dark:text-neutral-200">
                   <div data-limit="10000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">10k<br>sats</div>
@@ -73,15 +73,15 @@ <h2 class="font-bold text-2xl font-headline mb-6 dark:text-white text-center">
     <div id="expiry" class="hidden text-gray-800 dark:text-neutral-200">
       <p class="text-lg font-medium mb-2">Connection expiry time</p>
       <div id="expiry-days" class="grid grid-cols-4 gap-2 text-xs">
-        <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">7 days</div>
-        <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">30 days</div>
-        <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">365 days</div>
+        <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 week</div>
+        <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 month</div>
+        <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 year</div>
         <div data-days="0" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Never</div>
       </div>
     </div>
 
     {{ if .Pubkey }}
-      <p class="rounded-md text-orange-700 bg-orange-50 p-3 mb-6">
+      <p class="rounded-md text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900 p-3 my-6">
         ⚠️ Only connect with apps you trust!
       </p>
     {{ end }}