RoboSats/robosats
1
1
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-26 05:43:34 +03:00
Code Issues 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() {
const { t, i18n} = this.props;
const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14
return (
<Grid container spacing={1}>
<Grid item>
<div className='clickTrough'/>
</Grid>
<Grid item xs={12} align="center" sx={{width:370, height:260}}>
{!this.state.loadingRobot && this.state.avatarUrl ?
<Grid item xs={12} align="center" sx={{width:370 * fontSizeFactor, height: 260 * fontSizeFactor}}>
{!this.state.loadingRobot && this.state.avatarUrl ?
<div>
<Grid item xs={12} align="center">
<Typography component="h5" variant="h5">
<b>{this.state.nickname && getCookie("sessionid") ?
<div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}>
<BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/>
<div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height: 45 * fontSizeFactor}}>
<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>
: ""}</b>
</Typography>
</Grid>
<Grid item xs={12} align="center">
<Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
<<<<<<< HEAD
<div style={{ maxWidth: 200, maxHeight: 200 }}>
<SmoothImage
<div style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor}}>
<SmoothImage
src={this.state.avatarUrl}
imageStyles={{borderRadius: "50%",
border: "2px solid #555",
filter: "drop-shadow(1px 1px 1px #000000)",
height: "195px",
width: "200px"}}
=======
<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.
height: `${195*fontSizeFactor}px`,
width: `${200*fontSizeFactor}px`}}
/>
</div>
</Tooltip>
@ -240,7 +232,7 @@ class UserGenPage extends Component {
}
<Grid container align="center">
<Grid item xs={12} align="center">
<TextField sx={{maxWidth: 280}}
<TextField sx={{maxWidth: 280 * fontSizeFactor}}
error={this.state.bad_request ? true : false}
label={t("Store your token safely")}
required={true}
@ -256,7 +248,7 @@ class UserGenPage extends Component {
}}
InputProps={{
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 item xs={6}>
<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}
onClick={()=> saveAsJson(this.state.nickname+'.json', this.createJsonFile())}
>
<DownloadIcon sx={{width:22, height:22}}/>
<DownloadIcon sx={{width: 22*fontSizeFactor, height: 22*fontSizeFactor}}/>
</IconButton>
</span>
</Tooltip>
@ -278,7 +270,7 @@ class UserGenPage extends Component {
disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded}
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>
</Tooltip>
</Grid>
@ -286,7 +278,9 @@ class UserGenPage extends Component {
</div>,
endAdornment:
<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>,
}}
/>
@ -295,14 +289,14 @@ class UserGenPage extends Component {
<Grid item xs={12} align="center">
{this.state.tokenHasChanged ?
<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>
</Button>
:
<Tooltip enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("You must enter a new token first")}>
<div>
<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>
</Button>
</div>
@ -318,11 +312,11 @@ class UserGenPage extends Component {
</ButtonGroup>
</Grid>
<Grid item xs={12} align="center" sx={{width:370}}>
<Grid item xs={12} align="center" sx={{width: 370*fontSizeFactor}}>
<Grid item>
<div style={{height:40}}/>
<div style={{height: 30*fontSizeFactor}}/>
</Grid>
<div style={{width:370, left:30}}>
<div style={{width: 370*fontSizeFactor, left: 30*fontSizeFactor}}>
<Grid container align="center">
<Grid item xs={0.8}/>
<Grid item xs={7.5} align="right">
@ -332,7 +326,7 @@ class UserGenPage extends Component {
</Grid>
<Grid item xs={2.5} align="left">
<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>