fix(pli): Design PLI indicators #2148

internal_packages/personal-level-indicators/lib/personal-level-icon.jsx

@@ -1,4 +1,9 @@
 import {React} from 'nylas-exports';
+import {RetinaImg} from 'nylas-component-kit';
+
+const StaticEmptyIndicator = (
+  <div className="personal-level-icon"></div>
+);
 
 export default class PersonalLevelIcon extends React.Component {
   // Note: You should assign a new displayName to avoid naming
@@ -9,37 +14,31 @@ export default class PersonalLevelIcon extends React.Component {
     thread: React.PropTypes.object.isRequired,
   };
 
-  // In the constructor, we're setting the component's initial state.
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      level: this._calculateLevel(this.props.thread),
-    };
-  }
-
-  // Some more application logic which is specific to this package to decide
-  // what level of personalness is related to the `thread`.
-  _calculateLevel = (thread) => {
-    const hasMe = thread.participants.filter(p => p.isMe()).length > 0;
-    const numOthers = hasMe ? thread.participants.length - 1 : thread.participants.length;
-
-    if (!hasMe) { return 0; }
-    if (numOthers > 1) { return 1; }
-    if (numOthers === 1) { return 2; }
-    return 3;
+  renderIndicator(level) {
+    return (
+      <div className="personal-level-icon">
+        <RetinaImg
+          url={`nylas://personal-level-indicators/assets/PLI-Level${level}@2x.png`}
+          mode={RetinaImg.Mode.ContentDark}
+        />
+      </div>
+    )
   }
 
   // React components' `render` methods return a virtual DOM element to render.
   // The returned DOM fragment is a result of the component's `state` and
   // `props`. In that sense, `render` methods are deterministic.
   render() {
-    const levelCharacter = ["", "\u3009", "\u300b", "\u21ba"][this.state.level];
+    const {thread} = this.props;
+    const me = thread.participants.find(p => p.isMe());
 
-    return (
-      <div className="personal-level-icon">
-        {levelCharacter}
-      </div>
-    );
+    if (me && thread.participants.length === 2) {
+      return this.renderIndicator(2);
+    }
+    if (me && thread.participants.length > 2) {
+      return this.renderIndicator(1);
+    }
+
+    return StaticEmptyIndicator;
   }
 }

internal_packages/personal-level-indicators/stylesheets/main.less

@@ -2,7 +2,17 @@
 @import "ui-mixins";
 
 div.personal-level-icon {
-  width: 15px;
   display: inline-block;
-  margin-top: 1px;
+  margin: 0 3px;
+  img {
+    vertical-align: initial;
+  }
+}
+
+.list-item.focused, .list-item.selected {
+  div.personal-level-icon {
+    img {
+      -webkit-filter: brightness(600%) grayscale(100%);
+    }
+  }
 }