From 75e0ce9164407e401eec7bca5c9b019b9a0b7f28 Mon Sep 17 00:00:00 2001
From: Faye Duxovni <fayed@element.io>
Date: Tue, 19 Apr 2022 11:11:21 -0400
Subject: [PATCH] use CSS variables for lengths where possible/appropriate

---
 res/css/views/messages/_DecryptionFailureBody.scss |  9 +++++----
 res/css/views/rooms/_DecryptionFailureBar.scss     | 10 +++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/res/css/views/messages/_DecryptionFailureBody.scss b/res/css/views/messages/_DecryptionFailureBody.scss
index 96469ccde5f..15eab651e58 100644
--- a/res/css/views/messages/_DecryptionFailureBody.scss
+++ b/res/css/views/messages/_DecryptionFailureBody.scss
@@ -15,9 +15,10 @@ limitations under the License.
 */
 
 .mx_DecryptionFailureBody {
-    height: 14px;
-    min-width: 150px;
-    border-radius: 7px;
-    margin-top: 4px;
+    $height: $font-14px;
+    height: $height;
+    min-width: calc($height * 8);
+    border-radius: calc($height / 2);
+    margin-top: $spacing-4;
     background: $quinary-content;
 }
diff --git a/res/css/views/rooms/_DecryptionFailureBar.scss b/res/css/views/rooms/_DecryptionFailureBar.scss
index 12638ac4ef3..77943954b37 100644
--- a/res/css/views/rooms/_DecryptionFailureBar.scss
+++ b/res/css/views/rooms/_DecryptionFailureBar.scss
@@ -17,14 +17,14 @@ limitations under the License.
 .mx_DecryptionFailureBar {
     height: 56px;
     background-color: $system;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-left: 16px;
-    margin-right: 16px;
+    padding-left: $spacing-12;
+    padding-right: $spacing-12;
+    margin-left: $spacing-16;
+    margin-right: $spacing-16;
     border-radius: 4px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: $spacing-12;
 }
 
 .mx_DecryptionFailureBar_icon {