mirror of
https://github.com/RoboSats/robosats.git
synced 2025-07-25 07:13:16 +00:00
Improve order dividers, status tooltips
This commit is contained in:
@ -1,5 +1,5 @@
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
|
import { Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { DataGrid } from '@mui/x-data-grid';
|
import { DataGrid } from '@mui/x-data-grid';
|
||||||
import MediaQuery from 'react-responsive'
|
import MediaQuery from 'react-responsive'
|
||||||
@ -79,7 +79,7 @@ export default class BookPage extends Component {
|
|||||||
({id: order.id,
|
({id: order.id,
|
||||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||||
robosat: order.maker_nick,
|
robosat: order.maker_nick,
|
||||||
type: order.type ? "Sell": "Buy",
|
type: order.type ? "Seller": "Buyer",
|
||||||
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
||||||
currency: this.getCurrencyCode(order.currency),
|
currency: this.getCurrencyCode(order.currency),
|
||||||
payment_method: order.payment_method,
|
payment_method: order.payment_method,
|
||||||
@ -108,7 +108,7 @@ export default class BookPage extends Component {
|
|||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
);
|
);
|
||||||
} },
|
} },
|
||||||
{ field: 'type', headerName: 'Type', width: 60 },
|
{ field: 'type', headerName: 'Is', width: 60 },
|
||||||
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
||||||
{ field: 'currency', headerName: 'Currency', width: 100,
|
{ field: 'currency', headerName: 'Currency', width: 100,
|
||||||
renderCell: (params) => {return (
|
renderCell: (params) => {return (
|
||||||
@ -135,14 +135,14 @@ export default class BookPage extends Component {
|
|||||||
|
|
||||||
bookListTablePhone=()=>{
|
bookListTablePhone=()=>{
|
||||||
return (
|
return (
|
||||||
<div style={{ height: 425, width: '100%' }}>
|
<div style={{ height: 422, width: '100%' }}>
|
||||||
<DataGrid
|
<DataGrid
|
||||||
rows={
|
rows={
|
||||||
this.state.orders.map((order) =>
|
this.state.orders.map((order) =>
|
||||||
({id: order.id,
|
({id: order.id,
|
||||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||||
robosat: order.maker_nick,
|
robosat: order.maker_nick,
|
||||||
type: order.type ? "Sell": "Buy",
|
type: order.type ? "Seller": "Buyer",
|
||||||
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
amount: parseFloat(parseFloat(order.amount).toFixed(4)),
|
||||||
currency: this.getCurrencyCode(order.currency),
|
currency: this.getCurrencyCode(order.currency),
|
||||||
payment_method: order.payment_method,
|
payment_method: order.payment_method,
|
||||||
@ -155,9 +155,8 @@ export default class BookPage extends Component {
|
|||||||
// { field: 'id', headerName: 'ID', width: 40 },
|
// { field: 'id', headerName: 'ID', width: 40 },
|
||||||
{ field: 'robosat', headerName: 'Robot', width: 80,
|
{ field: 'robosat', headerName: 'Robot', width: 80,
|
||||||
renderCell: (params) => {return (
|
renderCell: (params) => {return (
|
||||||
<ListItemButton style={{ cursor: "pointer" }}>
|
<Tooltip placement="right" enterTouchDelay="0" title={params.row.robosat+" ("+params.row.type+")"}>
|
||||||
<ListItemAvatar>
|
<div style={{ width: 45, height: 45 }}>
|
||||||
<div style={{ width: 48, height: 48 }}>
|
|
||||||
<Image className='bookAvatar'
|
<Image className='bookAvatar'
|
||||||
disableError='true'
|
disableError='true'
|
||||||
disableSpinner='true'
|
disableSpinner='true'
|
||||||
@ -166,15 +165,16 @@ export default class BookPage extends Component {
|
|||||||
src={params.row.avatar}
|
src={params.row.avatar}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ListItemAvatar>
|
</Tooltip>
|
||||||
</ListItemButton>
|
|
||||||
);
|
);
|
||||||
} },
|
} },
|
||||||
{ field: 'type', headerName: 'Type', width: 60, hide:'true'},
|
{ field: 'type', headerName: 'Is', width: 60, hide:'true'},
|
||||||
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
|
||||||
{ field: 'currency', headerName: 'Currency', width: 100,
|
{ field: 'currency', headerName: 'Currency', width: 100,
|
||||||
renderCell: (params) => {return (
|
renderCell: (params) => {return (
|
||||||
|
<Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
|
||||||
<div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div>
|
<div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div>
|
||||||
|
</Tooltip>
|
||||||
)} },
|
)} },
|
||||||
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
|
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
|
||||||
{ field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
|
{ field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
|
||||||
@ -183,7 +183,9 @@ export default class BookPage extends Component {
|
|||||||
)} },
|
)} },
|
||||||
{ field: 'premium', headerName: 'Premium', type: 'number', width: 85,
|
{ field: 'premium', headerName: 'Premium', type: 'number', width: 85,
|
||||||
renderCell: (params) => {return (
|
renderCell: (params) => {return (
|
||||||
|
<Tooltip placement="left" enterTouchDelay="0" title={this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
|
||||||
<div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
|
<div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
|
||||||
|
</Tooltip>
|
||||||
)} },
|
)} },
|
||||||
]}
|
]}
|
||||||
|
|
||||||
|
@ -484,10 +484,10 @@ bottomBarPhone =()=>{
|
|||||||
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
|
||||||
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
|
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
|
||||||
title="You have an active order">
|
title="You have an active order">
|
||||||
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
|
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
|
||||||
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
|
||||||
<Avatar className='phoneFlippedSmallAvatar'
|
<Avatar className='phoneFlippedSmallAvatar'
|
||||||
sx={{ width: 65, height:65 }}
|
sx={{ width: 55, height:55 }}
|
||||||
alt={this.props.nickname}
|
alt={this.props.nickname}
|
||||||
imgProps={{
|
imgProps={{
|
||||||
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
onLoad:() => this.props.setAppState({avatarLoaded: true}),
|
||||||
|
@ -184,7 +184,7 @@ export default class MakerPage extends Component {
|
|||||||
</Grid>
|
</Grid>
|
||||||
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
|
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
|
||||||
<div style={{maxWidth:140}}>
|
<div style={{maxWidth:140}}>
|
||||||
<Tooltip enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
|
<Tooltip placement="top" enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
|
||||||
<TextField
|
<TextField
|
||||||
error={this.state.amount <= 0}
|
error={this.state.amount <= 0}
|
||||||
helperText={this.state.amount <= 0 ? 'Invalid' : null}
|
helperText={this.state.amount <= 0 ? 'Invalid' : null}
|
||||||
@ -217,7 +217,7 @@ export default class MakerPage extends Component {
|
|||||||
</Grid>
|
</Grid>
|
||||||
<br/>
|
<br/>
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
|
<Tooltip placement="top" enterTouchDelay="0" title="Enter your prefered payment methods">
|
||||||
<TextField
|
<TextField
|
||||||
sx={{width:240}}
|
sx={{width:240}}
|
||||||
label="Payment Method(s)"
|
label="Payment Method(s)"
|
||||||
@ -242,7 +242,7 @@ export default class MakerPage extends Component {
|
|||||||
</div>
|
</div>
|
||||||
</FormHelperText>
|
</FormHelperText>
|
||||||
<RadioGroup row defaultValue="relative">
|
<RadioGroup row defaultValue="relative">
|
||||||
<Tooltip enterTouchDelay="0" title="Let the price move with the market">
|
<Tooltip placement="top" enterTouchDelay="0" title="Let the price move with the market">
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
value="relative"
|
value="relative"
|
||||||
control={<Radio color="primary"/>}
|
control={<Radio color="primary"/>}
|
||||||
@ -251,7 +251,7 @@ export default class MakerPage extends Component {
|
|||||||
onClick={this.handleClickRelative}
|
onClick={this.handleClickRelative}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
|
<Tooltip placement="top" enterTouchDelay="0" title="Set a fix amount of satoshis">
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
value="explicit"
|
value="explicit"
|
||||||
control={<Radio color="secondary"/>}
|
control={<Radio color="secondary"/>}
|
||||||
@ -304,18 +304,19 @@ export default class MakerPage extends Component {
|
|||||||
</Paper>
|
</Paper>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<Tooltip enterTouchDelay="0" title="You must fill the form correctly">
|
{/* conditions to disable the make button */}
|
||||||
<div><Button disabled={this.state.amount == null ||
|
{(this.state.amount == null ||
|
||||||
this.state.amount <= 0 ||
|
this.state.amount <= 0 ||
|
||||||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
||||||
(!this.state.is_explicit & this.state.badPremium != null)
|
(!this.state.is_explicit & this.state.badPremium != null))
|
||||||
}
|
?
|
||||||
color="primary"
|
<Tooltip enterTouchDelay="0" title="You must fill the form correctly">
|
||||||
variant="contained"
|
<div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div>
|
||||||
onClick={this.handleCreateOfferButtonPressed} >
|
|
||||||
Create Order
|
|
||||||
</Button></div>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
:
|
||||||
|
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button>
|
||||||
|
}
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
{this.state.badRequest ?
|
{this.state.badRequest ?
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
import { Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
|
||||||
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
|
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
|
||||||
import MediaQuery from 'react-responsive'
|
import MediaQuery from 'react-responsive'
|
||||||
|
|
||||||
@ -161,7 +161,10 @@ export default class OrderPage extends Component {
|
|||||||
// Render a completed state
|
// Render a completed state
|
||||||
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
|
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
|
||||||
} else{
|
} else{
|
||||||
return(<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>)
|
return(
|
||||||
|
<Tooltip enterTouchDelay="0" title="Wait until you can take an order"><div>
|
||||||
|
<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
|
||||||
|
</div></Tooltip>)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -352,15 +355,16 @@ export default class OrderPage extends Component {
|
|||||||
|
|
||||||
// Colors for the status badges
|
// Colors for the status badges
|
||||||
statusBadgeColor(status){
|
statusBadgeColor(status){
|
||||||
if(status=='active'){
|
if(status=='active'){return("success")}
|
||||||
return("success")
|
if(status=='seen_recently'){return("warning")}
|
||||||
}
|
if(status=='inactive'){return('error')}
|
||||||
if(status=='seen_recently'){
|
|
||||||
return("warning")
|
|
||||||
}
|
|
||||||
if(status=='inactive'){
|
|
||||||
return('error')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Colors for the status badges
|
||||||
|
statusTooltip(status){
|
||||||
|
if(status=='active'){return("Active")}
|
||||||
|
if(status=='seen_recently'){return("Seen recently")}
|
||||||
|
if(status=='inactive'){return('Inactive')}
|
||||||
}
|
}
|
||||||
|
|
||||||
orderBox=()=>{
|
orderBox=()=>{
|
||||||
@ -369,52 +373,56 @@ export default class OrderPage extends Component {
|
|||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<MediaQuery minWidth={920}>
|
<MediaQuery minWidth={920}>
|
||||||
<Typography component="h5" variant="h5">
|
<Typography component="h5" variant="h5">
|
||||||
Order Details
|
Order Box
|
||||||
</Typography>
|
</Typography>
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
<Paper elevation={12} style={{ padding: 8,}}>
|
<Paper elevation={12} style={{ padding: 8,}}>
|
||||||
<List dense="true">
|
<List dense="true">
|
||||||
<ListItem >
|
<ListItem >
|
||||||
<ListItemAvatar sx={{ width: 56, height: 56 }}>
|
<ListItemAvatar sx={{ width: 56, height: 56 }}>
|
||||||
|
<Tooltip placement="top" enterTouchDelay="0" title={this.statusTooltip(this.state.maker_status)} >
|
||||||
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
|
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
|
||||||
<Avatar className="flippedSmallAvatar"
|
<Avatar className="flippedSmallAvatar"
|
||||||
alt={this.state.maker_nick}
|
alt={this.state.maker_nick}
|
||||||
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
|
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
|
||||||
/>
|
/>
|
||||||
</Badge>
|
</Badge>
|
||||||
|
</Tooltip>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
|
<ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Divider />
|
|
||||||
|
|
||||||
{this.state.is_participant ?
|
{this.state.is_participant ?
|
||||||
<>
|
<>
|
||||||
{this.state.taker_nick!='None' ?
|
{this.state.taker_nick!='None' ?
|
||||||
<>
|
<>
|
||||||
|
<Divider />
|
||||||
<ListItem align="left">
|
<ListItem align="left">
|
||||||
<ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
|
<ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
|
||||||
<ListItemAvatar >
|
<ListItemAvatar >
|
||||||
|
<Tooltip enterTouchDelay="0" title={this.statusTooltip(this.state.taker_status)} >
|
||||||
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
|
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
|
||||||
<Avatar className="smallAvatar"
|
<Avatar className="smallAvatar"
|
||||||
alt={this.state.taker_nick}
|
alt={this.state.taker_nick}
|
||||||
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
|
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
|
||||||
/>
|
/>
|
||||||
</Badge>
|
</Badge>
|
||||||
|
</Tooltip>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Divider />
|
|
||||||
</>:
|
</>:
|
||||||
""
|
""
|
||||||
}
|
}
|
||||||
|
<Divider><Chip label='Order Details'/></Divider>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<ArticleIcon/>
|
<ArticleIcon/>
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText primary={this.state.status_message} secondary="Order status"/>
|
<ListItemText primary={this.state.status_message} secondary="Order status"/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Divider />
|
<Divider/>
|
||||||
</>
|
</>
|
||||||
:""
|
:<Divider><Chip label='Order Details'/></Divider>
|
||||||
}
|
}
|
||||||
|
|
||||||
<ListItem>
|
<ListItem>
|
||||||
@ -559,8 +567,8 @@ export default class OrderPage extends Component {
|
|||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
<Tabs value={value} onChange={handleChange} variant="fullWidth" >
|
<Tabs value={value} onChange={handleChange} variant="fullWidth" >
|
||||||
<Tab label="Order Details" {...this.a11yProps(0)} />
|
<Tab label="Order" {...this.a11yProps(0)} />
|
||||||
<Tab label="Contract Box" {...this.a11yProps(1)} />
|
<Tab label="Contract" {...this.a11yProps(1)} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
|
@ -92,6 +92,7 @@ export default class UserGenPage extends Component {
|
|||||||
this.setState({
|
this.setState({
|
||||||
token: this.genBase62Token(34),
|
token: this.genBase62Token(34),
|
||||||
tokenHasChanged: true,
|
tokenHasChanged: true,
|
||||||
|
copied: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -192,7 +193,7 @@ export default class UserGenPage extends Component {
|
|||||||
startAdornment:
|
startAdornment:
|
||||||
<Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
|
<Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
|
||||||
<IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
|
<IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
|
||||||
<ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'success' : 'inherit' } sx={{width:18, height:18}}/>
|
<ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>,
|
</Tooltip>,
|
||||||
endAdornment:
|
endAdornment:
|
||||||
@ -204,10 +205,19 @@ export default class UserGenPage extends Component {
|
|||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<Button disabled={!this.state.tokenHasChanged} type="submit" size='small' onClick= {this.handleClickSubmitToken}>
|
{this.state.tokenHasChanged ?
|
||||||
|
<Button type="submit" size='small' onClick= {this.handleClickSubmitToken}>
|
||||||
<SmartToyIcon sx={{width:18, height:18}} />
|
<SmartToyIcon sx={{width:18, height:18}} />
|
||||||
<span> Generate Robot</span>
|
<span> Generate Robot</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
:
|
||||||
|
<Tooltip enterTouchDelay="0" title="You must enter a new token first">
|
||||||
|
<Button disabled={true} type="submit" size='small' >
|
||||||
|
<SmartToyIcon sx={{width:18, height:18}} />
|
||||||
|
<span> Generate Robot</span>
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
||||||
|
@ -73,6 +73,13 @@ body {
|
|||||||
filter: drop-shadow(0.7px 0.7px 0.7px #000000);
|
filter: drop-shadow(0.7px 0.7px 0.7px #000000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.phoneFlippedSmallAvatar:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; bottom: 0; right: 0;
|
||||||
|
box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
.bookAvatar {
|
.bookAvatar {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
|
Reference in New Issue
Block a user