From 05d11fea6900b18c7d4063668188bfdf1c648772 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 6 Apr 2020 16:49:44 +0100
Subject: [PATCH] Use a function to convert to rem.

---
 src/components/views/avatars/BaseAvatar.js | 19 ++++++++++---------
 src/utils/rem.js                           | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/rem.js

diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index d9336a81e7..a17124b9ad 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -24,6 +24,7 @@ import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import toRem from "../../../utils/rem";
 
 export default createReactClass({
     displayName: 'BaseAvatar',
@@ -164,9 +165,9 @@ export default createReactClass({
             const initialLetter = AvatarLogic.getInitialLetter(name);
             const textNode = (
                 <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                    style={{ fontSize: (width * 0.65) / 15 + "rem",
-                    width: width / 15 + "rem",
-                    lineHeight: height / 15 + "rem" }}
+                    style={{ fontSize: toRem(width * 0.65),
+                    width: toRem(width),
+                    lineHeight: toRem(height) }}
                 >
                     { initialLetter }
                 </span>
@@ -176,8 +177,8 @@ export default createReactClass({
                     alt="" title={title} onError={this.onError}
                     aria-hidden="true"
                     style={{
-                        width: width/15 + "rem",
-                        height: height/15 + "rem"
+                        width: toRem(width),
+                        height: toRem(height)
                     }} />
             );
             if (onClick != null) {
@@ -207,8 +208,8 @@ export default createReactClass({
                     onClick={onClick}
                     onError={this.onError}
                     style={{
-                        width: width/15 + "rem",
-                        height: height/15 + "rem"
+                        width: toRem(width),
+                        height: toRem(height)
                     }}
                     title={title} alt=""
                     inputRef={inputRef}
@@ -221,8 +222,8 @@ export default createReactClass({
                     src={imageUrl}
                     onError={this.onError}
                     style={{
-                        width: width/15 + "rem",
-                        height: height/15 + "rem"
+                        width: toRem(width),
+                        height: toRem(height)
                     }}
                     title={title} alt=""
                     ref={inputRef}
diff --git a/src/utils/rem.js b/src/utils/rem.js
new file mode 100644
index 0000000000..0ba430950c
--- /dev/null
+++ b/src/utils/rem.js
@@ -0,0 +1,20 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// converts a pixel value to rem.
+export default function(pixel_val) {
+  return pixel_val / 15 + "rem"
+}