Deduplicate icons using Compound Design Tokens (#150)

* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png

@@ -69,8 +69,8 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
 }
 
-.mx_AutocompleteInput_editor_selection_remove_button {
-    padding: 0 $spacing-4;
+.mx_AutocompleteInput_editor_selection_remove_button svg {
+    vertical-align: middle;
 }
 
 .mx_AutocompleteInput_matches {

res/css/structures/_AutocompleteInput.pcss

@@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
     cursor: pointer;
 
     .mx_RoomSearch_icon {
-        width: 16px;
-        height: 16px;
-        mask: url("$(res)/img/element-icons/roomlist/search.svg");
+        width: 20px;
+        height: 20px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
         mask-repeat: no-repeat;
+        mask-size: contain;
         background-color: $secondary-content;
-        margin-left: 7px;
-        margin-bottom: 2px;
+        margin-left: var(--cpd-space-2x);
         flex-shrink: 0;
     }
 

res/css/structures/_RoomSearch.pcss

@@ -53,13 +53,14 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_AuthBody_icon {
-        width: 40px;
+        width: 44px;
+        height: 44px;
     }
 
     .mx_AuthBody_lockIcon {
         color: $secondary-content;
         height: 32px;
-        margin-bottom: -3px; /* tweak to align all icons on different forgot password steps */
+        width: 32px;
     }
 
     .mx_AuthBody_text {

res/css/views/auth/_AuthBody.pcss

@@ -174,8 +174,11 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_InviteDialog_userTile_remove {
         display: inline-block;
-        margin-inline-start: $spacing-4;
         vertical-align: middle;
+
+        svg {
+            vertical-align: middle;
+        }
     }
 }