jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styles: fix dropdown sorting styles (#238)

This commit is contained in:
Camila Sosa Morales 2023-04-24 18:22:26 -03:00 committed by GitHub
parent 0354877581
commit 737715e1e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/core/combobox/dropdown.tsx
View File

@ -96,7 +96,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
{selectedValue && selectedValue.label ? selectedValue.label : 'Select'} {selectedValue && selectedValue.label ? selectedValue.label : 'Select'}
</span> </span>
<span <span
className={`pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4 ${textColorCss}`} className={`pointer-events-none absolute top-1 bottom-0 right-0 flex items-center pr-4 ${textColorCss}`}
> >
<Icon name="chevron-down" /> <Icon name="chevron-down" />
</span> </span>
@ -172,7 +172,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <Listbox.Options
className={`absolute mt-1 max-h-32 ${width} right-0 z-10 overflow-auto rounded-xl bg-black px-3 pt-2 border-solid border-slate6 border text-base focus:outline-none sm:text-sm`} className={`absolute mt-1 max-h-36 ${width} right-0 z-10 overflow-auto rounded-xl bg-black px-3 pt-2 border-solid border-slate6 border text-base focus:outline-none sm:text-sm`}
> >
{items.map((option: DropdownItem) => ( {items.map((option: DropdownItem) => (
<DropdownOption key={option.value} option={option} /> <DropdownOption key={option.value} option={option} />

4
ui/src/views/explore/explore-list/nfa-search.fragment.tsx
View File

@ -9,8 +9,8 @@ import { NFASearchFragmentStyles as S } from './nfa-search.styles';
const orderResults: DropdownItem[] = [ const orderResults: DropdownItem[] = [
{ value: 'newest', label: 'Newest' }, { value: 'newest', label: 'Newest' },
{ value: 'oldest', label: 'Oldest' }, { value: 'oldest', label: 'Oldest' },
{ value: 'a-z', label: 'Name A-Z' }, { value: 'a-z', label: 'Sort A-Z' },
{ value: 'z-a', label: 'Name Z-A' }, { value: 'z-a', label: 'Sort Z-A' },
]; ];
export const NFASearchFragment: React.FC = () => { export const NFASearchFragment: React.FC = () => {

4
ui/src/views/explore/explore-list/nfa-search.styles.ts
View File

@ -31,6 +31,10 @@ export const NFASearchFragmentStyles = {
width: '100%', width: '100%',
maxWidth: '30rem', maxWidth: '30rem',
justifySelf: 'center', justifySelf: 'center',
button: {
minWidth: '$28',
},
}), }),
}, },
}; };