From eb453f45393021e3164e524aba9507dd2cb981e2 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 23 Oct 2018 18:11:15 +0200
Subject: [PATCH] make icons in composer smaller, better spacing

---
 res/css/views/rooms/_MessageComposer.scss     | 8 ++++----
 src/components/views/rooms/MessageComposer.js | 8 ++++----
 src/components/views/rooms/Stickerpicker.js   | 4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 1cd368860f..5fa8c8a464 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -57,10 +57,6 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_MessageComposer_row > div:last-child{
-    padding-right: 0;
-}
-
 .mx_MessageComposer .mx_MessageComposer_avatar {
     padding-left: 10px;
     padding-right: 28px;
@@ -70,6 +66,10 @@ limitations under the License.
     display: block;
 }
 
+.mx_MessageComposer .mx_AccessibleButton {
+    padding: 0 12px 0 0;
+}
+
 .mx_MessageComposer_composecontrols {
     width: 100%;
 }
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 66f3fdaa97..e96dd27acc 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -297,16 +297,16 @@ export default class MessageComposer extends React.Component {
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
                 <AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
-                    <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="26" />
+                    <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
                 </AccessibleButton>;
         } else {
             callButton =
                 <AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
-                    <TintableSvg src="img/icon-call.svg" width="35" height="35" />
+                    <TintableSvg src="img/icon-call.svg" width="25" height="25" />
                 </AccessibleButton>;
             videoCallButton =
                 <AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
-                    <TintableSvg src="img/icons-video.svg" width="35" height="35" />
+                    <TintableSvg src="img/icons-video.svg" width="25" height="25" />
                 </AccessibleButton>;
         }
 
@@ -320,7 +320,7 @@ export default class MessageComposer extends React.Component {
             const uploadButton = (
                 <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
                         onClick={this.onUploadClick} title={_t('Upload file')}>
-                    <TintableSvg src="img/icons-upload.svg" width="35" height="35" />
+                    <TintableSvg src="img/icons-upload.svg" width="25" height="25" />
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 40b1768282..085303eafb 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -351,7 +351,7 @@ export default class Stickerpicker extends React.Component {
                     onClick={this._onHideStickersClick}
                     ref='target'
                     title={_t("Hide Stickers")}>
-                    <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
+                    <TintableSvg src="img/icons-stickers.svg" width="25" height="25" />
                 </AccessibleButton>;
         } else {
             // Show show-stickers button
@@ -362,7 +362,7 @@ export default class Stickerpicker extends React.Component {
                     className="mx_MessageComposer_stickers"
                     onClick={this._onShowStickersClick}
                     title={_t("Show Stickers")}>
-                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
+                    <TintableSvg src="img/icons-stickers.svg" width="25" height="25" />
                 </AccessibleButton>;
         }
         return <div>