Use list item for suggestion dialog
This commit is contained in:
parent
66fc1c8bbf
commit
c2090ff427
115
src/App.js
115
src/App.js
|
@ -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}>
|
||||||
|
|
Loading…
Reference in New Issue