Change unencrypted and public pills to blue (#30399)

* feat: change unencrypted and public pill to blue

* test: update snapshots

* test(e2e): update screenshots

src/components/views/right_panel/RoomSummaryCardView.tsx

@@ -169,8 +169,8 @@ const RoomSummaryCardView: React.FC<IProps> = ({
 
             <Flex as="section" justify="center" gap="var(--cpd-space-2x)" className="mx_RoomSummaryCard_badges">
                 {!vm.isDirectMessage && vm.roomJoinRule === JoinRule.Public && (
-                    <Badge kind="grey">
+                    <Badge kind="blue">
-                        <PublicIcon width="1em" />
+                        <PublicIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
                         {_t("common|public_room")}
                     </Badge>
                 )}
@@ -183,8 +183,8 @@ const RoomSummaryCardView: React.FC<IProps> = ({
                 )}
 
                 {!vm.isRoomEncrypted && (
-                    <Badge kind="grey">
+                    <Badge kind="blue">
-                        <LockOffIcon width="1em" />
+                        <LockOffIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
                         {_t("common|unencrypted")}
                     </Badge>
                 )}

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap

@@ -76,9 +76,10 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -93,9 +94,10 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </span>
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -836,9 +838,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -853,9 +856,10 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </span>
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -1558,9 +1562,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -1575,9 +1580,10 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </span>
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
-            data-kind="grey"
+            data-kind="blue"
           >
             <svg
+              color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"