Fix dark theme chat and qr margins

frontend/src/components/Chat.js

@@ -85,7 +85,7 @@ export default class Chat extends Component {
               <Grid item xs={0.3}/>
               <Grid item xs={5.5}>
                 <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-                  <Typography variant='caption' >
+                  <Typography variant='caption' sx={{color: '#111111'}}>
                     You: {this.state.connected ? 'connected': 'disconnected'}
                   </Typography>
                 </Paper>
@@ -93,19 +93,19 @@ export default class Chat extends Component {
               <Grid item xs={0.4}/>
               <Grid item xs={5.5}>
                 <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-                  <Typography variant='caption'>
+                  <Typography variant='caption' sx={{color: '#111111'}}>
                     Peer: {this.state.peer_connected ? 'connected': 'disconnected'}
                   </Typography>
                 </Paper>
               </Grid>
               <Grid item xs={0.3}/>
             </Grid>
-            <Paper elevation={1} style={{ height: 300, maxHeight: 300, width:280,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
+            <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
               {this.state.messages.map(message => <>
               <Card elevation={5} align="left" >
               {/* If message sender is not our nick, gray color, if it is our nick, green color */}
               {message.userNick == this.props.ur_nick ? 
-                <CardHeader
+                <CardHeader sx={{color: '#111111'}}
                   avatar={
                     <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
                       <Avatar className="flippedSmallAvatar"
@@ -117,10 +117,10 @@ export default class Chat extends Component {
                   style={{backgroundColor: '#eeeeee'}}
                   title={message.userNick}
                   subheader={message.msg}
-                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
                 />
                 :
-                <CardHeader
+                <CardHeader sx={{color: '#111111'}}
                   avatar={
                     <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
                       <Avatar className="flippedSmallAvatar"
@@ -132,7 +132,7 @@ export default class Chat extends Component {
                   style={{backgroundColor: '#fafafa'}}
                   title={message.userNick}
                   subheader={message.msg}
-                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
                 />} 
                 </Card>
               </>)}

frontend/src/components/TradeBox.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { IconButton, Link, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
+import { IconButton, Box, Link, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import QRCode from "react-qr-code";
 import Countdown, { zeroPad} from 'react-countdown';
 import Chat from "./Chat"
@@ -214,7 +214,9 @@ export default class TradeBox extends Component {
           }
         </Grid>
         <Grid item xs={12} align="center">
-          <QRCode value={this.props.data.bond_invoice} size={305}/>
+          <Box sx={{bgcolor:'#ffffff', width:'315px', position:'relative', left:'-5px'}} >
+            <QRCode value={this.props.data.bond_invoice} size={305} style={{position:'relative', top:'3px'}}/>
+          </Box>
           <Tooltip disableHoverListener enterTouchDelay="0" title="Copied!">
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/> Copy to clipboard</Button>
           </Tooltip>
@@ -284,7 +286,9 @@ export default class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <QRCode value={this.props.data.escrow_invoice} size={305}/>
+          <Box sx={{bgcolor:'#ffffff', width:'315px', position:'relative', left:'-5px'}} >
+            <QRCode value={this.props.data.escrow_invoice} size={305} style={{position:'relative', top:'3px'}}/>
+          </Box>
           <Tooltip disableHoverListener enterTouchDelay="0" title="Copied!">
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button>
           </Tooltip>