Add logos to info dialog

This commit is contained in:
Reckless_Satoshi 2022-01-30 19:04:54 -08:00
parent 625a68a67d
commit f03210b69d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 43 additions and 5 deletions

View File

@ -178,7 +178,7 @@ export default class BookPage extends Component {
render() { render() {
return ( return (
<Grid className='orderBook' container spacing={1}> <Grid className='orderBook' container spacing={1} sx={{minWidth:400}}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="h2" variant="h2"> <Typography component="h2" variant="h2">
Order Book Order Book

View File

@ -1,21 +1,59 @@
import {Typography, DialogActions, DialogContent, Button } from "@mui/material" import {Typography, DialogActions, DialogContent, Button, Grid} from "@mui/material"
import React, { Component } from 'react' import React, { Component } from 'react'
import Image from 'material-ui-image'
import MediaQuery from 'react-responsive'
import { maxWidth, minWidth } from "@mui/system"
export default class InfoDialog extends Component { export default class InfoDialog extends Component {
render() { render() {
return ( return (
<div> <div>
<DialogContent> <DialogContent>
<Typography component="h5" variant="h5">What is <i>RoboSats</i>?</Typography>
<MediaQuery minWidth={475}>
<Grid container xs={12}>
<Grid item xs={8}>
<Typography component="h4" variant="h4">What is <i>RoboSats</i>?</Typography>
<Typography component="body2" variant="body2">
<p>It is a BTC/FIAT peer-to-peer exchange over lightning. <br/> It simplifies
matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.</p>
<p>RoboSats is an open source project <a
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
</p>
</Typography>
</Grid>
<Grid item xs={4} align="center">
<Image className='newAvatar'
disableError='true'
cover='true'
color='null'
src={window.location.origin +'/static/assets/images/robosats_0.1.0.png'}
/>
</Grid>
</Grid>
</MediaQuery>
<MediaQuery maxWidth={474}>
<Typography component="h4" variant="h4">What is <i>RoboSats</i>?</Typography>
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">
<p>It is a BTC/FIAT peer-to-peer exchange over lightning. It simplifies <p>It is a BTC/FIAT peer-to-peer exchange over lightning. It simplifies
matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.</p> matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.</p>
<Grid align="center"><div style={{maxWidth:'75%', maxHeight:'75%'}}>
<Image
className='newAvatar'
disableError='true'
cover='true'
color='null'
src={window.location.origin +'/static/assets/images/robosats_0.1.0.png'}
/>
</div></Grid>
<p>RoboSats is an open source project <a <p>RoboSats is an open source project <a
href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a> href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
</p> </p>
</Typography> </Typography>
</MediaQuery>
<Typography component="h5" variant="h5">How does it work?</Typography> <Typography component="h5" variant="h5">How does it work?</Typography>
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">