diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index f2154ef448..3b60c4e62b 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
- margin-top: 10px;
+ margin-top: 13px;
cursor: pointer;
}
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index 0612950ab4..bd472710ea 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -26,7 +26,7 @@ limitations under the License.
}
.mx_UserSettingsDialog_voiceIcon::before {
- mask-image: url('$(res)/img/element-icons/voice-call.svg');
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
.mx_UserSettingsDialog_bellIcon::before {
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 84283444ab..8af9d36fee 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -196,22 +196,27 @@ limitations under the License.
mask-size: contain;
mask-position: center;
}
+
+ &.mx_MessageComposer_hangup::before {
+ background-color: $warning-color;
+ }
}
+
.mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
}
.mx_MessageComposer_hangup::before {
- mask-image: url('$(res)/img/hangup.svg');
+ mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
.mx_MessageComposer_voicecall::before {
- mask-image: url('$(res)/img/element-icons/voice-call.svg');
+ mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
.mx_MessageComposer_videocall::before {
- mask-image: url('$(res)/img/element-icons/video-call.svg');
+ mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
.mx_MessageComposer_emoji::before {
diff --git a/res/img/element-icons/call/hangup.svg b/res/img/element-icons/call/hangup.svg
new file mode 100644
index 0000000000..1a1b82a1d7
--- /dev/null
+++ b/res/img/element-icons/call/hangup.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/video-call.svg b/res/img/element-icons/call/video-call.svg
similarity index 100%
rename from res/img/element-icons/video-call.svg
rename to res/img/element-icons/call/video-call.svg
diff --git a/res/img/element-icons/voice-call.svg b/res/img/element-icons/call/voice-call.svg
similarity index 100%
rename from res/img/element-icons/voice-call.svg
rename to res/img/element-icons/call/voice-call.svg
diff --git a/res/img/element-icons/call/voice-muted.svg b/res/img/element-icons/call/voice-muted.svg
new file mode 100644
index 0000000000..32abafb04a
--- /dev/null
+++ b/res/img/element-icons/call/voice-muted.svg
@@ -0,0 +1,4 @@
+
diff --git a/res/img/element-icons/call/voice-unmuted.svg b/res/img/element-icons/call/voice-unmuted.svg
new file mode 100644
index 0000000000..e664080217
--- /dev/null
+++ b/res/img/element-icons/call/voice-unmuted.svg
@@ -0,0 +1,3 @@
+
diff --git a/res/img/element-icons/room/in-call.svg b/res/img/element-icons/room/in-call.svg
new file mode 100644
index 0000000000..0e574faa84
--- /dev/null
+++ b/res/img/element-icons/room/in-call.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 65d062cfaa..3171dbccbe 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -173,7 +173,7 @@ export default createReactClass({
if (this.props.hasActiveCall) {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
-