Utils: Align JS.time and Tailwind duration

lib/components/drawer.ex

@@ -65,9 +65,9 @@ defmodule ZoonkWeb.Components.Drawer do
   def show_drawer(js \\ %JS{}, id) do
     js
     |> JS.show(to: "##{id}")
-    |> JS.show(to: "##{id}-backdrop", transition: {"transition-opacity ease-linear duration-300", "opacity-0", "opacity-100"})
-    |> JS.show(to: "##{id}-container", transition: {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}, display: "flex")
-    |> JS.show(to: "##{id}-close", transition: {"ease-in-out duration-300", "opacity-0", "opacity-100"}, display: "flex")
+    |> JS.show(to: "##{id}-backdrop", time: 300, transition: {"transition-opacity ease-linear duration-300", "opacity-0", "opacity-100"})
+    |> JS.show(to: "##{id}-container", time: 300, transition: {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}, display: "flex")
+    |> JS.show(to: "##{id}-close", time: 300, transition: {"ease-in-out duration-300", "opacity-0", "opacity-100"}, display: "flex")
     |> JS.add_class("overflow-hidden", to: "body")
     |> JS.focus_first(to: "##{id}-content")
   end
@@ -77,9 +77,9 @@ defmodule ZoonkWeb.Components.Drawer do
   """
   def hide_drawer(js \\ %JS{}, id) do
     js
-    |> JS.hide(to: "##{id}-backdrop", transition: {"transition-opacity ease-linear duration-300", "opacity-100", "opacity-0"})
-    |> JS.hide(to: "##{id}-container", transition: {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"})
-    |> JS.hide(to: "##{id}-close", transition: {"ease-in-out duration-300", "opacity-100", "opacity-0"})
+    |> JS.hide(to: "##{id}-backdrop", time: 300, transition: {"transition-opacity ease-linear duration-300", "opacity-100", "opacity-0"})
+    |> JS.hide(to: "##{id}-container", time: 300, transition: {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"})
+    |> JS.hide(to: "##{id}-close", time: 300, transition: {"ease-in-out duration-300", "opacity-100", "opacity-0"})
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
     |> JS.remove_class("overflow-hidden", to: "body")
     |> JS.pop_focus()

lib/components/utils.ex

@@ -13,6 +13,7 @@ defmodule ZoonkWeb.Components.Utils do
   def show(js \\ %JS{}, selector) do
     JS.show(js,
       to: selector,
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", "opacity-100 translate-y-0 sm:scale-100"}
     )
   end
@@ -36,6 +37,7 @@ defmodule ZoonkWeb.Components.Utils do
     |> JS.show(to: "##{id}")
     |> JS.show(
       to: "##{id}-bg",
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> show("##{id}-container")
@@ -50,6 +52,7 @@ defmodule ZoonkWeb.Components.Utils do
     js
     |> JS.hide(
       to: "##{id}-bg",
+      time: 200,
       transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
     )
     |> hide("##{id}-container")