Use spacing variables on _BetaCard.pcss (#10291)

Author: luixxiul

res/css/views/beta/_BetaCard.pcss

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_BetaCard {
-    margin-bottom: 20px;
-    padding: 24px;
+    margin-bottom: $spacing-20;
+    padding: $spacing-24;
     background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
@@ -25,7 +25,7 @@ limitations under the License.
     .mx_BetaCard_columns {
         display: flex;
         flex-flow: wrap;
-        gap: 20px;
+        gap: $spacing-20;
         justify-content: center;
 
         .mx_BetaCard_columns_description {
@@ -36,11 +36,11 @@ limitations under the License.
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
-                margin: 4px 0 14px;
+                margin: $spacing-4 0 14px; // TODO: use a spacing variable
 
                 display: flex;
                 align-items: center;
-                column-gap: 12px;
+                column-gap: $spacing-12;
             }
 
             .mx_BetaCard_caption {
@@ -78,7 +78,7 @@ limitations under the License.
                 line-height: $font-15px;
 
                 > h4 {
-                    margin: 12px 0 0;
+                    margin: $spacing-12 0 0;
                 }
 
                 > p {
@@ -102,13 +102,13 @@ limitations under the License.
 
     .mx_BetaCard_relatedSettings {
         .mx_SettingsFlag {
-            margin: 16px 0 0;
+            margin: $spacing-16 0 0;
             font-size: $font-15px;
             line-height: $font-24px;
             color: $primary-content;
 
             .mx_SettingsFlag_microcopy {
-                margin-top: 4px;
+                margin-top: $spacing-4;
                 font-size: $font-12px;
                 line-height: $font-15px;
             }
@@ -122,10 +122,10 @@ limitations under the License.
 
 .mx_BetaCard_betaPill {
     background-color: $accent-alt;
-    padding: 4px 10px;
+    padding: $spacing-4 10px; // TODO: use a spacing variable
     border-radius: 8px;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: $font-12px;
     font-weight: $font-semi-bold;
     line-height: 15px;
     color: $button-primary-fg-color;