Currency list and banner ui enhancements (#23)

* Update currency list font sizes
* Add support to display only date values
* Layout, font and color improvements in the calculator banner
* Code refactor on assign price type
* Add support to select price on click
* Add support to update prices on keybindings

Author: sgobotta

lib/ex_finance_web/components/custom_components/calculator_banner.ex

@@ -22,28 +22,53 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
       class={[
         "fixed bottom-0 w-full lg:w-1/2 lg:left-1/4",
         "bg-white dark:bg-zinc-800",
-        "rounded-t-lg z-50"
+        "rounded-t-lg z-50 shadow-2xl"
       ]}
       phx-hook="AnimateCurrencyBanner"
       data-animations={banner_animation_dataset()}
     >
       <%= if @show_calculator do %>
-        <div class="p-4 pb-1 flex justify-between items-center">
-          <div>
-            <h3 class="text-center text-lg font-semibold text-zinc-700 dark:text-zinc-100 cursor-default select-none">
+        <div class="grid grid-cols-2 border-b-[1px] border-zinc-200 mx-4 mt-[0.75rem]">
+          <div class="justify-self-start pb-2">
+            <h3 class="text-center text-lg font-normal text-zinc-700 dark:text-zinc-100 cursor-default select-none">
               <%= render_currency_name(@selected_currency) %>
             </h3>
           </div>
-          <div phx-window-keyup="update_price_type">
-            <%= if @selected_currency.info_type == :market do %>
-              <div class="flex flex-row items-center gap-4 cursor-default text-xs select-none">
+          <div class="justify-self-end pb-2 duration-300 opacity-20 hover:opacity-100">
+            <button
+              phx-click="toggle_calculator"
+              phx-value-currency_id={@selected_currency.id}
+              class="hover:text-red-500 dark:hover:text-red-500"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div phx-window-keyup="update_price_type" class="mx-4 mt-4">
+          <%= if @selected_currency.info_type == :market do %>
+            <div class="grid grid-cols-2 gap-4 cursor-default text-xs select-none">
+              <div class="justify-self-end">
                 <div
                   class={[
                     "p-2 rounded-md inline-block",
                     "bg-zinc-200 dark:bg-zinc-700 ",
                     "#{if @market_price_type == :buy_price, do: "border-[1px] border-zinc-800 dark:border-zinc-200", else: "cursor-pointer"}",
                     "text-green-700 dark:text-green-300",
                     "transform duration-100 ease-linear",
+                    "hover:shadow-outer-xs",
                     "flex flex-row"
                   ]}
                   phx-click="set_market_price_type"
@@ -57,12 +82,15 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
                     "w-4 h-4 ml-2 rounded-sm",
                     "text-center",
                     "bg-zinc-200 text-zinc-500",
-                    "border-[1px] border-zinc-400",
-                    "shadow-inner-xxs"
+                    "dark:bg-zinc-800 dark:text-zinc-400",
+                    "border-[1px] border-zinc-500",
+                    "shadow-inner-xs"
                   ]}>
                     <%= gettext("Buy_Shortcut") %>
                   </div>
                 </div>
+              </div>
+              <div class="justify-self-start">
                 <div
                   class={[
                     "p-2 rounded-md inline-block",
@@ -71,6 +99,7 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
                     "#{if @market_price_type == :sell_price, do: "border-zinc-800 dark:border-zinc-200", else: "border-white dark:border-zinc-800 cursor-pointer"}",
                     "text-red-700 dark:text-red-300",
                     "transform duration-100 ease-linear",
+                    "hover:shadow-outer-xs",
                     "flex flex-row"
                   ]}
                   phx-click="set_market_price_type"
@@ -84,54 +113,33 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
                     "w-4 h-4 ml-2 rounded-sm",
                     "text-center",
                     "bg-zinc-200 text-zinc-500",
-                    "border-[1px] border-zinc-400",
-                    "shadow-inner-xxs"
+                    "dark:bg-zinc-800 dark:text-zinc-400",
+                    "border-[1px] border-zinc-500",
+                    "shadow-inner-xs"
                   ]}>
                     <%= gettext("Sell_Shortcut") %>
                   </div>
                 </div>
               </div>
-            <% end %>
-            <%= if @selected_currency.info_type == :reference do %>
-              <div class="flex flex-row items-center gap-4 cursor-default text-xs select-none">
-                <div class="p-2 rounded-md bg-zinc-200 dark:bg-zinc-700 inline-block text-secondary">
-                  <%= gettext("Reference Price") %> <%= render_price(
-                    @selected_currency.variation_price
-                  ) %>
-                </div>
+            </div>
+          <% end %>
+          <%= if @selected_currency.info_type == :reference do %>
+            <div class="flex flex-row items-center gap-4 cursor-default text-xs select-none justify-self-center">
+              <div class="p-2 rounded-md bg-zinc-200 dark:bg-zinc-700 inline-block text-zinc-900 dark:text-zinc-200">
+                <%= gettext("Reference Price") %> <%= render_price(
+                  @selected_currency.variation_price
+                ) %>
               </div>
-            <% end %>
-          </div>
-          <div>
-            <button
-              phx-click="toggle_calculator"
-              phx-value-currency_id={@selected_currency.id}
-              class="text-zinc-700 dark:text-zinc-100 hover:text-red-500 dark:hover:text-red-500"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
+            </div>
+          <% end %>
         </div>
         <div class="p-4 pt-1 mt-4 flex flex-row">
           <.simple_form
             for={@conversion_form}
             id="conversion_form"
             phx-change="validate_conversion"
             class="w-full"
-            container_classes="flex-row gap-8"
+            container_classes="flex-row gap-4"
           >
             <.input_pill
               container_class="w-full"
@@ -144,7 +152,7 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
               min={0}
               step={100}
               required
-              class="shadow-inner-xs dark:shadow-dark-inner-xs !text-sky-500 font-bold dark:bg-zinc-700"
+              class="shadow-inner-xs dark:shadow-dark-inner-xs !text-sky-500 font-bold dark:bg-zinc-700 select-text"
             />
             <.input_pill
               container_class="w-full"
@@ -156,7 +164,7 @@ defmodule ExFinanceWeb.CustomComponents.CalculatorBanner do
               value={@conversion_form["usd_amount"]}
               min={0}
               required
-              class="shadow-inner-xs dark:shadow-dark-inner-xs !text-green-500 font-bold dark:bg-zinc-700"
+              class="shadow-inner-xs dark:shadow-dark-inner-xs !text-green-500 font-bold dark:bg-zinc-700 select-text"
             />
           </.simple_form>
         </div>

lib/ex_finance_web/live/public/currency_live/index.ex

@@ -137,29 +137,11 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Index do
         %{"market_price_type" => market_price_type},
         socket
       ) do
-    socket =
-      assign(
-        socket,
-        :market_price_type,
-        market_price_type |> String.to_existing_atom()
-      )
-
-    usd_amount = socket.assigns.conversion_form["usd_amount"]
-
-    input_value = parse_input_value(usd_amount)
-
-    ars_amount = convert_usd_to_ars(socket, input_value)
-
-    conversion_form =
-      Map.put(
-        socket.assigns.conversion_form,
-        "ars_amount",
-        ars_amount
-      )
-
-    socket = assign(socket, :conversion_form, conversion_form)
-
-    {:noreply, socket}
+    {:noreply,
+     on_price_type_update(
+       socket,
+       market_price_type |> String.to_existing_atom()
+     )}
   end
 
   def handle_event("update_price_type", %{"key" => "Escape"}, socket) do
@@ -173,38 +155,37 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Index do
       )
       when market_price_type != nil do
     {:noreply,
-     assign(
+     on_price_type_update(
        socket,
-       :market_price_type,
        :buy_price
      )}
   end
 
-  def handle_event("update_price_type", %{"key" => "b"}, socket) do
-    {:noreply,
-     assign(
-       socket,
-       :market_price_type,
-       :buy_price
-     )}
+  def handle_event(
+        "update_price_type",
+        %{"key" => "b"},
+        %{assigns: %{market_price_type: market_price_type}} = socket
+      )
+      when market_price_type != nil do
+    {:noreply, on_price_type_update(socket, :buy_price)}
   end
 
-  def handle_event("update_price_type", %{"key" => "v"}, socket) do
-    {:noreply,
-     assign(
-       socket,
-       :market_price_type,
-       :sell_price
-     )}
+  def handle_event(
+        "update_price_type",
+        %{"key" => "v"},
+        %{assigns: %{market_price_type: market_price_type}} = socket
+      )
+      when market_price_type != nil do
+    {:noreply, on_price_type_update(socket, :sell_price)}
   end
 
-  def handle_event("update_price_type", %{"key" => "s"}, socket) do
-    {:noreply,
-     assign(
-       socket,
-       :market_price_type,
-       :sell_price
-     )}
+  def handle_event(
+        "update_price_type",
+        %{"key" => "s"},
+        %{assigns: %{market_price_type: market_price_type}} = socket
+      )
+      when market_price_type != nil do
+    {:noreply, on_price_type_update(socket, :sell_price)}
   end
 
   def handle_event("update_price_type", _params, socket), do: {:noreply, socket}
@@ -225,17 +206,17 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Index do
       nil ->
         socket
         |> assign(:selected_currency, nil)
-        |> assign(:market_price_type, nil)
+        |> assign_price_type(nil)
 
       %Currency{info_type: :reference} = currency ->
         socket
         |> assign(:selected_currency, currency)
-        |> assign(:market_price_type, nil)
+        |> assign_price_type(nil)
 
       %Currency{info_type: :market} = currency ->
         socket
         |> assign(:selected_currency, currency)
-        |> assign(:market_price_type, :buy_price)
+        |> assign_price_type(:buy_price)
     end
   end
 
@@ -321,6 +302,10 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Index do
     assign(socket, :currencies, currencies)
   end
 
+  defp assign_price_type(socket, price_type) do
+    assign(socket, :market_price_type, price_type)
+  end
+
   # ----------------------------------------------------------------------------
   # Helper functions
   #
@@ -372,6 +357,25 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Index do
     |> Decimal.round(2)
   end
 
+  defp on_price_type_update(socket, price_type) do
+    socket = assign_price_type(socket, price_type)
+    usd_amount = parse_input_value(socket.assigns.conversion_form["usd_amount"])
+    ars_amount = convert_usd_to_ars(socket, usd_amount)
+
+    conversion_form =
+      Map.put(
+        socket.assigns.conversion_form,
+        "ars_amount",
+        ars_amount
+      )
+
+    socket
+    |> assign_conversion_form(conversion_form)
+  end
+
+  # ----------------------------------------------------------------------------
+  # Rendering Helper functions
+  #
   defp get_color_by_currency_type(%Currency{type: "bna"}), do: "green"
   defp get_color_by_currency_type(%Currency{type: "euro"}), do: "orange"
   defp get_color_by_currency_type(%Currency{type: "blue"}), do: "blue"

lib/ex_finance_web/live/public/currency_live/index.html.heex

@@ -62,25 +62,25 @@
             id={details_id(currency.id)}
           >
             <%= if currency.info_type == :reference do %>
-              <h3 class="mt-2 text-lg font-bold text-default dark:text-zinc-200 text-left cursor-text">
+              <h3 class="mt-2 text-lg font-normal text-default dark:text-zinc-200 text-left cursor-text">
                 <%= render_price(currency.variation_price) %>
               </h3>
             <% end %>
             <%= if currency.info_type == :market do %>
-              <h3 class="mt-2 text-lg font-bold text-default dark:text-zinc-200 text-left cursor-text whitespace-nowrap">
+              <h3 class="mt-2 text-lg font-normal text-default dark:text-zinc-200 text-left cursor-text whitespace-nowrap">
                 <%= render_price(currency.buy_price) %> - <%= render_price(
                   currency.sell_price
                 ) %>
               </h3>
-              <p class="text-sm font-semibold text-default dark:text-zinc-200 text-left">
-                <%= gettext("Spread") %>:
+              <p class="text-sm font-normal text-zinc-700 dark:text-zinc-200 text-left mb-2">
+                <span class="underline"><%= gettext("Spread") %></span>:
                 <span class="text-default dark:text-zinc-200">
                   <%= render_spread(currency) %>
                 </span>
               </p>
             <% end %>
-            <p class="text-sm font-semibold text-default dark:text-zinc-200 text-left">
-              <%= render_update_time(currency) %>
+            <p class="text-xs font-normal text-zinc-700 dark:text-zinc-300 text-left">
+              <%= render_update_time(currency) %>hs
             </p>
             <button class={"
               cursor-default

lib/ex_finance_web/live/public/currency_live/show.ex

@@ -293,7 +293,11 @@ defmodule ExFinanceWeb.Public.CurrencyLive.Show do
        "rgba(142, 81, 255, 1)"}
 
   defp get_datetime_label(%DateTime{} = datetime),
-    do: DatetimeUtils.human_readable_datetime(datetime, :shift_timezone)
+    do:
+      DatetimeUtils.human_readable_datetime(datetime,
+        shift_timezone: true,
+        only_date: true
+      )
 
   defp get_color_by_currency_type(%Currency{type: "bna"}), do: "green"
   defp get_color_by_currency_type(%Currency{type: "euro"}), do: "orange"