feat(ui): add transition to tab text

usenocturne · Dec 26, 2024 · 9d6e441 · 9d6e441
1 parent 13696e3
commit 9d6e441
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/left-code-tabs.tsx b/src/components/left-code-tabs.tsx
@@ -122,7 +122,7 @@ const LeftCodeTabs = () => {
                   className={
                     activeTab === 'playlist'
                       ? 'rounded-tl-xl border-l-4 border-r border-t-4 border-l-gray-50 border-r-gray-200 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 py-2 pl-5 pr-4 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 py-2 pl-5 pr-4 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">
@@ -144,7 +144,7 @@ const LeftCodeTabs = () => {
                   className={
                     activeTab === 'artist'
                       ? 'rounded-tr-xl border-t-4 border-l-gray-200 border-r-gray-50 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">

diff --git a/src/components/right-code-tabs.tsx b/src/components/right-code-tabs.tsx
@@ -114,7 +114,7 @@ const RightCodeTabs = () => {
                   className={
                     activeTab === 'setup'
                       ? 'rounded-tl-xl border-r border-t-4 border-l-gray-50 border-r-gray-200 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">
@@ -136,7 +136,7 @@ const RightCodeTabs = () => {
                   className={
                     activeTab === 'readme'
                       ? 'rounded-tr-xl border-t-4 border-l-gray-200 border-r-gray-50 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">