From 030827f77d78eead4f9c613e93299ac4b7ad75eb Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 13 Nov 2019 18:00:35 +0100
Subject: [PATCH] mark destructive actions in red

---
 res/css/views/right_panel/_UserInfo.scss     |  3 +++
 src/components/views/right_panel/UserInfo.js | 24 +++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 79211bb38a..49f52d3387 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -136,6 +136,9 @@ limitations under the License.
         line-height: 16px;
         margin: 8px 0;
 
+        &.mx_UserInfo_destructive {
+            color: $warning-color;
+        }
     }
 
     .mx_UserInfo_statusMessage {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 12a38c468e..0b8fb8782c 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -224,7 +224,7 @@ const UserOptionsSection = withLegacyMatrixClient(({matrixClient: cli, member, i
         };
 
         ignoreButton = (
-            <AccessibleButton onClick={onIgnoreToggle} className="mx_UserInfo_field">
+            <AccessibleButton onClick={onIgnoreToggle} className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}>
                 { isIgnored ? _t("Unignore") : _t("Ignore") }
             </AccessibleButton>
         );
@@ -306,7 +306,7 @@ const UserOptionsSection = withLegacyMatrixClient(({matrixClient: cli, member, i
     let unverifyButton;
     if (devices && devices.some(device => device.isVerified())) {
         unverifyButton = (
-            <AccessibleButton onClick={() => unverifyUser(cli, member.userId)} className="mx_UserInfo_field">
+            <AccessibleButton onClick={() => unverifyUser(cli, member.userId)} className="mx_UserInfo_field mx_UserInfo_destructive">
                 { _t('Unverify user') }
             </AccessibleButton>
         );
@@ -428,7 +428,7 @@ const RoomKickButton = withLegacyMatrixClient(({matrixClient: cli, member, start
     };
 
     const kickLabel = member.membership === "invite" ? _t("Disinvite") : _t("Kick");
-    return <AccessibleButton className="mx_UserInfo_field" onClick={onKick}>
+    return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onKick}>
         { kickLabel }
     </AccessibleButton>;
 });
@@ -501,7 +501,7 @@ const RedactMessagesButton = withLegacyMatrixClient(({matrixClient: cli, member}
         }
     };
 
-    return <AccessibleButton className="mx_UserInfo_field" onClick={onRedactAllMessages}>
+    return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onRedactAllMessages}>
         { _t("Remove recent messages") }
     </AccessibleButton>;
 });
@@ -553,7 +553,11 @@ const BanToggleButton = withLegacyMatrixClient(({matrixClient: cli, member, star
         label = _t("Unban");
     }
 
-    return <AccessibleButton className="mx_UserInfo_field" onClick={onBanOrUnban}>
+    const classes = classNames("mx_UserInfo_field", {
+        mx_UserInfo_destructive: member.membership !== 'ban',
+    });
+
+    return <AccessibleButton className={classes} onClick={onBanOrUnban}>
         { label }
     </AccessibleButton>;
 });
@@ -610,8 +614,12 @@ const MuteToggleButton = withLegacyMatrixClient(
             }
         };
 
+        const classes = classNames("mx_UserInfo_field", {
+            mx_UserInfo_destructive: !isMuted,
+        });
+
         const muteLabel = isMuted ? _t("Unmute") : _t("Mute");
-        return <AccessibleButton className="mx_UserInfo_field" onClick={onMuteToggle}>
+        return <AccessibleButton className={classes} onClick={onMuteToggle}>
             { muteLabel }
         </AccessibleButton>;
     },
@@ -734,7 +742,7 @@ const GroupAdminToolsSection = withLegacyMatrixClient(
             };
 
             const kickButton = (
-                <AccessibleButton className="mx_UserInfo_field" onClick={_onKick}>
+                <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={_onKick}>
                     { isInvited ? _t('Disinvite') : _t('Remove from community') }
                 </AccessibleButton>
             );
@@ -975,7 +983,7 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
     // FIXME this should be using cli instead of MatrixClientPeg.matrixClient
     if (isSynapseAdmin && user.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
         synapseDeactivateButton = (
-            <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field">
+            <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
                 {_t("Deactivate user")}
             </AccessibleButton>
         );