oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

wallet & menu affordance tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-30 10:39:22 +02:00
parent 818404c5ef
commit 8efbe74e51
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/molecules/Menu.module.css
View File

@ -66,7 +66,7 @@
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
margin-left: var(--spacer); margin-left: var(--spacer);
text-transform: uppercase; text-transform: uppercase;
color: var(--brand-grey); color: var(--brand-grey-light);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
font-size: var(--font-size-base); font-size: var(--font-size-base);
position: relative; position: relative;
@ -82,13 +82,13 @@
.link:hover, .link:hover,
.link:focus, .link:focus,
.link:active { .link:active {
color: var(--brand-pink); color: var(--brand-grey);
} }
.link[aria-current], .link[aria-current],
.link[aria-current]:hover, .link[aria-current]:hover,
.link[aria-current]:focus { .link[aria-current]:focus {
color: var(--brand-pink); color: var(--brand-black);
} }
.link:last-child { .link:last-child {

4
src/components/molecules/Wallet/Account.module.css
View File

@ -21,6 +21,10 @@
border-color: var(--brand-grey-light); border-color: var(--brand-grey-light);
} }
.button.initial {
color: var(--brand-pink);
}
.blockies { .blockies {
width: var(--font-size-large); width: var(--font-size-large);
height: var(--font-size-large); height: var(--font-size-large);

6
src/components/molecules/Wallet/Account.tsx
View File

@ -27,6 +27,7 @@ const Account = React.forwardRef((props, ref: any) => {
const hasSuccess = status === 1 && isCorrectNetwork(chainId) const hasSuccess = status === 1 && isCorrectNetwork(chainId)
async function handleActivation(e: FormEvent<HTMLButtonElement>) { async function handleActivation(e: FormEvent<HTMLButtonElement>) {
// prevent accidentially submitting a form the button might be in
e.preventDefault() e.preventDefault()
await connectWallet(connect) await connectWallet(connect)
} }
@ -36,6 +37,7 @@ const Account = React.forwardRef((props, ref: any) => {
className={styles.button} className={styles.button}
aria-label="Account" aria-label="Account"
ref={ref} ref={ref}
// prevent accidentially submitting a form the button might be in
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
> >
<Blockies account={accountId} /> <Blockies account={accountId} />
@ -49,13 +51,13 @@ const Account = React.forwardRef((props, ref: any) => {
</button> </button>
) : ( ) : (
<button <button
className={styles.button} className={`${styles.button} ${styles.initial}`}
onClick={(e) => handleActivation(e)} onClick={(e) => handleActivation(e)}
// Need the `ref` here although we do not want // Need the `ref` here although we do not want
// the Tippy to show in this state. // the Tippy to show in this state.
ref={ref} ref={ref}
> >
Activate Wallet Connect Wallet
</button> </button>
) )
}) })