From b8662cf26d35eacce17dc8901e2d0879e1a6dc38 Mon Sep 17 00:00:00 2001
From: Armani Ferrante <armaniferrante@gmail.com>
Date: Sat, 11 Mar 2023 10:50:36 -0600
Subject: [PATCH] more styling for filters

---
 .../src/spotlight/SearchBody.tsx              | 140 ++++++++++--------
 .../app-extension/src/spotlight/Spotlight.tsx |  22 +--
 2 files changed, 88 insertions(+), 74 deletions(-)

diff --git a/packages/app-extension/src/spotlight/SearchBody.tsx b/packages/app-extension/src/spotlight/SearchBody.tsx
index fa8d7f22c..55872094d 100644
--- a/packages/app-extension/src/spotlight/SearchBody.tsx
+++ b/packages/app-extension/src/spotlight/SearchBody.tsx
@@ -33,89 +33,101 @@ export const SearchBody = ({
 
   if (!searchFilter) return <div />;
 
-  return (
-    <div
-      style={{
-        padding: 16,
-      }}
-    >
-      <div>
-        <SpotlightContacts
-          selectedIndex={
-            currentCounter < contacts.length ? currentCounter : null
-          }
-          contacts={contacts}
-          setSelectedContact={setSelectedContact}
-        />
-      </div>
-      {groups.length > 0 ? <>
-        <Divider
-          style={{
-              backgroundColor: theme.custom.colors.nav,
-              marginTop: 12,
-              marginBottom: 12,
-            }}
+  const rows = [
+    {
+      component: (
+        <div>
+          <SpotlightContacts
+            selectedIndex={
+              currentCounter < contacts.length ? currentCounter : null
+            }
+            contacts={contacts}
+            setSelectedContact={setSelectedContact}
           />
+        </div>
+      ),
+      count: contacts.length,
+      isFirst: contacts.length > 0,
+    },
+    {
+      component: (
         <div>
           <SpotlightGroups
             selectedIndex={
-                currentCounter >= contacts.length &&
-                currentCounter < contacts.length + groups.length
-                  ? currentCounter - contacts.length
-                  : null
-              }
+              currentCounter >= contacts.length &&
+              currentCounter < contacts.length + groups.length
+                ? currentCounter - contacts.length
+                : null
+            }
             groups={groups}
             setOpen={setOpen}
-            />
-        </div>
-      </> : null}
-      {nfts.length > 0 ? <>
-        <Divider
-          style={{
-              backgroundColor: theme.custom.colors.nav,
-              marginTop: 12,
-              marginBottom: 12,
-            }}
           />
+        </div>
+      ),
+      count: groups.length,
+      isFirst: contacts.length === 0 && groups.length > 0,
+    },
+    {
+      component: (
         <div>
           <SpotlightNfts
             selectedIndex={
-                currentCounter >= contacts.length + groups.length &&
-                currentCounter < contacts.length + groups.length + nfts.length
-                  ? currentCounter - contacts.length - groups.length
-                  : null
-              }
+              currentCounter >= contacts.length + groups.length &&
+              currentCounter < contacts.length + groups.length + nfts.length
+                ? currentCounter - contacts.length - groups.length
+                : null
+            }
             nfts={nfts}
             setOpen={setOpen}
-            />
-        </div>
-      </> : null}
-      {tokens.length > 0 ? <>
-        <Divider
-          style={{
-              backgroundColor: theme.custom.colors.nav,
-              marginTop: 12,
-              marginBottom: 12,
-            }}
           />
+        </div>
+      ),
+      count: nfts.length,
+      isFirst: contacts.length === 0 && groups.length === 0 && nfts.length > 0,
+    },
+    {
+      component: (
         <div>
           <SpotlightTokens
             selectedIndex={
-                currentCounter >=
-                  contacts.length + groups.length + nfts.length &&
-                currentCounter <
-                  contacts.length + groups.length + nfts.length + tokens.length
-                  ? currentCounter -
-                    contacts.length -
-                    groups.length -
-                    nfts.length
-                  : null
-              }
+              currentCounter >= contacts.length + groups.length + nfts.length &&
+              currentCounter <
+                contacts.length + groups.length + nfts.length + tokens.length
+                ? currentCounter - contacts.length - groups.length - nfts.length
+                : null
+            }
             tokens={tokens}
             setOpen={setOpen}
-            />
+          />
         </div>
-      </> : null}
+      ),
+      count: tokens.length,
+      isFirst:
+        contacts.length === 0 &&
+        groups.length === 0 &&
+        nfts.length === 0 &&
+        tokens.length > 0,
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        padding: 16,
+      }}
+    >
+      {rows.map((row) => (
+        <>
+          {row.count > 0 && !row.isFirst ? <Divider
+            style={{
+                backgroundColor: theme.custom.colors.nav,
+                marginTop: 12,
+                marginBottom: 12,
+              }}
+            /> : null}
+          {row.component}
+        </>
+      ))}
     </div>
   );
 };
diff --git a/packages/app-extension/src/spotlight/Spotlight.tsx b/packages/app-extension/src/spotlight/Spotlight.tsx
index 2d771da81..4b07e0aeb 100644
--- a/packages/app-extension/src/spotlight/Spotlight.tsx
+++ b/packages/app-extension/src/spotlight/Spotlight.tsx
@@ -82,7 +82,7 @@ export const Spotlight = () => {
         sx={{ ...style }}
         style={{
           background: theme.custom.colors.background,
-          width: isXs ? 343 : 400,
+          width: isXs ? 343 : 500,
           borderRadius: "12px",
         }}
       >
@@ -208,19 +208,21 @@ function SpotlightInner({
         searchFilter={searchFilter}
         setSearchFilter={setSearchFilter}
       />
-      {searchFilter.trim() !== "" ? <>
-        <Divider
-          style={{
+      {searchFilter.trim() !== "" ? (
+        <>
+          <Divider
+            style={{
               backgroundColor: theme.custom.colors.nav,
             }}
           />
-        <SearchBody
-          arrowIndex={arrowIndex}
-          searchFilter={searchFilter}
-          setOpen={setOpen}
-          setSelectedContact={setSelectedContact}
+          <SearchBody
+            arrowIndex={arrowIndex}
+            searchFilter={searchFilter}
+            setOpen={setOpen}
+            setSelectedContact={setSelectedContact}
           />
-      </> : null}
+        </>
+      ) : null}
     </div>
   );
 }