Aniamtion and UI improvements

sgobotta · Nov 22, 2023 · 98be137 · 98be137
1 parent 23a9e23
commit 98be137
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 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,10 +7,10 @@
     <div
       :for={{dom_id, currency} <- @streams.currencies}
       id={dom_id}
-      class="p-4 sm:w-1/2 lg:w-1/3 w-full hover:scale-[1.01] duration-500 cursor-default"
+      class="p-4 sm:w-1/2 lg:w-1/3 w-full hover:scale-[1.01] duration-500 cursor-default group"
     >
       <div
-        class="flex items-center justify-between p-4 rounded-lg bg-white shadow-zinc-300 shadow-md hover:shadow-2xl duration-500
+        class="flex items-center justify-between p-4 rounded-lg bg-white shadow-zinc-500 shadow-md hover:shadow-2xl duration-500
         border-zinc-300 border-[1px]"
         id={"currencies-#{currency.id}-card"}
       >
@@ -53,17 +53,21 @@
             <%= render_info_type(currency) %>
           </button>
         </div>
-        <div class={"
-          bg-gradient-to-tr
-          from-#{get_color_by_price_direction(currency)}-400 to-#{get_color_by_price_direction(currency)}-300
-          w-32 h-32
-          rounded-full
-          shadow-2xl shadow-#{get_color_by_price_direction(currency)}-400
-          border-zinc-50 border-double border-4
-          flex justify-center items-center
-        "}>
-          <div>
-            <h1 class="text-white text-2xl">
+        <div class="w-32 h-32 flex justify-center items-center">
+          <div class="relative">
+            <div class={"
+              bg-gradient-to-tr
+              from-#{get_color_by_price_direction(currency)}-400 to-#{get_color_by_price_direction(currency)}-300
+              w-32 h-32
+              rounded-full
+              shadow-2xl shadow-#{get_color_by_price_direction(currency)}-400 group-hover:shadow-lg
+              border-#{get_color_by_price_direction(currency)}-500 border-dashed border-2
+              justify-center items-center
+              group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
+            "} />
+          </div>
+          <div class="absolute">
+            <h1 class="text-white text-2xl group-hover:text-3xl duration-200">
               <%= render_variation_percent(currency) %>
             </h1>
           </div>

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
@@ -1,10 +1,7 @@
 <.header>
-  <div
-    id={@currency.id}
-    class="p-4 sm:w-1/2 lg:w-1/3 w-full hover:scale-[1.01] duration-500 cursor-default"
-  >
+  <div id={@currency.id} class="p-4 sm:w-1/2 lg:w-1/3 w-full cursor-default">
     <div
-      class="flex items-center justify-between p-4 rounded-lg bg-white shadow-zinc-300 shadow-md hover:shadow-2xl duration-500
+      class="flex items-center justify-between p-4 rounded-lg bg-white shadow-zinc-500 shadow-md hover:shadow-lg duration-500
       border-zinc-300 border-[1px]"
       id={"currencies-#{@currency.id}-card"}
     >
@@ -50,7 +47,7 @@
         w-32 h-32
         rounded-full
         shadow-2xl shadow-#{get_color_by_price_direction(@currency)}-400
-        border-zinc-50 border-double border-4
+        border-#{get_color_by_price_direction(@currency)}-500 border-dashed border-2
         flex justify-center items-center
       "}>
         <div>