From cb744adf52d6916acbd8f66fd4078673710307ff Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Tue, 17 Oct 2023 17:17:23 -0300
Subject: [PATCH] fix(user-list): center icons on apple devices

Centers the icons on the user-list that indicate the user's role, audio
state and whiteboard access. This time using a better strategy where the
centralization is achieved with display flex, align-items and
justify-content.
---
 .../ui/components/user-avatar/component.jsx   |  3 ---
 .../ui/components/user-avatar/styles.js       | 26 +++++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
index 8cb03adb35..8b3f223b66 100755
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Settings from '/imports/ui/services/settings';
 import Styled from './styles';
-import deviceInfo from '/imports/utils/deviceInfo';
 
 const propTypes = {
   children: PropTypes.node,
@@ -37,7 +36,6 @@ const defaultProps = {
 };
 
 const { animations } = Settings.application;
-const { isIos } = deviceInfo;
 
 const UserAvatar = ({
   children,
@@ -70,7 +68,6 @@ const UserAvatar = ({
         listenOnly={listenOnly}
         voice={voice}
         noVoice={noVoice && !listenOnly}
-        isIos={isIos}
         style={{
           backgroundColor: color,
           color, // We need the same color on both for the border
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
index 170a70aab0..e47ecd3094 100644
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
@@ -117,10 +117,6 @@ const Avatar = styled.div`
     position: absolute;
     width: 0;
     height: 0;
-    padding-top: .5rem;
-    padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};;
-    padding-left: 0;
-    padding-bottom: 0;
     color: inherit;
     top: auto;
     left: auto;
@@ -135,14 +131,11 @@ const Avatar = styled.div`
     font-size: .65rem;
     line-height: 0;
     text-align: center;
-    vertical-align: middle;
-    letter-spacing: -.65rem;
     z-index: 1;
 
     [dir="rtl"] & {
       left: ${userIndicatorsOffset};
       right: auto;
-      padding-right: .65rem;
       padding-left: 0;
     }
 
@@ -167,12 +160,13 @@ const Avatar = styled.div`
       background-color: ${colorPrimary};
       height: 1.2rem;
       width: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       [dir="rtl"] & {
         left: auto;
-        padding-right: .3rem !important;
         right: ${userIndicatorsOffset};
-        letter-spacing: -.33rem;
       }
     }
   `}
@@ -190,12 +184,13 @@ const Avatar = styled.div`
       background-color: ${colorPrimary};
       height: 1.2rem;
       width: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       [dir="rtl"] & {
         left: auto;
-        padding-right: .3rem !important;
         right: ${userIndicatorsOffset};
-        letter-spacing: -.33rem;
         transform: scale(-1, 1);
       }
     }
@@ -216,6 +211,9 @@ const Avatar = styled.div`
       opacity: 1;
       width: 1.2rem;
       height: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   `}
 
@@ -226,6 +224,9 @@ const Avatar = styled.div`
       opacity: 1;
       width: 1.2rem;
       height: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   `}
 
@@ -235,6 +236,9 @@ const Avatar = styled.div`
       opacity: 1;
       width: 1.2rem;
       height: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   `}