From c4bc48d55709b8b0e762278ca0b1491453062ec0 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 7 May 2024 10:35:55 +0700
Subject: [PATCH] expressions tab styling fixes (#318)

- added title
- fixed broken layout
---
 .../SidePanelTabs/itemTabs/ExpressionTab.tsx  |  82 ++++++++++--------
 public/resources/icons/expressions.png        | Bin 771 -> 729 bytes
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ExpressionTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ExpressionTab.tsx
index 9e017d0f4c..9395178e02 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ExpressionTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ExpressionTab.tsx
@@ -5,50 +5,58 @@ import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/It
 import { Button } from "~/components";
 import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
+import { TabTitle } from "../comps/TabTitle";
 
 export const ExpressionTab = () => {
   useSignals();
 
   return (
     <>
-      <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start gap-2 px-4">
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (expressionFilter.value = AssetFilterOption.ALL)}>
-            All
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (expressionFilter.value = AssetFilterOption.MINE)}
-            disabled={!expressionItems.value.some((item) => item.isMine)}>
-            My Expressions
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.BOOKMARKED
-                ? "active"
-                : "",
-              "disabled",
-            )}
-            onClick={() =>
-              (expressionFilter.value = AssetFilterOption.BOOKMARKED)
-            }
-            disabled={!expressionItems.value.some((item) => item.isBookmarked)}>
-            Bookmarked
-          </button>
+      <TabTitle title="Expressions" />
+
+      <div>
+        <div>
+          <div className="flex gap-2 overflow-x-auto overflow-y-hidden px-4">
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.ALL
+                  ? "active"
+                  : "",
+              )}
+              onClick={() => (expressionFilter.value = AssetFilterOption.ALL)}>
+              All
+            </button>
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.MINE
+                  ? "active"
+                  : "",
+              )}
+              onClick={() => (expressionFilter.value = AssetFilterOption.MINE)}
+              disabled={!expressionItems.value.some((item) => item.isMine)}>
+              My Expressions
+            </button>
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.BOOKMARKED
+                  ? "active"
+                  : "",
+              )}
+              onClick={() =>
+                (expressionFilter.value = AssetFilterOption.BOOKMARKED)
+              }
+              disabled={
+                !expressionItems.value.some((item) => item.isBookmarked)
+              }>
+              Bookmarked
+            </button>
+          </div>
         </div>
       </div>
-      <div className="w-full px-4 pb-4">
+      <div className="w-full px-4">
         <Button
           icon={faCirclePlus}
           variant="action"
@@ -56,7 +64,7 @@ export const ExpressionTab = () => {
           Upload Expression
         </Button>
       </div>
-      <div className="h-full w-full overflow-y-auto px-4">
+      <div className="h-full grow overflow-y-auto px-4">
         <ItemElements
           items={expressionItems.value}
           assetFilter={expressionFilter.value}
diff --git a/public/resources/icons/expressions.png b/public/resources/icons/expressions.png
index 2a601a452a44a1d9cb157fd6a17e9e949948e8c4..4697a4d2c5b5ccd6fd9fcf598d05ca28bd85330a 100644
GIT binary patch
delta 706
zcmV;z0zLhM2H6FWBYyx1a7bBm000&x000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2
zO+f$vv5yP<VFdsH0&Yn}K~#7F&6$r?!ypjG4;L^_AWoo8ARE*TbOXCVx`A#Goj^Be
zouG9B>I8O!^G?uGOu~`UKfm|R`1%g`a+EKGDi{bN8oFFk@PGA+qVmD4D3(4J6z@u@
z8SEMoRZ&bRzAzt4(NJh8jTiQW<!FitrH;lptYRrF#T{$|maSSBkB|$xDV^f}nDdx9
z0_V7YrfphITEsnpvyFXYFg4wjaF2&)9BNX5I87HWvxdXMCVxT3&ex48u0ba5nc|G%
z)^{cu(D0xXFMopk%4=D})f1NAVzAoi|60)IA;@QUka}tr3T%Xpn&`$VK^q;lc|;j?
z*vJYSjpF%8w4Jx)OBdo7=bxb4m1vOB_MKZ6%n#w&F}z4_;CQ)YfjOqETRy7_=EwY0
zP-isQxEXW{pzj9R9b!Qv$QUnI;C(dUt)R_@&4BYnDSs7UJ`FnG<Y%YE(>P~@&XS%n
z6UBevh~X)gJgyGK>evM?S>OVWmmh(%MA93@*k4OjdlmKB$ATA$0k;qA;+pnme^sV@
z_Puj({ujQmw;Ax#2aDo9X4Kbb)YlxkF~5m@c2UEQ!2XSc4HN60L>8a(c#?`^FSR}6
zHeqsVUw`)sg~9Y5RL2cc8_5Y20^RuzimDehl5EE(uq6U<7Q4=E(4E7iXmG&6k1xQh
zp#Qs6N0N62i>?w{C`@`}_wU7Bb#%(UXh6oy#|Ny9TvMEa+m0DoH)P66U5hgPUGMXJ
zW{N|s4CSwg+mL_!7KvoHw^$zjPCh^h(7Aqt<vZY+DgJZ{g<8yqD^}+UQ!o%3h~K9T
oxE+o55&jJEw}Sz<Lf>Hk-@Vi;U}~ic%K!iX07*qoM6N<$f=H4{<^TWy

delta 748
zcmV<I0u%k&1%n2VBYy(QNkl<ZcwWU>?QP>Q49y5PLPod|GD1ek2;HFF;PNj(<-h@Q
zk^QgTAl)F{z}+Atw0x4kL`jw`J1&8TG!ZFMqDVcvt5u>1aoz|apR%lcJ06RQKJQsp
zd~4uudBd0xmlx=A`-e!L=YJ@eXET^+&?1WbaLCtu-pQf^D}VnvoTg&FK!x~^G^XrW
z2-WNBWyk%El9_kS3HacCgMyTj@s&^ZILI4(@;JPrE09m}a9nvDPFW(YJ_OT!JYII(
zXlbA*d0a~946Jp-wT+gAygSb$4V-LcCr-ME<TkGTly@PDO`aF)SRYoZv3p#}gQ~we
zTw@L$1O1fgg@45?s`xf`F?MA%dEOeW+IHm7>u@*}>%I;7+H)Nju=v&}{_M$Z=SmCx
z_GRleC~sUpz7XYI8GvcngKpp~neGsvzoC=<2iG6xk62L5IqD3S4v@|-P4dnMd~jXv
zNF&$lp|bT+{g$2+h%MxRLGJs`Vyd6_wD^Kls1RUO*?()8O;l4cu4AHKjj)X`NPr5(
z{xJweHuYJGS)2s@-`2t9_V_ST0$da$Q@k`(iiaBQZ-W~Bm^QOCRGZPyw)S8LJlo1A
zy^uMMgJL)D%`>$<-a&PMP-my+{I_Wn5PU~f>IZT-Dn3Z>lYpaQ0Aqv``X^QJjuQtx
zm+iAbdw+8c?To=HW|jbP=x(9m``E*9Ckk$%;ilcAc41yuzV+swMM75|KMpV$B$9Y1
zV;D>j{eH*x(ZM9fN@D2v96^SID=KUE8i~35v&0ua^#%;K6~IO53<;&WMunY-3A82&
z&!OySm~_r7*#Jv+;Hta8d8=P)o;PS8^#w3u9%X4gzj&oi#|R=j4QS{|tt>L#6A_tK
zpCDbs4K)?GlRfWY#)^JzfjgBuNrl`er8Fc>plLgb9lN|dBrunNX*7%`Q*4I+8$z)e
eMXOp?k{~}hZA*VS!B5!$0000<MNUMnLSTXpDrf}&