adjusted karma tooltip

client/coral-admin/src/components/KarmaTooltip.css

@@ -59,6 +59,34 @@
   transform: rotate(180deg);
 }
 
+.menu ul {
+  list-style: none;
+  padding: 0;
+  
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0;
+  }
+}
+
+.label {
+  padding: 4px 5px;
+  border-radius: 3px;
+  color: #fff;
+  font-weight: 400;
+  text-align: center;
+  font-size: .9em;
+  line-height: normal;
+  letter-spacing: .4px;
+  min-width: 25px;
+  display: block;
+
+  /* &.reliable { background-color: #03AB61; } */
+  /* &.neutral { background-color: #616161; } */
+  &.unreliable { background-color: #F44336; }
+}
+
 .descriptionList {
   padding: 0;
   margin: 0;
@@ -77,4 +105,4 @@
   color: #2B7EB5;
   text-decoration: underline;
   display: block;
-}
+}

client/coral-admin/src/components/KarmaTooltip.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Icon } from 'coral-ui';
 import styles from './KarmaTooltip.css';
@@ -8,6 +9,13 @@ import t from 'coral-framework/services/i18n';
 const initialState = { menuVisible: false };
 
 class KarmaTooltip extends React.Component {
+  static propTypes = {
+    settings: PropTypes.shape({
+      reliable: PropTypes.number.isRequired,
+      unreliable: PropTypes.number.isRequired,
+    }).isRequired,
+  };
+
   state = initialState;
 
   toogleMenu = () => {
@@ -19,6 +27,7 @@ class KarmaTooltip extends React.Component {
   };
 
   render() {
+    const { settings: { unreliable } } = this.props;
     const { menuVisible } = this.state;
 
     return (
@@ -34,6 +43,26 @@ class KarmaTooltip extends React.Component {
           {menuVisible && (
             <div className={cn(styles.menu, 'talk-admin-karma-tooltip-menu')}>
               <strong>{t('user_detail.user_karma_score')}</strong>
+              <ul>
+                {/* <li>
+                  <span>Reliable</span>{' '}
+                  <span className={cn(styles.label, styles.reliable)}>
+                    &ge; {reliable}
+                  </span>
+                </li>
+                <li>
+                  <span>Neutral</span>{' '}
+                  <span className={cn(styles.label, styles.neutral)}>
+                    &lt; {reliable}, &gt; {unreliable}
+                  </span>
+                </li> */}
+                <li>
+                  <span>{t('user_detail.unreliable')}</span>{' '}
+                  <span className={cn(styles.label, styles.unreliable)}>
+                    &le; {unreliable}
+                  </span>
+                </li>
+              </ul>
               <a
                 className={styles.link}
                 href={t('user_detail.karma_docs_link')}

client/coral-admin/src/components/UserDetail.js

@@ -6,12 +6,7 @@ import styles from './UserDetail.css';
 import UserHistory from './UserHistory';
 import { Slot } from 'coral-framework/components';
 import UserDetailCommentList from '../components/UserDetailCommentList';
-import {
-  getReliability,
-  isSuspended,
-  isBanned,
-  getKarma,
-} from 'coral-framework/utils/user';
+import { isSuspended, isBanned, getKarma } from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import {
@@ -81,7 +76,7 @@ class UserDetail extends React.Component {
   renderLoaded() {
     const {
       root,
-      root: { me, user, totalComments, rejectedComments },
+      root: { me, user, totalComments, rejectedComments, settings: { karma } },
       activeTab,
       selectedCommentIds,
       toggleSelect,
@@ -231,19 +226,6 @@ class UserDetail extends React.Component {
                   {rejectedPercent.toFixed(1)}%
                 </span>
               </li>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>
-                  {t('user_detail.reports')}
-                </span>
-                <span
-                  className={cn(
-                    styles.statReportResult,
-                    styles[getReliability(user.reliable.flagger)]
-                  )}
-                >
-                  {capitalize(getReliability(user.reliable.flagger))}
-                </span>
-              </li>
               <li className={cn(styles.stat, styles.karmaStat)}>
                 <div>
                   <span className={styles.statItem}>
@@ -258,7 +240,7 @@ class UserDetail extends React.Component {
                     {user.reliable.commenterKarma}
                   </span>
                 </div>
-                <KarmaTooltip />
+                <KarmaTooltip settings={karma.comment} />
               </li>
             </ul>
           </div>

client/coral-admin/src/containers/UserDetail.js

@@ -185,7 +185,6 @@ export const withUserDetailQuery = withQuery(
         provider
       }
       reliable {
-        flagger
         commenter
         commenterKarma
       }

locales/en.yml

@@ -466,10 +466,10 @@ en:
     email: "Email"
     total_comments: "Total Comments"
     reject_rate: "Reject Rate"
-    reports: "Reports"
     all: "All"
     rejected: "Rejected"
     user_history: "User History"
+    unreliable: "Unreliable"
     karma: "Karma"
     learn_more: "Learn More"
     user_karma_score: "User Karma Score"