Skip to content

Commit

Permalink
more styling for filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@armaniferrante
armaniferrante committed Mar 11, 2023
1 parent eea2c18 commit b8662cf
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 74 deletions.
140 changes: 76 additions & 64 deletions packages/app-extension/src/spotlight/SearchBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
22 changes: 12 additions & 10 deletions packages/app-extension/src/spotlight/Spotlight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
>
Expand Down Expand Up @@ -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>
);
}

1 comment on commit b8662cf

@vercel
Copy link

@vercel vercel bot commented on b8662cf Mar 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

backpack – ./

backpack-git-master-200ms.vercel.app
backpack-200ms.vercel.app
www.backpack.app
backpack.app
devnet.backpack.app

Please sign in to comment.