Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-21 12:49:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finish scaling UserGenPage

Browse Source
This commit is contained in:
F. Mitjans 2022-08-25 21:07:28 -04:00 committed by Felipe Mitjans
parent 7b4dca44f8
commit 5d09200e17
1 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/components/UserGenPage.js
View File

@ -182,44 +182,36 @@ class UserGenPage extends Component {
render() { render() {
const { t, i18n} = this.props; const { t, i18n} = this.props;
const fontSize = this.props.theme.typography.fontSize; const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14
return ( return (
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item> <Grid item>
<div className='clickTrough'/> <div className='clickTrough'/>
</Grid> </Grid>
<Grid item xs={12} align="center" sx={{width:370, height:260}}> <Grid item xs={12} align="center" sx={{width:370 * fontSizeFactor, height: 260 * fontSizeFactor}}>
{!this.state.loadingRobot && this.state.avatarUrl ? {!this.state.loadingRobot && this.state.avatarUrl ?
<div> <div>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="h5" variant="h5"> <Typography component="h5" variant="h5">
<b>{this.state.nickname && getCookie("sessionid") ? <b>{this.state.nickname && getCookie("sessionid") ?
<div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}> <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height: 45 * fontSizeFactor}}>
<BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/> <BoltIcon sx={{ color: "#fcba03", height: 33 * fontSizeFactor, width: 33 * fontSizeFactor}}/>
<a>{this.state.nickname}</a>
<BoltIcon sx={{ color: "#fcba03", height: 33 * fontSizeFactor, width: 33 * fontSizeFactor}}/>
</div> </div>
: ""}</b> : ""}</b>
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}> <Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
<<<<<<< HEAD <div style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor}}>
<div style={{ maxWidth: 200, maxHeight: 200 }}> <SmoothImage
<SmoothImage
src={this.state.avatarUrl} src={this.state.avatarUrl}
imageStyles={{borderRadius: "50%", imageStyles={{borderRadius: "50%",
border: "2px solid #555", border: "2px solid #555",
filter: "drop-shadow(1px 1px 1px #000000)", filter: "drop-shadow(1px 1px 1px #000000)",
height: "195px", height: `${195*fontSizeFactor}px`,
width: "200px"}} width: `${200*fontSizeFactor}px`}}
=======
<div style={{ maxWidth: fontSize * 14.28, maxHeight: fontSize * 14.28, alignText: "center"}}>
<Image
className='newAvatar'
imageStyle={{height: fontSize * 14.28, width: fontSize * 14.28}} // factor = originalSize/default_fontSize = 200/14 = 14.28
disableError={true}
cover={true}
color='null'
src={getCookie("sessionid") ? this.state.avatarUrl || "" : ""}
>>>>>>> Scale avatar width and R. Pass theme as prop to class components.
/> />
</div> </div>
</Tooltip> </Tooltip>
@ -240,7 +232,7 @@ class UserGenPage extends Component {
} }
<Grid container align="center"> <Grid container align="center">
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField sx={{maxWidth: 280}} <TextField sx={{maxWidth: 280 * fontSizeFactor}}
error={this.state.bad_request ? true : false} error={this.state.bad_request ? true : false}
label={t("Store your token safely")} label={t("Store your token safely")}
required={true} required={true}
@ -256,7 +248,7 @@ class UserGenPage extends Component {
}} }}
InputProps={{ InputProps={{
startAdornment: startAdornment:
<div style={{width:50, minWidth:50, position:'relative',left:-6}}> <div style={{width: 50*fontSizeFactor, minWidth: 50*fontSizeFactor, position:'relative',left:-6}}>
<Grid container> <Grid container>
<Grid item xs={6}> <Grid item xs={6}>
<Tooltip enterTouchDelay={250} title={t("Save token and PGP credentials to file")}> <Tooltip enterTouchDelay={250} title={t("Save token and PGP credentials to file")}>
@ -266,7 +258,7 @@ class UserGenPage extends Component {
disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded}
onClick={()=> saveAsJson(this.state.nickname+'.json', this.createJsonFile())} onClick={()=> saveAsJson(this.state.nickname+'.json', this.createJsonFile())}
> >
<DownloadIcon sx={{width:22, height:22}}/> <DownloadIcon sx={{width: 22*fontSizeFactor, height: 22*fontSizeFactor}}/>
</IconButton> </IconButton>
</span> </span>
</Tooltip> </Tooltip>
@ -278,7 +270,7 @@ class UserGenPage extends Component {
disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded}
onClick={()=> (copyToClipboard(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))} onClick={()=> (copyToClipboard(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))}
> >
<ContentCopy sx={{width:18, height:18}}/> <ContentCopy sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}}/>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
@ -286,7 +278,9 @@ class UserGenPage extends Component {
</div>, </div>,
endAdornment: endAdornment:
<Tooltip enterTouchDelay={250} title={t("Generate a new token")}> <Tooltip enterTouchDelay={250} title={t("Generate a new token")}>
<IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton> <IconButton onClick={this.handleClickNewRandomToken}>
<CasinoIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}}/>
</IconButton>
</Tooltip>, </Tooltip>,
}} }}
/> />
@ -295,14 +289,14 @@ class UserGenPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.state.tokenHasChanged ? {this.state.tokenHasChanged ?
<Button type="submit" size='small' onClick= {this.handleClickSubmitToken}> <Button type="submit" size='small' onClick= {this.handleClickSubmitToken}>
<SmartToyIcon sx={{width:18, height:18}} /> <SmartToyIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}} />
<span> {t("Generate Robot")}</span> <span> {t("Generate Robot")}</span>
</Button> </Button>
: :
<Tooltip enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("You must enter a new token first")}> <Tooltip enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("You must enter a new token first")}>
<div> <div>
<Button disabled={true} type="submit" size='small' > <Button disabled={true} type="submit" size='small' >
<SmartToyIcon sx={{width:18, height:18}} /> <SmartToyIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}} />
<span>{t("Generate Robot")}</span> <span>{t("Generate Robot")}</span>
</Button> </Button>
</div> </div>
@ -318,11 +312,11 @@ class UserGenPage extends Component {
</ButtonGroup> </ButtonGroup>
</Grid> </Grid>
<Grid item xs={12} align="center" sx={{width:370}}> <Grid item xs={12} align="center" sx={{width: 370*fontSizeFactor}}>
<Grid item> <Grid item>
<div style={{height:40}}/> <div style={{height: 30*fontSizeFactor}}/>
</Grid> </Grid>
<div style={{width:370, left:30}}> <div style={{width: 370*fontSizeFactor, left: 30*fontSizeFactor}}>
<Grid container align="center"> <Grid container align="center">
<Grid item xs={0.8}/> <Grid item xs={0.8}/>
<Grid item xs={7.5} align="right"> <Grid item xs={7.5} align="right">
@ -332,7 +326,7 @@ class UserGenPage extends Component {
</Grid> </Grid>
<Grid item xs={2.5} align="left"> <Grid item xs={2.5} align="left">
<RoboSatsNoTextIcon color="primary" <RoboSatsNoTextIcon color="primary"
sx={{height: fontSize * 5.14, width: fontSize * 5.14}} // factor = originalSize/default_fontSize = 272/14 = 5.14 sx={{height: 72 * fontSizeFactor, width: 72 * fontSizeFactor}}
/> />
</Grid> </Grid>
</Grid> </Grid>