Use list item for suggestion dialog

This commit is contained in:
armaniferrante 2021-08-24 15:31:26 -07:00
parent 66fc1c8bbf
commit c2090ff427
No known key found for this signature in database
GPG Key ID: 58BEF301E91F7828
1 changed files with 60 additions and 55 deletions

View File

@ -1,5 +1,5 @@
import React, { Suspense, useState } from 'react'; import React, { Suspense, useState } from 'react';
import { makeStyles } from '@material-ui/core'; import { makeStyles, List, ListItem } from '@material-ui/core';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import useMediaQuery from '@material-ui/core/useMediaQuery'; import useMediaQuery from '@material-ui/core/useMediaQuery';
import { import {
@ -108,10 +108,10 @@ function PageContents() {
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
walletButton: { walletButton: {
width: '100%',
padding: '16px', padding: '16px',
'&:hover': { '&:hover': {
cursor: 'pointer', cursor: 'pointer',
background: '#f7f7f7',
}, },
}, },
})); }));
@ -138,63 +138,68 @@ function WalletSuggestionDialog({ open, onClose }) {
</b>{' '} </b>{' '}
or <b>Solflare</b>. or <b>Solflare</b>.
</Typography> </Typography>
<div <List disablePadding style={{ marginTop: '16px' }}>
className={classes.walletButton} <ListItem button disablePadding style={{ padding: 0 }}>
style={{ display: 'flex', marginTop: '16px' }} <div
onClick={() => { className={classes.walletButton}
window.location = 'https://phantom.app/'; style={{ display: 'flex' }}
}} onClick={() => {
> window.location = 'https://phantom.app/';
<div>
<img
style={{ height: '39px' }}
src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/phantom.svg"
/>
</div>
<div>
<Typography
style={{
marginLeft: '16px',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
height: '39px',
fontWeight: 'bold',
}} }}
> >
Phantom <div>
</Typography> <img
</div> style={{ height: '39px' }}
</div> src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/phantom.svg"
<div />
onClick={() => { </div>
window.location = 'https://solflare.com/'; <div>
}} <Typography
className={classes.walletButton} style={{
style={{ display: 'flex' }} marginLeft: '16px',
> display: 'flex',
<div> justifyContent: 'center',
<img flexDirection: 'column',
style={{ height: '39px' }} height: '39px',
src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/solflare.svg" fontWeight: 'bold',
/> }}
</div> >
<div> Phantom
<Typography </Typography>
style={{ </div>
marginLeft: '16px', </div>
display: 'flex', </ListItem>
justifyContent: 'center', <ListItem button disablePadding style={{ padding: 0 }}>
flexDirection: 'column', <div
height: '39px', onClick={() => {
fontWeight: 'bold', window.location = 'https://solflare.com/';
}} }}
className={classes.walletButton}
style={{ display: 'flex' }}
> >
Solflare <div>
</Typography> <img
</div> style={{ height: '39px' }}
</div> src="https://raw.githubusercontent.com/solana-labs/wallet-adapter/master/packages/wallets/icons/solflare.svg"
<Typography></Typography> />
</div>
<div>
<Typography
style={{
marginLeft: '16px',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
height: '39px',
fontWeight: 'bold',
}}
>
Solflare
</Typography>
</div>
</div>
</ListItem>
</List>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button type="submit" color="primary" onClick={onClose}> <Button type="submit" color="primary" onClick={onClose}>