From e9a2b57d3737b82a7b2cbeac67ca67b503b1158d Mon Sep 17 00:00:00 2001
From: Beaudan Brown <beau@loki.network>
Date: Tue, 10 Sep 2019 16:07:29 +1000
Subject: [PATCH] Show crown icon for moderators

---
 images/crown.svg                       | 47 ++++++++++++++++++++++++++
 js/background.js                       |  1 +
 js/models/conversations.js             |  3 +-
 stylesheets/_modules.scss              | 16 +++++++++
 ts/components/conversation/Message.tsx |  8 +++--
 5 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 images/crown.svg

diff --git a/images/crown.svg b/images/crown.svg
new file mode 100644
index 000000000..1a97b67d1
--- /dev/null
+++ b/images/crown.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="156.745px" height="156.745px" viewBox="0 0 156.745 156.745" style="enable-background:new 0 0 156.745 156.745;"
+	 xml:space="preserve">
+<g>
+	<path d="M155.656,49.94c-0.97-0.722-2.299-0.717-3.259,0.01l-43.321,33.072L80.844,19.236c-0.864-1.954-4.07-1.954-4.936,0
+		L47.332,83.772L4.364,49.991c-0.949-0.762-2.299-0.772-3.262-0.056c-0.988,0.73-1.36,2.009-0.917,3.148l28.907,74.669
+		c0.4,1.039,1.402,1.725,2.515,1.725h93.542c1.113,0,2.12-0.686,2.516-1.725l28.904-74.669
+		C156.996,51.944,156.626,50.67,155.656,49.94z M77.635,42.22L52.489,97.472c-0.277,0.602-0.81,1.045-1.458,1.203
+		c-0.169,0.042-0.335,0.062-0.52,0.062c-0.475,0-0.944-0.152-1.326-0.453L17.632,73.636c-0.939-0.74-1.107-2.101-0.372-3.034
+		c0.738-0.939,2.088-1.113,3.035-0.367l29.392,22.966l24.002-52.763c0.499-1.092,1.788-1.562,2.864-1.076
+		C77.654,39.855,78.134,41.134,77.635,42.22z M124.722,138.974H32.018c-1.485,0-2.7-1.207-2.7-2.699c0-1.482,1.215-2.7,2.7-2.7
+		h92.704c1.481,0,2.7,1.218,2.7,2.7C127.422,137.767,126.204,138.974,124.722,138.974z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/js/background.js b/js/background.js
index 88ce7275b..cbb56c2cf 100644
--- a/js/background.js
+++ b/js/background.js
@@ -55,6 +55,7 @@
     'check.svg',
     'clock.svg',
     'close-circle.svg',
+    'crown.svg',
     'delete.svg',
     'dots-horizontal.svg',
     'double-check.svg',
diff --git a/js/models/conversations.js b/js/models/conversations.js
index 279a28247..2a2443b04 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -2140,7 +2140,8 @@
       if (!this.isPublic()) {
         return false;
       }
-      return this.get('moderators').includes(pubKey);
+      const moderators = this.get('moderators');
+      return Array.isArray(moderators) && moderators.includes(pubKey);
     },
     async setModerators(moderators) {
       if (!this.isPublic()) {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 1f433c904..e8a458dd6 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2063,6 +2063,22 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.module-avatar__icon--crown-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 21px;
+    width: 21px;
+    background-color: #ff7500;
+    border-radius: 9px;
+    padding: 2px;
+}
+
+.module-avatar__icon--crown {
+  @include color-svg('../images/crown.svg', $color-white);
+  height: 100%;
+  width: 100%;
+}
 
 .module-avatar__icon--group {
   @include color-svg('../images/profile-group.svg', $color-white);
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 7be336fb2..1429316a0 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -664,9 +664,6 @@ export class Message extends React.PureComponent<Props, State> {
       return;
     }
 
-    // TODO: Render mod icon?
-    console.log(isModerator);
-
     return (
       <div className="module-message__author-avatar">
         <Avatar
@@ -679,6 +676,11 @@ export class Message extends React.PureComponent<Props, State> {
           profileName={authorProfileName}
           size={36}
         />
+        {isModerator &&
+          <div className="module-avatar__icon--crown-wrapper">
+            <div className="module-avatar__icon--crown" />
+          </div>
+        }
       </div>
     );
   }