Scale avatar width and R. Pass theme as prop to class components.

This commit is contained in:
Reckless_Satoshi 2022-08-19 15:26:14 -07:00 committed by Felipe Mitjans
parent e2455ec3f9
commit a777ecb989
4 changed files with 27 additions and 7 deletions

View File

@ -60,7 +60,7 @@ export default class App extends Component {
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
</IconButton>
<UnsafeAlert className="unsafeAlert"/>
<HomePage/>
<HomePage {...this.state}/>
</ThemeProvider>
</I18nextProvider>
</Suspense>

View File

@ -44,11 +44,11 @@ export default class HomePage extends Component {
<Router >
<div className='appCenter'>
<Switch>
<Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
<Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
<Route path='/make' render={(props) => <MakerPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
<Route path='/book' render={(props) => <BookPage {...props} {...this.state} setAppState={this.setAppState} />}/>
<Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
<Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
<Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
<Route path='/make' render={(props) => <MakerPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
<Route path='/book' render={(props) => <BookPage {...props} {...this.state} {...this.props} setAppState={this.setAppState} />}/>
<Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
</Switch>
</div>
<div className='bottomBar'>

View File

@ -181,6 +181,7 @@ class UserGenPage extends Component {
render() {
const { t, i18n} = this.props;
const fontSize = this.props.theme.typography.fontSize;
return (
<Grid container spacing={1}>
<Grid item>
@ -200,6 +201,7 @@ class UserGenPage extends Component {
</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
src={this.state.avatarUrl}
@ -208,6 +210,16 @@ class UserGenPage extends Component {
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.
/>
</div>
</Tooltip>
@ -319,7 +331,9 @@ class UserGenPage extends Component {
</Typography>
</Grid>
<Grid item xs={2.5} align="left">
<RoboSatsNoTextIcon color="primary" sx={{height:72, width:72}}/>
<RoboSatsNoTextIcon color="primary"
sx={{height: fontSize * 5.14, width: fontSize * 5.14}} // factor = originalSize/default_fontSize = 272/14 = 5.14
/>
</Grid>
</Grid>
</div>

View File

@ -87,6 +87,12 @@ input[type=number] {
left: -16px;
}
.newAvatar {
border-radius: 50%;
border: 2px solid #555;
filter: drop-shadow(1px 1px 1px #000000);
}
.profileAvatar {
border: 0.5px solid #555;
filter: drop-shadow(0.5px 0.5px 0.5px #000000);