From d2790dcab7d8f73df8957a8de4e98be6d766f864 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 10 Oct 2023 22:00:34 +0500
Subject: [PATCH] MM-54768 - Updating user popover UI (#24814)

* MM-54768 - Updating user popover UI

* Fixing test errors

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../user_group_popover.test.tsx.snap          | 192 +++++++++---------
 .../group_member_list.test.tsx.snap           | 160 +++++++--------
 .../group_member_list/group_member_list.tsx   |  10 +-
 .../user_group_popover/user_group_popover.tsx |  11 +-
 .../src/sass/components/_buttons.scss         |   8 +-
 5 files changed, 197 insertions(+), 184 deletions(-)

diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index f95af5999b..ac79bde2a3 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -194,28 +194,28 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                             </Title>
                             <CloseButton
                               aria-label="Close"
-                              className="btn btn-xs btn-icon"
+                              className="btn btn-sm btn-compact btn-icon"
                               onClick={[Function]}
                             >
                               <button
                                 aria-label="Close"
-                                className="CloseButton-lhxEdi gyMeQZ btn btn-xs btn-icon"
+                                className="CloseButton-lhxEdi gyMeQZ btn btn-sm btn-compact btn-icon"
                                 onClick={[Function]}
                               >
-                                <CloseIcon>
-                                  <svg
-                                    fill="currentColor"
-                                    height="1em"
-                                    version="1.1"
-                                    viewBox="0 0 24 24"
-                                    width="1em"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-                                    />
-                                  </svg>
-                                </CloseIcon>
+                                <LocalizedIcon
+                                  ariaLabel={
+                                    Object {
+                                      "defaultMessage": "Close",
+                                      "id": "user_group_popover.close",
+                                    }
+                                  }
+                                  className="icon icon-close"
+                                >
+                                  <i
+                                    aria-label="Close"
+                                    className="icon icon-close"
+                                  />
+                                </LocalizedIcon>
                               </button>
                             </CloseButton>
                           </div>
@@ -1244,7 +1244,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                     >
                                                       <DMButton
                                                         aria-label="Send message to username0"
-                                                        className="btn-icon"
+                                                        className="btn btn-icon btn-xs"
                                                         onBlur={[Function]}
                                                         onClick={[Function]}
                                                         onFocus={[Function]}
@@ -1253,27 +1253,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       >
                                                         <button
                                                           aria-label="Send message to username0"
-                                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                                           onBlur={[Function]}
                                                           onClick={[Function]}
                                                           onFocus={[Function]}
                                                           onMouseOut={[Function]}
                                                           onMouseOver={[Function]}
                                                         >
-                                                          <SendIcon>
-                                                            <svg
-                                                              fill="currentColor"
-                                                              height="1em"
-                                                              version="1.1"
-                                                              viewBox="0 0 24 24"
-                                                              width="1em"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                                              />
-                                                            </svg>
-                                                          </SendIcon>
+                                                          <LocalizedIcon
+                                                            ariaLabel={
+                                                              Object {
+                                                                "defaultMessage": "Close",
+                                                                "id": "user_group_popover.close",
+                                                              }
+                                                            }
+                                                            className="icon icon-send"
+                                                          >
+                                                            <i
+                                                              aria-label="Close"
+                                                              className="icon icon-send"
+                                                            />
+                                                          </LocalizedIcon>
                                                         </button>
                                                       </DMButton>
                                                     </OverlayTrigger>
@@ -1463,7 +1463,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                     >
                                                       <DMButton
                                                         aria-label="Send message to username1"
-                                                        className="btn-icon"
+                                                        className="btn btn-icon btn-xs"
                                                         onBlur={[Function]}
                                                         onClick={[Function]}
                                                         onFocus={[Function]}
@@ -1472,27 +1472,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       >
                                                         <button
                                                           aria-label="Send message to username1"
-                                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                                           onBlur={[Function]}
                                                           onClick={[Function]}
                                                           onFocus={[Function]}
                                                           onMouseOut={[Function]}
                                                           onMouseOver={[Function]}
                                                         >
-                                                          <SendIcon>
-                                                            <svg
-                                                              fill="currentColor"
-                                                              height="1em"
-                                                              version="1.1"
-                                                              viewBox="0 0 24 24"
-                                                              width="1em"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                                              />
-                                                            </svg>
-                                                          </SendIcon>
+                                                          <LocalizedIcon
+                                                            ariaLabel={
+                                                              Object {
+                                                                "defaultMessage": "Close",
+                                                                "id": "user_group_popover.close",
+                                                              }
+                                                            }
+                                                            className="icon icon-send"
+                                                          >
+                                                            <i
+                                                              aria-label="Close"
+                                                              className="icon icon-send"
+                                                            />
+                                                          </LocalizedIcon>
                                                         </button>
                                                       </DMButton>
                                                     </OverlayTrigger>
@@ -1682,7 +1682,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                     >
                                                       <DMButton
                                                         aria-label="Send message to username10"
-                                                        className="btn-icon"
+                                                        className="btn btn-icon btn-xs"
                                                         onBlur={[Function]}
                                                         onClick={[Function]}
                                                         onFocus={[Function]}
@@ -1691,27 +1691,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       >
                                                         <button
                                                           aria-label="Send message to username10"
-                                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                                           onBlur={[Function]}
                                                           onClick={[Function]}
                                                           onFocus={[Function]}
                                                           onMouseOut={[Function]}
                                                           onMouseOver={[Function]}
                                                         >
-                                                          <SendIcon>
-                                                            <svg
-                                                              fill="currentColor"
-                                                              height="1em"
-                                                              version="1.1"
-                                                              viewBox="0 0 24 24"
-                                                              width="1em"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                                              />
-                                                            </svg>
-                                                          </SendIcon>
+                                                          <LocalizedIcon
+                                                            ariaLabel={
+                                                              Object {
+                                                                "defaultMessage": "Close",
+                                                                "id": "user_group_popover.close",
+                                                              }
+                                                            }
+                                                            className="icon icon-send"
+                                                          >
+                                                            <i
+                                                              aria-label="Close"
+                                                              className="icon icon-send"
+                                                            />
+                                                          </LocalizedIcon>
                                                         </button>
                                                       </DMButton>
                                                     </OverlayTrigger>
@@ -1901,7 +1901,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                     >
                                                       <DMButton
                                                         aria-label="Send message to username11"
-                                                        className="btn-icon"
+                                                        className="btn btn-icon btn-xs"
                                                         onBlur={[Function]}
                                                         onClick={[Function]}
                                                         onFocus={[Function]}
@@ -1910,27 +1910,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       >
                                                         <button
                                                           aria-label="Send message to username11"
-                                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                                           onBlur={[Function]}
                                                           onClick={[Function]}
                                                           onFocus={[Function]}
                                                           onMouseOut={[Function]}
                                                           onMouseOver={[Function]}
                                                         >
-                                                          <SendIcon>
-                                                            <svg
-                                                              fill="currentColor"
-                                                              height="1em"
-                                                              version="1.1"
-                                                              viewBox="0 0 24 24"
-                                                              width="1em"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                                              />
-                                                            </svg>
-                                                          </SendIcon>
+                                                          <LocalizedIcon
+                                                            ariaLabel={
+                                                              Object {
+                                                                "defaultMessage": "Close",
+                                                                "id": "user_group_popover.close",
+                                                              }
+                                                            }
+                                                            className="icon icon-send"
+                                                          >
+                                                            <i
+                                                              aria-label="Close"
+                                                              className="icon icon-send"
+                                                            />
+                                                          </LocalizedIcon>
                                                         </button>
                                                       </DMButton>
                                                     </OverlayTrigger>
@@ -2120,7 +2120,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                     >
                                                       <DMButton
                                                         aria-label="Send message to username12"
-                                                        className="btn-icon"
+                                                        className="btn btn-icon btn-xs"
                                                         onBlur={[Function]}
                                                         onClick={[Function]}
                                                         onFocus={[Function]}
@@ -2129,27 +2129,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                                       >
                                                         <button
                                                           aria-label="Send message to username12"
-                                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                                           onBlur={[Function]}
                                                           onClick={[Function]}
                                                           onFocus={[Function]}
                                                           onMouseOut={[Function]}
                                                           onMouseOver={[Function]}
                                                         >
-                                                          <SendIcon>
-                                                            <svg
-                                                              fill="currentColor"
-                                                              height="1em"
-                                                              version="1.1"
-                                                              viewBox="0 0 24 24"
-                                                              width="1em"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                                              />
-                                                            </svg>
-                                                          </SendIcon>
+                                                          <LocalizedIcon
+                                                            ariaLabel={
+                                                              Object {
+                                                                "defaultMessage": "Close",
+                                                                "id": "user_group_popover.close",
+                                                              }
+                                                            }
+                                                            className="icon icon-send"
+                                                          >
+                                                            <i
+                                                              aria-label="Close"
+                                                              className="icon icon-send"
+                                                            />
+                                                          </LocalizedIcon>
                                                         </button>
                                                       </DMButton>
                                                     </OverlayTrigger>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
index ed97d2e2f2..fb1dba914a 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
@@ -514,7 +514,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     >
                                       <DMButton
                                         aria-label="Send message to Name0 Surname0"
-                                        className="btn-icon"
+                                        className="btn btn-icon btn-xs"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -523,27 +523,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       >
                                         <button
                                           aria-label="Send message to Name0 Surname0"
-                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                         >
-                                          <SendIcon>
-                                            <svg
-                                              fill="currentColor"
-                                              height="1em"
-                                              version="1.1"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                              />
-                                            </svg>
-                                          </SendIcon>
+                                          <LocalizedIcon
+                                            ariaLabel={
+                                              Object {
+                                                "defaultMessage": "Close",
+                                                "id": "user_group_popover.close",
+                                              }
+                                            }
+                                            className="icon icon-send"
+                                          >
+                                            <i
+                                              aria-label="Close"
+                                              className="icon icon-send"
+                                            />
+                                          </LocalizedIcon>
                                         </button>
                                       </DMButton>
                                     </OverlayTrigger>
@@ -733,7 +733,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     >
                                       <DMButton
                                         aria-label="Send message to Name1 Surname1"
-                                        className="btn-icon"
+                                        className="btn btn-icon btn-xs"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -742,27 +742,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       >
                                         <button
                                           aria-label="Send message to Name1 Surname1"
-                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                         >
-                                          <SendIcon>
-                                            <svg
-                                              fill="currentColor"
-                                              height="1em"
-                                              version="1.1"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                              />
-                                            </svg>
-                                          </SendIcon>
+                                          <LocalizedIcon
+                                            ariaLabel={
+                                              Object {
+                                                "defaultMessage": "Close",
+                                                "id": "user_group_popover.close",
+                                              }
+                                            }
+                                            className="icon icon-send"
+                                          >
+                                            <i
+                                              aria-label="Close"
+                                              className="icon icon-send"
+                                            />
+                                          </LocalizedIcon>
                                         </button>
                                       </DMButton>
                                     </OverlayTrigger>
@@ -952,7 +952,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     >
                                       <DMButton
                                         aria-label="Send message to Name2 Surname2"
-                                        className="btn-icon"
+                                        className="btn btn-icon btn-xs"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -961,27 +961,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       >
                                         <button
                                           aria-label="Send message to Name2 Surname2"
-                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                         >
-                                          <SendIcon>
-                                            <svg
-                                              fill="currentColor"
-                                              height="1em"
-                                              version="1.1"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                              />
-                                            </svg>
-                                          </SendIcon>
+                                          <LocalizedIcon
+                                            ariaLabel={
+                                              Object {
+                                                "defaultMessage": "Close",
+                                                "id": "user_group_popover.close",
+                                              }
+                                            }
+                                            className="icon icon-send"
+                                          >
+                                            <i
+                                              aria-label="Close"
+                                              className="icon icon-send"
+                                            />
+                                          </LocalizedIcon>
                                         </button>
                                       </DMButton>
                                     </OverlayTrigger>
@@ -1171,7 +1171,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     >
                                       <DMButton
                                         aria-label="Send message to Name3 Surname3"
-                                        className="btn-icon"
+                                        className="btn btn-icon btn-xs"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -1180,27 +1180,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       >
                                         <button
                                           aria-label="Send message to Name3 Surname3"
-                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                         >
-                                          <SendIcon>
-                                            <svg
-                                              fill="currentColor"
-                                              height="1em"
-                                              version="1.1"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                              />
-                                            </svg>
-                                          </SendIcon>
+                                          <LocalizedIcon
+                                            ariaLabel={
+                                              Object {
+                                                "defaultMessage": "Close",
+                                                "id": "user_group_popover.close",
+                                              }
+                                            }
+                                            className="icon icon-send"
+                                          >
+                                            <i
+                                              aria-label="Close"
+                                              className="icon icon-send"
+                                            />
+                                          </LocalizedIcon>
                                         </button>
                                       </DMButton>
                                     </OverlayTrigger>
@@ -1390,7 +1390,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                     >
                                       <DMButton
                                         aria-label="Send message to Name4 Surname4"
-                                        className="btn-icon"
+                                        className="btn btn-icon btn-xs"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -1399,27 +1399,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       >
                                         <button
                                           aria-label="Send message to Name4 Surname4"
-                                          className="DMButton-hIFgRF ecgFEo btn-icon"
+                                          className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                         >
-                                          <SendIcon>
-                                            <svg
-                                              fill="currentColor"
-                                              height="1em"
-                                              version="1.1"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                                              />
-                                            </svg>
-                                          </SendIcon>
+                                          <LocalizedIcon
+                                            ariaLabel={
+                                              Object {
+                                                "defaultMessage": "Close",
+                                                "id": "user_group_popover.close",
+                                              }
+                                            }
+                                            className="icon icon-send"
+                                          >
+                                            <i
+                                              aria-label="Close"
+                                              className="icon icon-send"
+                                            />
+                                          </LocalizedIcon>
                                         </button>
                                       </DMButton>
                                     </OverlayTrigger>
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
index 967a0f0d18..eaa65d6354 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
@@ -10,17 +10,18 @@ import type {ListChildComponentProps} from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import styled, {css} from 'styled-components';
 
-import {SendIcon} from '@mattermost/compass-icons/components';
 import type {ServerError} from '@mattermost/types/errors';
 import type {Group} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
 
+import LocalizedIcon from 'components/localized_icon';
 import NoResultsIndicator from 'components/no_results_indicator';
 import {NoResultsVariant} from 'components/no_results_indicator/types';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 import SimpleTooltip from 'components/widgets/simple_tooltip';
 import Avatar from 'components/widgets/users/avatar';
 
+import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
 import {Load} from '../constants';
@@ -190,13 +191,16 @@ const GroupMemberList = (props: Props) => {
                             content={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})}
                         >
                             <DMButton
-                                className='btn-icon'
+                                className='btn btn-icon btn-xs'
                                 aria-label={formatMessage(
                                     {id: 'group_member_list.sendMessageButton', defaultMessage: 'Send message to {user}'},
                                     {user: name})}
                                 onClick={() => showDirectChannel(user)}
                             >
-                                <SendIcon/>
+                                <LocalizedIcon
+                                    className='icon icon-send'
+                                    ariaLabel={{id: t('user_group_popover.close'), defaultMessage: 'Close'}}
+                                />
                             </DMButton>
                         </SimpleTooltip>
                     </DMContainer>
diff --git a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
index 606f3913b2..b8b99fd7d1 100644
--- a/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
+++ b/webapp/channels/src/components/user_group_popover/user_group_popover.tsx
@@ -6,12 +6,13 @@ import React, {useEffect, useCallback, useState, useRef} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import styled from 'styled-components';
 
-import {CloseIcon, MagnifyIcon} from '@mattermost/compass-icons/components';
+import {MagnifyIcon} from '@mattermost/compass-icons/components';
 import type {Group} from '@mattermost/types/groups';
 import type {UserProfile} from '@mattermost/types/users';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
 
+import LocalizedIcon from 'components/localized_icon';
 import {QuickInput} from 'components/quick_input/quick_input';
 import GroupMemberList from 'components/user_group_popover/group_member_list';
 import UserGroupsModal from 'components/user_groups_modal';
@@ -20,6 +21,7 @@ import Popover from 'components/widgets/popover';
 
 import Constants, {A11yClassNames, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
 import type {A11yFocusEventDetail} from 'utils/constants';
+import {t} from 'utils/i18n';
 import * as Keyboard from 'utils/keyboard';
 import {shouldFocusMainTextbox} from 'utils/post_utils';
 
@@ -202,12 +204,15 @@ const UserGroupPopover = (props: Props) => {
                             {group.display_name}
                         </Title>
                         <CloseButton
-                            className='btn btn-xs btn-icon'
+                            className='btn btn-sm btn-compact btn-icon'
                             aria-label={formatMessage({id: 'user_group_popover.close', defaultMessage: 'Close'})}
                             onClick={handleClose}
                             ref={closeRef}
                         >
-                            <CloseIcon/>
+                            <LocalizedIcon
+                                className='icon icon-close'
+                                ariaLabel={{id: t('user_group_popover.close'), defaultMessage: 'Close'}}
+                            />
                         </CloseButton>
                     </Heading>
                     <Subtitle>
diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index c9cef63b73..24936c26d9 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -71,6 +71,7 @@ button {
         &.btn-xs {
             width: 24px;
             height: 24px;
+            padding: 0;
 
             &.btn-compact {
                 width: 20px;
@@ -85,6 +86,7 @@ button {
         &.btn-sm {
             width: 32px;
             height: 32px;
+            padding: 0;
 
             &.btn-compact {
                 width: 28px;
@@ -99,6 +101,7 @@ button {
         &.btn-lg {
             width: 48px;
             height: 48px;
+            padding: 0;
 
             &.btn-compact {
                 width: 36px;
@@ -180,14 +183,15 @@ button {
         position: relative;
         border-color: transparent;
         background-color: rgb(var(--button-bg-rgb));
-        color: rgb(var(--button-color-rgb));
+        color: rgb(var(--button-color-rgb)) !important;
 
         // These hover and active values are for things outside the app__body, the correct theme styles for the primary button are applied in utils.jsx
         &:hover {
             background-color: #1a51c8;
         }
 
-        &:active {
+        &:active,
+        &:focus {
             background-color: #184ab6;
         }