align modal bg styles

This commit is contained in:
saml33 2022-06-23 12:15:39 +10:00
parent de100772a9
commit f58d236217
3 changed files with 7 additions and 6 deletions

View File

@ -114,25 +114,26 @@ const AccountSelect = ({
</Listbox.Button>
</div>
<Listbox.Options
className={`thin-scroll absolute right-0 top-14 z-20 max-h-60 w-full overflow-auto rounded-md bg-th-bkg-3 p-1`}
className={`thin-scroll absolute right-0 top-14 z-20 max-h-60 w-full overflow-auto rounded-md bg-th-bkg-2 p-1`}
>
{accounts.map((account) => {
const symbolForAccount = account.config.symbol
return (
<Listbox.Option
className="mb-0"
disabled={account.uiBalance === 0}
key={account?.account.publicKey.toBase58()}
value={account?.account.publicKey.toBase58()}
>
{({ disabled, selected }) => (
<div
className={`default-transition px-2 py-1 text-th-fgd-1 ${
className={`default-transition rounded p-2 text-th-fgd-1 ${
selected && `text-th-primary`
} ${
disabled
? 'text-th-fgd-1 opacity-50 hover:cursor-not-allowed hover:text-th-fgd-1'
: 'hover:cursor-pointer hover:text-th-primary'
: 'hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary'
}`}
>
<div className={`flex items-center`}>

View File

@ -41,7 +41,7 @@ const Modal: any = React.forwardRef<any, any>((props, ref) => {
{isOpen ? (
<div
className={`inline-block min-h-screen bg-th-bkg-2 text-left
className={`inline-block min-h-screen border border-th-bkg-3 bg-th-bkg-1 text-left
sm:min-h-full sm:rounded-lg ${
noPadding ? '' : 'px-8 pt-6 pb-6'
} w-full transform align-middle shadow-lg transition-all sm:max-w-md ${className}`}

View File

@ -33,7 +33,7 @@ const Select = ({
{open ? (
<Listbox.Options
static
className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left overflow-auto rounded-md bg-th-bkg-3 p-2 text-th-fgd-1 outline-none ${dropdownPanelClassName}`}
className={`thin-scroll absolute left-0 z-20 mt-1 max-h-60 w-full origin-top-left overflow-auto rounded-md bg-th-bkg-2 p-2 text-th-fgd-1 outline-none ${dropdownPanelClassName}`}
>
{children}
</Listbox.Options>
@ -50,7 +50,7 @@ const Option = ({ value, children, className = '' }) => {
<Listbox.Option className="mb-0" value={value}>
{({ selected }) => (
<div
className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-4 hover:text-th-primary ${
className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary ${
selected ? 'text-th-primary' : ''
} ${className}`}
>