Merge branches 'develop' and 't3chguy/leaks' of github.com:matrix-org/matrix-react-sdk into t3chguy/leaks

 Conflicts:

	src/components/views/avatars/BaseAvatar.js

src/components/views/avatars/BaseAvatar.js

@@ -24,6 +24,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import toRem from "../../../utils/rem";
 
 const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
     const [imageUrls, setUrls] = useState([]);
@@ -104,9 +105,9 @@ const BaseAvatar = (props) => {
                 className="mx_BaseAvatar_initial"
                 aria-hidden="true"
                 style={{
-                    fontSize: (width * 0.65) + "px",
-                    width: width + "px",
-                    lineHeight: height + "px",
+                    fontSize: toRem(width * 0.65),
+                    width: toRem(width),
+                    lineHeight: toRem(height),
                 }}
             >
                 { initialLetter }
@@ -119,8 +120,10 @@ const BaseAvatar = (props) => {
                 alt=""
                 title={title}
                 onError={onError}
-                width={width}
-                height={height}
+                style={{
+                    width: toRem(width),
+                    height: toRem(height),
+                }}
                 aria-hidden="true" />
         );
 
@@ -155,7 +158,10 @@ const BaseAvatar = (props) => {
                 src={imageUrl}
                 onClick={onClick}
                 onError={onError}
-                width={width} height={height}
+                style={{
+                    width: toRem(width),
+                    height: toRem(height),
+                }}
                 title={title} alt=""
                 inputRef={inputRef}
                 {...otherProps} />
@@ -166,7 +172,10 @@ const BaseAvatar = (props) => {
                 className="mx_BaseAvatar mx_BaseAvatar_image"
                 src={imageUrl}
                 onError={onError}
-                width={width} height={height}
+                style={{
+                    width: toRem(width),
+                    height: toRem(height),
+                }}
                 title={title} alt=""
                 ref={inputRef}
                 {...otherProps} />

src/components/views/avatars/MemberAvatar.js

@@ -51,7 +51,8 @@ export default createReactClass({
         return this._getState(this.props);
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         this.setState(this._getState(nextProps));
     },
 

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -49,7 +49,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         this._button = createRef();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }

src/components/views/avatars/RoomAvatar.js

@@ -63,7 +63,8 @@ export default createReactClass({
         }
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         this.setState({
             urls: this.getImageUrls(newProps),
         });