Minor card style improvements

sgobotta · Aug 22, 2024 · 8295a5d · 8295a5d
1 parent 05693f7
commit 8295a5d
Showing 1 changed file with 6 additions and 6 deletions.
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
@@ -7,7 +7,7 @@
     <div
       :for={{dom_id, currency} <- @streams.currencies}
       id={dom_id}
-      class="p-4 w-full sm:w-full md:w-1/2 xl:w-1/3 2xl:w-1/4 duration-500 cursor-default group"
+      class="p-4 w-full sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/3 2xl:w-1/4 duration-500 cursor-default group"
     >
       <div
         class={"
@@ -21,17 +21,17 @@
           cursor-pointer
 
           bg-gradient-to-br
-          from-#{get_color_by_price_direction(currency)}-100/75 to-#{get_color_by_price_direction(currency)}-200/75
-          dark:!from-#{get_color_by_price_direction(currency)}-900/75 dark:!to-#{get_color_by_price_direction(currency)}-500/75
+          from-#{get_color_by_price_direction(currency)}-100/75 to-#{get_color_by_price_direction(currency)}-900/75
         "}
         id={"currencies-#{currency.id}-card"}
         phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
       >
         <div class="
           text-left card-bg p-4 rounded-lg rounded-br-xl rounded-tr-xl border-zinc-300 dark:border-zinc-700 border-r-[1px] w-4/6
+          shadow-zinc-300 dark:shadow-zinc-900 shadow-[3px_0_5px_-2px]
           transition duration-700
         ">
-          <h2 class={"text-zinc-700 dark:text-zinc-100 text-lg font-medium border-b border-#{get_color_by_currency_type(currency)}-500"}>
+          <h2 class="text-zinc-700 dark:text-zinc-100 text-lg font-medium">
             <%= currency.name %>
           </h2>
           <div class={"
@@ -78,13 +78,13 @@
             <div class="relative">
               <div class={"
                 bg-gradient-to-tr
-                from-#{get_color_by_price_direction(currency)}-400/75 to-#{get_color_by_price_direction(currency)}-300/75
+                from-#{get_color_by_price_direction(currency)}-300/75 to-#{get_color_by_price_direction(currency)}-600/75
                 dark:from-#{get_color_by_price_direction(currency)}-400/75 dark:to-#{get_color_by_price_direction(currency)}-300/75
                 w-[6.5rem] h-[6.5rem]
                 rounded-full
                 shadow-none group-hover:shadow-inner-xs
                 group-hover:shadow-#{get_color_by_price_direction(currency)}-500
-                border-#{get_color_by_price_direction(currency)}-400 border-dashed border-2
+                border-#{get_color_by_price_direction(currency)}-400 border-dotted border-2
                 justify-center items-center
                 group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
               "} />