fix(user-list): center icons in chrome on iOS devices

This commit is contained in:
Arthurk12 2023-10-06 19:11:49 -03:00
parent f92d3a1ca5
commit 6129314a33
2 changed files with 6 additions and 4 deletions

View File

@ -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 { isSafari } = browserInfo;
const { isIos } = deviceInfo;
const UserAvatar = ({
children,
@ -70,7 +70,7 @@ const UserAvatar = ({
listenOnly={listenOnly}
voice={voice}
noVoice={noVoice && !listenOnly}
isSafari={isSafari}
isIos={isIos}
style={{
backgroundColor: color,
color, // We need the same color on both for the border

View File

@ -118,7 +118,7 @@ const Avatar = styled.div`
width: 0;
height: 0;
padding-top: .5rem;
padding-right: ${({ isSafari }) => isSafari ? '.6rem' : '0'};
padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};;
padding-left: 0;
padding-bottom: 0;
color: inherit;
@ -170,6 +170,7 @@ const Avatar = styled.div`
[dir="rtl"] & {
left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset};
letter-spacing: -.33rem;
}
@ -192,6 +193,7 @@ const Avatar = styled.div`
[dir="rtl"] & {
left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset};
letter-spacing: -.33rem;
transform: scale(-1, 1);