Dark mode background color adjustments

sgobotta · Mar 20, 2024 · 92299c1 · 92299c1
1 parent 65e7a79
commit 92299c1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex b/lib/ex_finance_web/live/public/cedears/cedears_live/show.html.heex
@@ -2,7 +2,7 @@
   <div
     class="
       flex items-center justify-between p-4 rounded-lg
-      bg-white dark:bg-black shadow-zinc-500 shadow-md
+      bg-white dark:bg-zinc-800 shadow-zinc-500 shadow-md
       duration-500 border-zinc-300 dark:border-zinc-700 border-[1px]
       sm:w-full md:w-2/3 lg:w-1/2 xl:w-1/2 2xl:w-1/3
     "
@@ -72,7 +72,7 @@
                 bg-indigo-400/75 dark:bg-indigo-600/75 text-white dark:text-black rounded-sm
               ">
                 <span class="
-                  text-[0.65rem] font-medium leading-6
+                  text-[0.65rem] font-medium leading-6 text-black dark:text-white
                 ">
                   <%= render_timeleft(@timeleft_to_next_update) %>
                 </span>
@@ -147,8 +147,8 @@
                 border-slate-200 focus:border-slate-200 dark:border-slate-800 dark:focus:border-slate-800
                 focus:ring-indigo-500 hover:ring-indigo-500
                 focus:dark:ring-indigo-500 hover:dark:ring-indigo-500
-                bg-gray-100 dark:bg-gray-900
-                text-gray-700 dark:text-gray-300
+                bg-zinc-100 dark:bg-zinc-900
+                text-zinc-700 dark:text-zinc-300
                 pl-14
               "
               min={0}
@@ -174,8 +174,8 @@
                 border-slate-200 focus:border-slate-200 dark:border-slate-800 dark:focus:border-slate-800
                 focus:ring-indigo-500 hover:ring-indigo-500
                 focus:dark:ring-indigo-500 hover:dark:ring-indigo-500
-                bg-gray-100 dark:bg-gray-900
-                !text-gray-600 !dark:text-gray-400
+                bg-zinc-100 dark:bg-zinc-900
+                !text-zinc-600 !dark:text-zinc-400
                 mt-0 pl-14
                 w-full"
               disabled

diff --git a/lib/ex_finance_web/live/public/currency_live/index.html.heex b/lib/ex_finance_web/live/public/currency_live/index.html.heex
@@ -13,7 +13,7 @@
         class="
           flex items-center justify-between
           p-4 rounded-lg
-        bg-white dark:bg-black shadow-zinc-400 dark:shadow-zinc-600 shadow-md active:shadow-sm focus:shadow-sm transition duration-200
+        bg-white dark:bg-zinc-800 shadow-zinc-400 dark:shadow-zinc-600 shadow-md active:shadow-sm focus:shadow-sm transition duration-200
         border-zinc-300 dark:border-zinc-700 border-[1px]
         "
         id={"currencies-#{currency.id}-card"}
@@ -34,7 +34,7 @@
                 currency.sell_price
               ) %>
             </h3>
-            <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
+            <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
               Spread:
               <span class={"text-#{get_color_by_currency_type(currency)}-500"}>
                 <%= render_spread(currency) %>

diff --git a/lib/ex_finance_web/live/public/currency_live/show.html.heex b/lib/ex_finance_web/live/public/currency_live/show.html.heex
@@ -4,7 +4,7 @@
     class="p-4 xs:w-full sm:w-2/3 md:w-2/3 lg:w-1/2 xl:w-1/3 w-full cursor-default"
   >
     <div
-      class="p-4 rounded-lg bg-white dark:bg-black shadow-zinc-500 dark:shadow-zinc-500 shadow-md duration-500
+      class="p-4 rounded-lg bg-white dark:bg-zinc-800 shadow-zinc-500 dark:shadow-zinc-500 shadow-md duration-500
       border-zinc-300 dark:border-zinc-700 border-[1px]"
       id={"currencies-#{@currency.id}-card"}
     >
@@ -24,14 +24,14 @@
                 @currency.sell_price
               ) %>
             </h3>
-            <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
+            <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
               Spread:
               <span class={"text-#{get_color_by_currency_type(@currency)}-500"}>
                 <%= render_spread(@currency) %>
               </span>
             </p>
           <% end %>
-          <p class="text-sm font-semibold text-gray-400 dark:text-gray-600 text-left">
+          <p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
             <%= render_update_time(@currency) %>
           </p>
           <button class={"