Merge pull request #18765 from Arthurk12/bbb/2.7/18763

fix(user-list): center icons on safari

bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Settings from '/imports/ui/services/settings';
 import Styled from './styles';
-import browserInfo from '/imports/utils/browserInfo';
+import deviceInfo from '/imports/utils/deviceInfo';
 
 const propTypes = {
   children: PropTypes.node,
@@ -37,7 +37,7 @@ const defaultProps = {
 };
 
 const { animations } = Settings.application;
-const { isChrome, isFirefox, isEdge } = browserInfo;
+const { isIos } = deviceInfo;
 
 const UserAvatar = ({
   children,
@@ -70,10 +70,7 @@ const UserAvatar = ({
         listenOnly={listenOnly}
         voice={voice}
         noVoice={noVoice && !listenOnly}
-        isChrome={isChrome}
-        isFirefox={isFirefox}
-        isEdge={isEdge}
-        className={className}
+        isIos={isIos}
         style={{
           backgroundColor: color,
           color, // We need the same color on both for the border

bigbluebutton-html5/imports/ui/components/user-avatar/styles.js

@@ -118,7 +118,7 @@ const Avatar = styled.div`
     width: 0;
     height: 0;
     padding-top: .5rem;
-    padding-right: 0;
+    padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};;
     padding-left: 0;
     padding-bottom: 0;
     color: inherit;
@@ -158,7 +158,6 @@ const Avatar = styled.div`
   ${({ presenter }) => presenter && `
     &:before {
       content: "\\00a0\\e90b\\00a0";
-      padding: ${mdPaddingY} !important;
       opacity: 1;
       top: ${userIndicatorsOffset};
       left: ${userIndicatorsOffset};
@@ -166,27 +165,21 @@ const Avatar = styled.div`
       right: auto;
       border-radius: 5px;
       background-color: ${colorPrimary};
+      height: 1.2rem;
+      width: 1.2rem;
 
       [dir="rtl"] & {
         left: auto;
+        padding-right: .3rem !important;
         right: ${userIndicatorsOffset};
         letter-spacing: -.33rem;
       }
     }
   `}
 
-  ${({
-    presenter, isChrome, isFirefox, isEdge,
-  }) => presenter && (isChrome || isFirefox || isEdge) && `
-    &:before {
-      padding: ${indicatorPadding} !important;
-    }
-  `}
-
   ${({ whiteboardAccess }) => whiteboardAccess && `
     &:before {
       content: "\\00a0\\e925\\00a0";
-      padding: ${mdPaddingY} !important;
       border-radius: 50% !important;
       opacity: 1;
       top: ${userIndicatorsOffset};
@@ -195,9 +188,12 @@ const Avatar = styled.div`
       right: auto;
       border-radius: 5px;
       background-color: ${colorPrimary};
+      height: 1.2rem;
+      width: 1.2rem;
 
       [dir="rtl"] & {
         left: auto;
+        padding-right: .3rem !important;
         right: ${userIndicatorsOffset};
         letter-spacing: -.33rem;
         transform: scale(-1, 1);
@@ -205,14 +201,6 @@ const Avatar = styled.div`
     }
   `}
 
-  ${({
-    whiteboardAccess, isChrome, isFirefox, isEdge,
-  }) => whiteboardAccess && (isChrome || isFirefox || isEdge) && `
-    &:before {
-      padding: ${indicatorPadding};
-    }
-  `}
-
   ${({ voice }) => voice && `
     &:after {
       content: "\\00a0\\e931\\00a0";