From a80cf58aa38800c823a890e15d74f5fa80c3324e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Rodr=C3=ADguez?= <gabrc52@gmail.com>
Date: Wed, 11 Oct 2023 12:00:15 -0400
Subject: [PATCH] Fix alignment and poor contrast on user pills in invite
 dialog (#11722)

* improve invite tile color

* change checkmark color for consistency

* switch to cpd-color-text-info-primary

* fix misaligned "x"

* use --cpd-color-bg-success-subtle instead
---
 res/css/views/dialogs/_InviteDialog.pcss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
index f13e6b4724..cd7abdf1d7 100644
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@@ -151,13 +151,14 @@ limitations under the License.
     margin-inline-end: $spacing-8;
 
     .mx_InviteDialog_userTile_pill {
-        background-color: $username-variant1-color;
+        background-color: var(--cpd-color-bg-success-subtle);
         border-radius: 12px;
         display: inline-block;
         height: 24px;
         line-height: $font-24px;
         padding-inline: $spacing-8;
-        color: #ffffff; /* this is fine without a var because it's for both themes */
+        vertical-align: middle;
+        color: $primary-content;
 
         .mx_SearchResultAvatar {
             border-radius: 20px;
@@ -182,6 +183,7 @@ limitations under the License.
     .mx_InviteDialog_userTile_remove {
         display: inline-block;
         margin-inline-start: $spacing-4;
+        vertical-align: middle;
     }
 }
 
@@ -338,7 +340,7 @@ limitations under the License.
 
         .mx_InviteDialog_tile--room_selected {
             border-radius: 36px;
-            background-color: $username-variant1-color;
+            background-color: var(--cpd-color-bg-success-subtle);
 
             &::before {
                 content: "";
@@ -352,7 +354,7 @@ limitations under the License.
                 position: absolute;
                 top: 6px; /* 50% */
                 left: 6px; /* 50% */
-                background-color: #ffffff; /* this is fine without a var because it's for both themes */
+                background-color: $primary-content;
             }
         }