From 8317fecc2401281fca4b3cfc478a489f2b7c738e Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 17 Jul 2023 15:27:15 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(index.css):=20add=20animat?=
 =?UTF-8?q?ion=20for=20accordion=20content=20to=20slide=20down=20and=20sli?=
 =?UTF-8?q?de=20up=20for=20better=20user=20experience=20=F0=9F=94=A7=20cho?=
 =?UTF-8?q?re(tailwind.config.js):=20remove=20unused=20keyframes=20and=20a?=
 =?UTF-8?q?nimations=20related=20to=20accordion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/index.css      | 28 ++++++++++++++++++++++++++++
 src/frontend/tailwind.config.js | 30 +-----------------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index ffba3b082..b76e2a724 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style
   cursor: default;
 }
 
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 
 @layer components {
   .round-buttons-position {
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 429b9b26a..b1ac8f14d 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -28,20 +28,6 @@ module.exports = {
       },
     },
     extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
       colors: {
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
@@ -128,21 +114,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
-      },
-      keyframes: {
-        slideDown: {
-          from: { height: 0 },
-          to: { height: 100 },
-        },
-        slideUp: {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "slideDown 300ms ease-out",
-        "accordion-up": "slideUp 300ms ease-in",
-      },
+      }
     },
   },