Fix dark theme chat and qr margins

This commit is contained in:
Reckless_Satoshi 2022-03-24 15:18:01 -07:00
parent cb7dcab147
commit 0be7bccc0d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 15 additions and 11 deletions

View File

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

View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; 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 QRCode from "react-qr-code";
import Countdown, { zeroPad} from 'react-countdown'; import Countdown, { zeroPad} from 'react-countdown';
import Chat from "./Chat" import Chat from "./Chat"
@ -214,7 +214,9 @@ export default class TradeBox extends Component {
} }
</Grid> </Grid>
<Grid item xs={12} align="center"> <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!"> <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> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/> Copy to clipboard</Button>
</Tooltip> </Tooltip>
@ -284,7 +286,9 @@ export default class TradeBox extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <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!"> <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> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button>
</Tooltip> </Tooltip>

File diff suppressed because one or more lines are too long