fix(moderation) hide status icons on hover (#9747)
This commit is contained in:
parent
4788720edd
commit
d41c597446
|
@ -114,6 +114,7 @@ export default function ParticipantItem({
|
|||
<ParticipantContainer
|
||||
id = { `participant-item-${participantID}` }
|
||||
isHighlighted = { isHighlighted }
|
||||
local = { local }
|
||||
onMouseLeave = { onLeave }
|
||||
trigger = { actionsTrigger }>
|
||||
<Avatar
|
||||
|
|
|
@ -246,6 +246,21 @@ export const ParticipantContent = styled.div`
|
|||
padding-right: ${props => props.theme.panePadding}px;
|
||||
`;
|
||||
|
||||
export const ParticipantStates = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > * {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ParticipantContainer = styled.div`
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
@ -256,6 +271,12 @@ export const ParticipantContainer = styled.div`
|
|||
padding-left: ${props => props.theme.panePadding}px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
${ParticipantStates} {
|
||||
${props => !props.local && 'display: none'};
|
||||
}
|
||||
}
|
||||
|
||||
${props => !props.isHighlighted && '&:hover {'}
|
||||
background-color: #292929;
|
||||
|
||||
|
@ -296,21 +317,6 @@ export const ParticipantNameContainer = styled.div`
|
|||
overflow: hidden;
|
||||
`;
|
||||
|
||||
export const ParticipantStates = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > * {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RaisedHandIndicatorBackground = styled.div`
|
||||
background-color: #ed9e1b;
|
||||
border-radius: 3px;
|
||||
|
|
Loading…
Reference in New Issue