From 02d7bd2f8b49f3cb08898a5bdf1356bb1d28adeb Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 20 Apr 2024 08:33:39 +0700
Subject: [PATCH] tab padding fixes and filter tab :disabled css update

---
 .../SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx | 5 +----
 .../comps/SidePanelTabs/itemTabs/AnimationTab.tsx         | 5 +----
 .../PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx | 5 +----
 .../comps/SidePanelTabs/itemTabs/ObjectsTab.tsx           | 5 +----
 .../PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx  | 2 +-
 app/styles/tailwind.css                                   | 8 ++++----
 6 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index f1185989b0..d6d5ebdacb 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -97,14 +97,13 @@ export const AudioTabComponent = () => {
 
   return (
     <>
-      <div className="w-full overflow-x-auto p-4">
+      <div className="w-full overflow-x-auto p-4 pb-0">
         <TabTitle title="Audio" />
         <div className="mb-4 flex justify-start gap-2">
           <button
             className={twMerge(
               "filter-tab",
               audioFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.ALL)}>
             All
@@ -113,7 +112,6 @@ export const AudioTabComponent = () => {
             className={twMerge(
               "filter-tab",
               audioFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
             disabled={!allAudioItems.some((item) => item.isMine)}>
@@ -125,7 +123,6 @@ export const AudioTabComponent = () => {
               audioFilter.value === AssetFilterOption.BOOKMARKED
                 ? "active"
                 : "",
-              "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
             disabled={!allAudioItems.some((item) => item.isBookmarked)}>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AnimationTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AnimationTab.tsx
index 94b9a14051..db6bcec92a 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AnimationTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AnimationTab.tsx
@@ -12,14 +12,13 @@ export const AnimationTab = () => {
 
   return (
     <>
-      <div className="w-full overflow-x-auto p-4">
+      <div className="w-full overflow-x-auto p-4 pb-0">
         <TabTitle title="Animation" />
         <div className="mb-4 flex justify-start gap-2">
           <button
             className={twMerge(
               "filter-tab",
               animationFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
             )}
             onClick={() => (animationFilter.value = AssetFilterOption.ALL)}>
             All
@@ -28,7 +27,6 @@ export const AnimationTab = () => {
             className={twMerge(
               "filter-tab",
               animationFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
             )}
             onClick={() => (animationFilter.value = AssetFilterOption.MINE)}
             disabled={!animationItems.value.some((item) => item.isMine)}>
@@ -40,7 +38,6 @@ export const AnimationTab = () => {
               animationFilter.value === AssetFilterOption.BOOKMARKED
                 ? "active"
                 : "",
-              "disabled",
             )}
             onClick={() =>
               (animationFilter.value = AssetFilterOption.BOOKMARKED)
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx
index 138ee1b85a..3eac5231f5 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/CameraTab.tsx
@@ -12,14 +12,13 @@ export const CameraTab = () => {
 
   return (
     <>
-      <div className="w-full overflow-x-auto p-4">
+      <div className="w-full overflow-x-auto p-4 pb-0">
         <TabTitle title="Camera" />
         <div className="mb-4 flex justify-start gap-2">
           <button
             className={twMerge(
               "filter-tab",
               cameraFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
             )}
             onClick={() => (cameraFilter.value = AssetFilterOption.ALL)}>
             All
@@ -28,7 +27,6 @@ export const CameraTab = () => {
             className={twMerge(
               "filter-tab",
               cameraFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
             )}
             onClick={() => (cameraFilter.value = AssetFilterOption.MINE)}
             disabled={!cameraItems.value.some((item) => item.isMine)}>
@@ -40,7 +38,6 @@ export const CameraTab = () => {
               cameraFilter.value === AssetFilterOption.BOOKMARKED
                 ? "active"
                 : "",
-              "disabled",
             )}
             onClick={() => (cameraFilter.value = AssetFilterOption.BOOKMARKED)}
             disabled={!cameraItems.value.some((item) => item.isBookmarked)}>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
index 135f411620..fdcf20659f 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx
@@ -25,7 +25,7 @@ export const ObjectsTab = ({ type }: Props) => {
 
   return (
     <>
-      <div className="w-full overflow-x-auto p-4">
+      <div className="w-full overflow-x-auto p-4 pb-0">
         <TabTitle
           title={type === AssetType.CHARACTER ? "Characters" : "Objects"}
         />
@@ -34,7 +34,6 @@ export const ObjectsTab = ({ type }: Props) => {
             className={twMerge(
               "filter-tab",
               assetFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
             )}
             onClick={() => (assetFilter.value = AssetFilterOption.ALL)}>
             All
@@ -43,7 +42,6 @@ export const ObjectsTab = ({ type }: Props) => {
             className={twMerge(
               "filter-tab",
               assetFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
             )}
             onClick={() => (assetFilter.value = AssetFilterOption.MINE)}
             disabled={!items.value.some((item) => item.isMine)}>
@@ -55,7 +53,6 @@ export const ObjectsTab = ({ type }: Props) => {
               assetFilter.value === AssetFilterOption.BOOKMARKED
                 ? "active"
                 : "",
-              "disabled",
             )}
             onClick={() => (assetFilter.value = AssetFilterOption.BOOKMARKED)}
             disabled={!items.value.some((item) => item.isBookmarked)}>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
index a5af1d0a7c..844053782c 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx
@@ -7,7 +7,7 @@ export const ShapeTab = () => {
   useSignals();
 
   return (
-    <div className="w-full overflow-x-auto p-4">
+    <div className="w-full overflow-x-auto p-4 pb-0">
       <TabTitle title="Shapes" />
       <div className="mb-4 flex justify-start gap-2">
         <ItemElements
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index d980c43d3a..4473d25b6c 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -4,14 +4,14 @@
 
 @layer components {
   .filter-tab {
-    @apply text-nowrap rounded-lg border-2 border-assets-background bg-assets-background px-3 py-2 text-sm font-medium transition-all duration-150 hover:border-assets-background/0 hover:bg-assets-background/80;
+    @apply text-nowrap rounded-lg border-2 border-assets-background bg-assets-background px-2.5 py-1.5 text-sm font-medium text-white/80 transition-all duration-150 hover:border-assets-background/0 hover:bg-assets-background/80;
   }
 
   .filter-tab.active {
-    @apply border-2 border-brand-primary hover:border-brand-primary hover:bg-assets-background;
+    @apply border-2 border-brand-primary text-white hover:border-brand-primary hover:bg-assets-background;
   }
 
-  .filter-tab.disabled {
-    @apply hover:bg-assets-background disabled:text-white/50;
+  .filter-tab:disabled {
+    @apply border-transparent bg-assets-background/50 hover:border-transparent disabled:text-white/30;
   }
 }