Improve avatars responsiveness

frontend/src/components/BookPage.js

@@ -3,6 +3,7 @@ import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Sel
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
 import MediaQuery from 'react-responsive'
+import Image from 'material-ui-image'
 
 import getFlags from './getFlags'
 
@@ -93,7 +94,15 @@ export default class BookPage extends Component {
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
                 <ListItemAvatar>
-                  <Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
+                  <div style={{ width: 48, height: 48 }}>
+                    <Image className='bookAvatar' 
+                        disableError='true'
+                        disableSpinner='true'
+                        color='null'
+                        alt={params.row.robosat}
+                        src={params.row.avatar}
+                    />
+                  </div>
                 </ListItemAvatar>
                 <ListItemText primary={params.row.robosat}/>
               </ListItemButton>
@@ -147,7 +156,17 @@ export default class BookPage extends Component {
           { field: 'robosat', headerName: 'Robot', width: 80, 
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
-                <Avatar className="flippedSmallAvatar" alt={params.row.robosat} src={params.row.avatar} />
+                <ListItemAvatar>
+                  <div style={{ width: 48, height: 48 }}>
+                    <Image className='bookAvatar' 
+                        disableError='true'
+                        disableSpinner='true'
+                        color='null'
+                        alt={params.row.robosat}
+                        src={params.row.avatar}
+                    />
+                  </div>
+                </ListItemAvatar>
               </ListItemButton>
             );
           } },

frontend/src/components/BottomBar.js

@@ -55,7 +55,7 @@ export default class BottomBar extends Component {
         fetch('/api/info/')
           .then((response) => response.json())
           .then((data) => this.setState(data) &
-          this.props.setAppState({nickname:data.nickname}));
+          this.props.setAppState({nickname:data.nickname, loading:false}));
       }
 
     handleClickOpenStatsForNerds = () => {
@@ -202,7 +202,7 @@ export default class BottomBar extends Component {
                     <ListItemAvatar>
                     <Avatar className='profileAvatar' 
                         sx={{ width: 65, height:65 }}
-                        alt={this.props.nickname} 
+                        alt={this.props.nickname}
                         src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
                         />
                     </ListItemAvatar>
@@ -469,14 +469,20 @@ bottomBarPhone =()=>{
                 <Grid container xs={12}>
 
                     <Grid item xs={1.6}>
-                    <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, top: -13, }} >
+                    <div style={{display: this.props.avatarLoaded ? '':'none'}}>
+                    <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
                         <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
-                            <Avatar className='flippedSmallAvatar' 
+                            <Avatar className='phoneFlippedSmallAvatar'
+                            sx={{ width: 65, height:65 }} 
                             alt={this.props.nickname} 
+                            imgProps={{
+                                onLoad:() => this.props.setAppState({avatarLoaded: true}),
+                            }} 
                             src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
                             />
                         </Badge>
                     </IconButton>
+                    </div>
                     </Grid>
 
                     <Grid item xs={1.6} align="center">

frontend/src/components/HomePage.js

@@ -13,6 +13,7 @@ export default class HomePage extends Component {
       this.state = {
         nickname: null,
         token: null,
+        avatarLoaded: false,
       }
     }
   

frontend/src/components/UserGenPage.js

@@ -33,6 +33,7 @@ export default class UserGenPage extends Component {
       loadingRobot: true,
       tokenHasChanged: false,
     };
+    this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
     this.getGeneratedUser(this.state.token);
   }
 
@@ -64,11 +65,13 @@ export default class UserGenPage extends Component {
         // Add nick and token to App state (token only if not a bad request)
         (data.bad_request ? this.props.setAppState({
           nickname: data.nickname,
+          avatarLoaded: false,
         })
         :
         this.props.setAppState({
           nickname: data.nickname,
           token: this.state.token,
+          avatarLoaded: false,
       }));
       });
   }
@@ -98,9 +101,10 @@ export default class UserGenPage extends Component {
   }
 
   handleClickSubmitToken=()=>{
-    this.delGeneratedUser()
+    this.delGeneratedUser();
     this.getGeneratedUser(this.state.token);
-    this.setState({loadingRobot: true, tokenHasChanged: false})
+    this.setState({loadingRobot: true, tokenHasChanged: false});
+    this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
   }
 
   handleClickOpenInfo = () => {

frontend/static/css/index.css

@@ -43,7 +43,6 @@ body {
 }
 
 .newAvatar {
-  background-color:white; 
   border-radius: 50%; 
   border: 2px solid #555; 
   filter: drop-shadow(1px 1px 1px #000000);
@@ -66,4 +65,20 @@ body {
   transform: scaleX(-1);
   border: 0.3px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.phoneFlippedSmallAvatar {
+  transform: translate(-20, -20);
+  bottom: 50;
+  right: 50;
+  transform: scaleX(-1);
+  border: 0.8px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.bookAvatar {
+  border-radius: 50%; 
+  transform: scaleX(-1);
+  border: 0.3px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
 }

setup.md

@@ -131,7 +131,7 @@ npm install react-qr-reader
 ```
 Note we are using mostly MaterialUI V5 (@mui/material) but Image loading from V4 (@material-ui/core) extentions (so both V4 and V5 are needed)
 
-### Launch the React render
+### Launch
 from frontend/ directory
 `npm run dev`