From d41c5974463e91d03cc5494c1e9d1534e6c2c8fd Mon Sep 17 00:00:00 2001
From: Avram Tudor <tudor.potecaru@gmail.com>
Date: Thu, 19 Aug 2021 11:32:36 +0300
Subject: [PATCH] fix(moderation) hide status icons on hover (#9747)

---
 .../components/web/ParticipantItem.js         |  1 +
 .../components/web/styled.js                  | 36 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/react/features/participants-pane/components/web/ParticipantItem.js b/react/features/participants-pane/components/web/ParticipantItem.js
index 2aab244a7..ae1ce759c 100644
--- a/react/features/participants-pane/components/web/ParticipantItem.js
+++ b/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
diff --git a/react/features/participants-pane/components/web/styled.js b/react/features/participants-pane/components/web/styled.js
index b1152bbdb..af104f50d 100644
--- a/react/features/participants-pane/components/web/styled.js
+++ b/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;