Use variables for the rem values.

It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.

res/css/views/right_panel/_UserInfo.scss

@@ -20,7 +20,7 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-    font-size: 0.8rem;
+    font-size: $font-12px;
 
     .mx_UserInfo_cancel {
         cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     h2 {
-        font-size: 1.2rem;
+        font-size: $font-18px;
         font-weight: 600;
         margin: 18px 0 0 0;
     }
@@ -109,7 +109,7 @@ limitations under the License.
         justify-content: center;
 
         // override the calculated sizes so that the letter isn't HUGE
-        font-size: 3.733rem !important;
+        font-size: 56px !important;
         width: 100% !important;
         transition: font-size 0.5s;
     }
@@ -122,7 +122,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $notice-secondary-color;
         font-weight: bold;
-        font-size: 0.8rem;
+        font-size: $font-12px;
         margin: 4px 0;
     }
 
@@ -134,8 +134,8 @@ limitations under the License.
         text-align: center;
 
         h2 {
-            font-size: 1.2rem;
-            line-height: 1.667rem;
+            font-size: $font-18px;
+            line-height: $font-25px;
             flex: 1;
             justify-content: center;
             align-items: center;
@@ -197,7 +197,7 @@ limitations under the License.
     .mx_UserInfo_field {
         cursor: pointer;
         color: $accent-color;
-        line-height: 1.067rem;
+        line-height: $font-16px;
         margin: 8px 0;
 
         &.mx_UserInfo_destructive {
@@ -206,7 +206,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_statusMessage {
-        font-size: 0.733rem;
+        font-size: $font-11px;
         opacity: 0.5;
         overflow: hidden;
         white-space: nowrap;
@@ -282,6 +282,6 @@ limitations under the License.
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar_initial {
-        font-size: 2.667rem !important; // override the other override because here the avatar is smaller
+        font-size: 40px !important; // override the other override because here the avatar is smaller
     }
 }

res/css/views/right_panel/_VerificationPanel.scss

@@ -95,7 +95,7 @@ limitations under the License.
             }
 
             .mx_VerificationPanel_QRPhase_helpText {
-                font-size: 0.933rem;
+                font-size: $font-14px;
                 margin-top: 71px;
                 text-align: center;
             }