From a8db82a977ee5d7de7f86fb092d9ae213d81f694 Mon Sep 17 00:00:00 2001
From: Will Ceolin <wceolin@users.noreply.github.com>
Date: Fri, 28 Jun 2024 19:53:03 -0300
Subject: [PATCH] Utils: Align JS.time and Tailwind duration

---
 lib/components/drawer.ex | 12 ++++++------
 lib/components/utils.ex  |  3 +++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/lib/components/drawer.ex b/lib/components/drawer.ex
index 91ba033d..23c7dda5 100644
--- a/lib/components/drawer.ex
+++ b/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()
diff --git a/lib/components/utils.ex b/lib/components/utils.ex
index 5bffce0f..0d704519 100644
--- a/lib/components/utils.ex
+++ b/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")