diff --git a/apps/meteor/app/otr/client/index.js b/apps/meteor/app/otr/client/index.js
index 2f503d29351..5a0f82552fb 100644
--- a/apps/meteor/app/otr/client/index.js
+++ b/apps/meteor/app/otr/client/index.js
@@ -1,4 +1,3 @@
-import './stylesheets/otr.css';
import './rocketchat.otr.room';
import './rocketchat.otr';
import './tabBar';
diff --git a/apps/meteor/app/otr/client/stylesheets/otr.css b/apps/meteor/app/otr/client/stylesheets/otr.css
deleted file mode 100644
index 066075e5ec1..00000000000
--- a/apps/meteor/app/otr/client/stylesheets/otr.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.message {
- &.otr-ack {
- .info {
- color: lightgreen;
-
- &::before {
- display: inline-block;
- visibility: visible;
-
- content: "\e952";
-
- font-family: 'fontello';
- }
- }
- }
-}
diff --git a/apps/meteor/app/otr/client/tabBar.ts b/apps/meteor/app/otr/client/tabBar.ts
index abf8bf4bbca..213aaf78980 100644
--- a/apps/meteor/app/otr/client/tabBar.ts
+++ b/apps/meteor/app/otr/client/tabBar.ts
@@ -27,7 +27,7 @@ addAction('otr', () => {
groups: ['direct'],
id: 'otr',
title: 'OTR',
- icon: 'shredder',
+ icon: 'stopwatch',
template,
order: 13,
full: true,
diff --git a/apps/meteor/app/ui-master/public/icons.svg b/apps/meteor/app/ui-master/public/icons.svg
index 337960432a6..4ffaa8296f6 100644
--- a/apps/meteor/app/ui-master/public/icons.svg
+++ b/apps/meteor/app/ui-master/public/icons.svg
@@ -339,6 +339,9 @@
+
+
+
diff --git a/apps/meteor/app/ui-master/public/icons/stopwatch.svg b/apps/meteor/app/ui-master/public/icons/stopwatch.svg
new file mode 100644
index 00000000000..39436bf1095
--- /dev/null
+++ b/apps/meteor/app/ui-master/public/icons/stopwatch.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/meteor/app/ui-message/client/message.html b/apps/meteor/app/ui-message/client/message.html
index 945e8561569..2dec6969133 100644
--- a/apps/meteor/app/ui-message/client/message.html
+++ b/apps/meteor/app/ui-message/client/message.html
@@ -74,6 +74,9 @@
{{#if showStar}}
{{/if}}
+ {{#if showOtrAck}}
+ {{> icon icon="stopwatch" }}
+ {{/if}}
{{#if following }}
{{#unless msg.tcount}}
diff --git a/apps/meteor/app/ui-message/client/message.js b/apps/meteor/app/ui-message/client/message.js
index a68353f6f8a..94960311da9 100644
--- a/apps/meteor/app/ui-message/client/message.js
+++ b/apps/meteor/app/ui-message/client/message.js
@@ -260,6 +260,10 @@ Template.message.helpers({
);
}
},
+ showOtrAck() {
+ const { msg } = this;
+ return msg.t === 'otr-ack';
+ },
translationProvider() {
const instance = Template.instance();
const { translationProvider } = instance.data.msg;
diff --git a/apps/meteor/client/views/room/contextualBar/OTR/OTR.js b/apps/meteor/client/views/room/contextualBar/OTR/OTR.js
index 9622b4245d7..fc276aa4e26 100644
--- a/apps/meteor/client/views/room/contextualBar/OTR/OTR.js
+++ b/apps/meteor/client/views/room/contextualBar/OTR/OTR.js
@@ -10,7 +10,7 @@ const OTR = ({ isEstablishing, isEstablished, isOnline, onClickClose, onClickSta
return (
<>
-
+
{t('OTR')}
{onClickClose && }
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index bd882f31d60..fa36bdea6a5 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3344,6 +3344,7 @@
"Others": "Others",
"OTR": "OTR",
"OTR_Enable_Description": "Enable option to use off-the-record (OTR) messages in direct messages between 2 users. OTR messages are not recorded on the server and exchanged directly and encrypted between the 2 users.",
+ "OTR_message": "OTR Message",
"OTR_is_only_available_when_both_users_are_online": "OTR is only available when both users are online",
"Out_of_seats": "Out of Seats",
"Outgoing": "Outgoing",
diff --git a/apps/meteor/private/public/icons.svg b/apps/meteor/private/public/icons.svg
index 337960432a6..4ffaa8296f6 100644
--- a/apps/meteor/private/public/icons.svg
+++ b/apps/meteor/private/public/icons.svg
@@ -339,6 +339,9 @@
+
+
+