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 @@
+
+
+
+
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 {
return;
}
- // TODO: Render mod icon?
- console.log(isModerator);
-
return (
{
profileName={authorProfileName}
size={36}
/>
+ {isModerator &&
+
+ }
);
}