fix(moderation) hide status icons on hover (#9747)

react/features/participants-pane/components/web/ParticipantItem.js

@@ -114,6 +114,7 @@ export default function ParticipantItem({
         <ParticipantContainer
             id = { `participant-item-${participantID}` }
             isHighlighted = { isHighlighted }
+            local = { local }
             onMouseLeave = { onLeave }
             trigger = { actionsTrigger }>
             <Avatar

react/features/participants-pane/components/web/styled.js

@@ -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;