some filter styling

coral-xyz · Mar 11, 2023 · eea2c18 · eea2c18 · vercel · Mar 11, 2023
1 parent 66574c2
commit eea2c18
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 60 deletions.
diff --git a/packages/app-extension/src/spotlight/GroupIdentifier.tsx b/packages/app-extension/src/spotlight/GroupIdentifier.tsx
@@ -15,8 +15,14 @@ export const GroupIdentifier = ({ name }: { name: string }) => {
       }}
     >
       <div style={{ color: theme.custom.colors.icon }}>{name}</div>
-      <div>
-        <PushDetail />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        <PushDetail style={{ width: "22px" }} />
       </div>
     </div>
   );

diff --git a/packages/app-extension/src/spotlight/SearchBody.tsx b/packages/app-extension/src/spotlight/SearchBody.tsx
@@ -1,3 +1,6 @@
+import { useCustomTheme } from "@coral-xyz/themes";
+import { Divider } from "@mui/material";
+
 import { SpotlightContacts } from "./SpotlightContacts";
 import { SpotlightGroups } from "./SpotlightGroups";
 import { SpotlightNfts } from "./SpotlightNfts";
@@ -19,6 +22,7 @@ export const SearchBody = ({
   setOpen: any;
   setSelectedContact: any;
 }) => {
+  const theme = useCustomTheme();
   const contacts = useSearchedContacts(searchFilter);
   const groups = useSearchedGroupsCollections(searchFilter);
   const nfts = useSearchedNfts(searchFilter);
@@ -30,7 +34,11 @@ export const SearchBody = ({
   if (!searchFilter) return <div />;
 
   return (
-    <div>
+    <div
+      style={{
+        padding: 16,
+      }}
+    >
       <div>
         <SpotlightContacts
           selectedIndex={
@@ -40,43 +48,74 @@ export const SearchBody = ({
           setSelectedContact={setSelectedContact}
         />
       </div>
-      <div style={{ marginTop: 10 }}>
-        <SpotlightGroups
-          selectedIndex={
-            currentCounter >= contacts.length &&
-            currentCounter < contacts.length + groups.length
-              ? currentCounter - contacts.length
-              : null
-          }
-          groups={groups}
-          setOpen={setOpen}
-        />
-      </div>
-      <div style={{ marginTop: 10 }}>
-        <SpotlightNfts
-          selectedIndex={
-            currentCounter >= contacts.length + groups.length &&
-            currentCounter < contacts.length + groups.length + nfts.length
-              ? currentCounter - contacts.length - groups.length
-              : null
-          }
-          nfts={nfts}
-          setOpen={setOpen}
-        />
-      </div>
-      <div style={{ marginTop: 10 }}>
-        <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
-          }
-          tokens={tokens}
-          setOpen={setOpen}
-        />
-      </div>
+      {groups.length > 0 ? <>
+        <Divider
+          style={{
+              backgroundColor: theme.custom.colors.nav,
+              marginTop: 12,
+              marginBottom: 12,
+            }}
+          />
+        <div>
+          <SpotlightGroups
+            selectedIndex={
+                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>
+          <SpotlightNfts
+            selectedIndex={
+                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>
+          <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
+              }
+            tokens={tokens}
+            setOpen={setOpen}
+            />
+        </div>
+      </> : null}
     </div>
   );
 };
diff --git a/packages/app-extension/src/spotlight/Spotlight.tsx b/packages/app-extension/src/spotlight/Spotlight.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import {
   Blockchain,
@@ -14,6 +13,7 @@ import {
   useNavigation,
 } from "@coral-xyz/recoil";
 import { useCustomTheme } from "@coral-xyz/themes";
+import { Divider } from "@mui/material";
 import Box from "@mui/material/Box";
 import Modal from "@mui/material/Modal";
 
@@ -82,8 +82,8 @@ export const Spotlight = () => {
         sx={{ ...style }}
         style={{
           background: theme.custom.colors.background,
-          width: isXs ? 350 : 400,
-          padding: 20,
+          width: isXs ? 343 : 400,
+          borderRadius: "12px",
         }}
       >
         <SpotlightInner
@@ -118,6 +118,7 @@ function SpotlightInner({
   const { push, toRoot } = useNavigation();
   const activeWallet = useActiveWallet();
   const connectionUrl = useBlockchainConnectionUrl(activeWallet.blockchain);
+  const theme = useCustomTheme();
 
   if (selectedContact) {
     return (
@@ -207,12 +208,19 @@ function SpotlightInner({
         searchFilter={searchFilter}
         setSearchFilter={setSearchFilter}
       />
-      <SearchBody
-        arrowIndex={arrowIndex}
-        searchFilter={searchFilter}
-        setOpen={setOpen}
-        setSelectedContact={setSelectedContact}
-      />
+      {searchFilter.trim() !== "" ? <>
+        <Divider
+          style={{
+              backgroundColor: theme.custom.colors.nav,
+            }}
+          />
+        <SearchBody
+          arrowIndex={arrowIndex}
+          searchFilter={searchFilter}
+          setOpen={setOpen}
+          setSelectedContact={setSelectedContact}
+          />
+      </> : null}
     </div>
   );
 }
diff --git a/packages/app-extension/src/spotlight/styles.ts b/packages/app-extension/src/spotlight/styles.ts
@@ -2,14 +2,19 @@ import { styles } from "@coral-xyz/themes";
 
 export const useStyles = styles((theme) => ({
   searchField: {
-    marginTop: "16px",
-    marginBottom: "16px",
+    marginTop: 0,
+    marginBottom: 0,
     width: "inherit",
     display: "flex",
     "& .MuiOutlinedInput-root": {
+      border: "none !important",
+      background: "transparent",
       "& input": {
-        paddingTop: 0,
-        paddingBottom: 0,
+        paddingTop: 4,
+        paddingBottom: 4,
+      },
+      "& fieldset": {
+        border: "none !important",
       },
     },
   },

diff --git a/packages/react-common/src/components/base/List.tsx b/packages/react-common/src/components/base/List.tsx
@@ -106,22 +106,20 @@ export function ListItem({
         </div>
         {detail}
       </MuiListItem>
-      {!isLast && !disableBottomBorder && (
-        <Divider
-          style={{
+      {!isLast && !disableBottomBorder ? <Divider
+        style={{
             backgroundColor: borderColor
               ? borderColor
               : theme.custom.colors.border,
             height: "1px",
           }}
-          classes={{ root: _classes.dividerRoot }}
-        />
-      )}
+        classes={{ root: _classes.dividerRoot }}
+        /> : null}
     </>
   );
 }
 
-export function PushDetail() {
+export function PushDetail({ style }: { style?: React.CSSProperties }) {
   const theme = useCustomTheme();
   return (
     <div
@@ -134,6 +132,7 @@ export function PushDetail() {
       <ChevronRight
         style={{
           color: theme.custom.colors.icon,
+          ...style,
         }}
       />
     </div>