Remove TODO comments about spacing variables (#10695)

The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686

res/css/views/dialogs/_InviteDialog.pcss

@@ -28,7 +28,7 @@ limitations under the License.
     flex-direction: row;
     /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
     /* for the user section gets weird. */
-    margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
+    margin: $spacing-8 45px 0 0;
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -43,14 +43,14 @@ limitations under the License.
         flex-wrap: wrap;
 
         .mx_InviteDialog_userTile {
-            margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
+            margin: 6px 6px 0 0;
             display: inline-block;
             min-width: max-content; /* prevent manipulation by flexbox */
         }
 
         /* overrides bunch of our default text input styles */
         > input[type="text"] {
-            margin: 6px 0 !important; /* TODO: Use a spacing variable */
+            margin: 6px 0 !important;
             height: 24px;
             line-height: $font-24px;
             font-size: $font-14px;
@@ -67,7 +67,7 @@ limitations under the License.
 
     .mx_InviteDialog_goButton {
         min-width: 48px;
-        margin-inline-start: 10px; /* TODO: Use a spacing variable */
+        margin-inline-start: 10px;
         height: 25px;
         line-height: $font-25px;
     }
@@ -77,7 +77,7 @@ limitations under the License.
             /* Width and height are required to trick the layout engine. */
             width: 20px;
             height: 20px;
-            margin-inline-start: 5px; /* TODO: Use a spacing variable */
+            margin-inline-start: 5px;
             display: inline-block;
             vertical-align: middle;
         }
@@ -103,7 +103,7 @@ limitations under the License.
     }
 
     .mx_InviteDialog_section_showMore {
-        margin: 7px 18px; /* TODO: Use a spacing variable */
+        margin: 7px 18px;
         display: block;
     }
 }
@@ -252,7 +252,7 @@ limitations under the License.
 .mx_InviteDialog_userSections {
     margin-top: $spacing-4;
     overflow-y: auto;
-    padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
+    padding: 0 45px $spacing-4 0;
 }
 
 .mx_InviteDialog_helpText {
@@ -289,7 +289,7 @@ limitations under the License.
 
     .mx_DialPad {
         row-gap: $spacing-16;
-        column-gap: 48px; /* TODO: Use a spacing variable */
+        column-gap: 48px;
         margin-inline: auto;
     }
 }
@@ -450,7 +450,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_identityServer {
-    margin-top: 1em; /* TODO: Use a spacing variable */
+    margin-top: 1em;
 }
 
 .mx_InviteDialog_oneThreepid {

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -36,7 +36,7 @@ limitations under the License.
 
         kbd {
             display: inline-block;
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            padding: 2px $spacing-4;
             margin: 0 $spacing-4;
             border-radius: 6px;
             background-color: $quinary-content;
@@ -76,7 +76,7 @@ limitations under the License.
             vertical-align: middle;
             color: $primary-content;
             position: relative;
-            padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
+            padding: $spacing-4 $spacing-8 $spacing-4 37px;
 
             &::before {
                 background-color: $secondary-content;
@@ -234,7 +234,7 @@ limitations under the License.
         .mx_SpotlightDialog_otherSearches,
         .mx_SpotlightDialog_hiddenResults {
             .mx_SpotlightDialog_option {
-                padding: 6px $spacing-4; /* TODO: Use a spacing variable */
+                padding: 6px $spacing-4;
                 border-radius: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
@@ -258,11 +258,11 @@ limitations under the License.
 
                     .mx_AccessibleButton {
                         padding: $spacing-4 $spacing-20;
-                        margin: 2px $spacing-4; /* TODO: Use a spacing variable */
+                        margin: 2px $spacing-4;
                     }
 
                     .mx_SpotlightDialog_enterPrompt {
-                        margin-top: 9px; /* TODO: Use a spacing variable */
+                        margin-top: 9px;
                         margin-right: $spacing-8;
                     }
                 }
@@ -379,7 +379,7 @@ limitations under the License.
             .mx_AccessibleButton {
                 position: relative;
                 margin: 0;
-                padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
+                padding: 3px $spacing-8 3px $spacing-28;
 
                 &::before {
                     content: "";
@@ -480,7 +480,7 @@ limitations under the License.
         }
 
         .mx_SpotlightDialog_enterPrompt {
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            padding: 2px $spacing-4;
             /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -23,7 +23,7 @@ limitations under the License.
             height: 24px;
             margin-inline-end: $spacing-8;
             position: relative;
-            top: 5px; /* TODO: spacing variable */
+            top: 5px;
             background-color: $primary-content;
         }
 
@@ -81,7 +81,7 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
-                margin-inline-end: 5px; /* TODO: spacing variable */
+                margin-inline-end: 5px;
             }
 
             &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@@ -109,7 +109,7 @@ limitations under the License.
             text-align: initial;
             display: flex;
             flex-flow: column;
-            gap: 14px; /* TODO: spacing variable */
+            gap: 14px;
 
             .mx_Dialog_buttons_additive {
                 float: none;