From 97416d421b3355ded1d782d275d807b33f0a1e44 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 23 May 2018 16:17:38 -0600
Subject: [PATCH] adjusted karma tooltip

---
 .../src/components/KarmaTooltip.css           | 30 ++++++++++++++++++-
 .../src/components/KarmaTooltip.js            | 29 ++++++++++++++++++
 .../coral-admin/src/components/UserDetail.js  | 24 ++-------------
 .../coral-admin/src/containers/UserDetail.js  |  1 -
 locales/en.yml                                |  2 +-
 5 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/client/coral-admin/src/components/KarmaTooltip.css b/client/coral-admin/src/components/KarmaTooltip.css
index dc766c5f0..ff6f8b742 100644
--- a/client/coral-admin/src/components/KarmaTooltip.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/client/coral-admin/src/components/KarmaTooltip.js b/client/coral-admin/src/components/KarmaTooltip.js
index 370856f1f..772b119e9 100644
--- a/client/coral-admin/src/components/KarmaTooltip.js
+++ b/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')}
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index f81274934..1b3fe4333 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/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>
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 1664e7cae..f12b26b30 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -185,7 +185,6 @@ export const withUserDetailQuery = withQuery(
         provider
       }
       reliable {
-        flagger
         commenter
         commenterKarma
       }
diff --git a/locales/en.yml b/locales/en.yml
index 273a6d423..9b38c833f 100644
--- a/locales/en.yml
+++ b/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"