From f03210b69d96684ceed8d4bef1b363d42f1f81ca Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sun, 30 Jan 2022 19:04:54 -0800
Subject: [PATCH] Add logos to info dialog

---
 frontend/src/components/BookPage.js   |  2 +-
 frontend/src/components/InfoDialog.js | 46 ++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index 6e1100c6..99382a3a 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -178,7 +178,7 @@ export default class BookPage extends Component {
 
   render() {
       return (
-        <Grid className='orderBook' container spacing={1}>
+        <Grid className='orderBook' container spacing={1} sx={{minWidth:400}}>
           <Grid item xs={12} align="center">
             <Typography component="h2" variant="h2">
               Order Book
diff --git a/frontend/src/components/InfoDialog.js b/frontend/src/components/InfoDialog.js
index 94b5f45e..f04ddf88 100644
--- a/frontend/src/components/InfoDialog.js
+++ b/frontend/src/components/InfoDialog.js
@@ -1,22 +1,60 @@
 
-import {Typography, DialogActions,  DialogContent, Button } from "@mui/material"
+import {Typography, DialogActions,  DialogContent, Button, Grid} from "@mui/material"
 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 {
   render() {
     return (
       <div>
         <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">
             <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>
-            
+              <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 
               href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
             </p>
           </Typography>
-          
+          </MediaQuery>
+
           <Typography component="h5" variant="h5">How does it work?</Typography>
           <Typography component="body2" variant="body2">
             <p> AnonymousAlice01 wants to sell bitcoin. She posts a sell order.