fix(user-list): center icons in chrome on iOS devices
This commit is contained in:
parent
f92d3a1ca5
commit
6129314a33
@ -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
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user