make icons in composer smaller, better spacing

This commit is contained in:
Bruno Windels 2018-10-23 18:11:15 +02:00
parent f7d59bc338
commit eb453f4539
3 changed files with 10 additions and 10 deletions

View file

@ -57,10 +57,6 @@ limitations under the License.
width: 100%; width: 100%;
} }
.mx_MessageComposer_row > div:last-child{
padding-right: 0;
}
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
padding-left: 10px; padding-left: 10px;
padding-right: 28px; padding-right: 28px;
@ -70,6 +66,10 @@ limitations under the License.
display: block; display: block;
} }
.mx_MessageComposer .mx_AccessibleButton {
padding: 0 12px 0 0;
}
.mx_MessageComposer_composecontrols { .mx_MessageComposer_composecontrols {
width: 100%; width: 100%;
} }

View file

@ -297,16 +297,16 @@ export default class MessageComposer extends React.Component {
if (this.props.callState && this.props.callState !== 'ended') { if (this.props.callState && this.props.callState !== 'ended') {
hangupButton = hangupButton =
<AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}> <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>; </AccessibleButton>;
} else { } else {
callButton = callButton =
<AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}> <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>; </AccessibleButton>;
videoCallButton = videoCallButton =
<AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}> <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>; </AccessibleButton>;
} }
@ -320,7 +320,7 @@ export default class MessageComposer extends React.Component {
const uploadButton = ( const uploadButton = (
<AccessibleButton key="controls_upload" className="mx_MessageComposer_upload" <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
onClick={this.onUploadClick} title={_t('Upload file')}> 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" <input ref="uploadInput" type="file"
style={uploadInputStyle} style={uploadInputStyle}
multiple multiple

View file

@ -351,7 +351,7 @@ export default class Stickerpicker extends React.Component {
onClick={this._onHideStickersClick} onClick={this._onHideStickersClick}
ref='target' ref='target'
title={_t("Hide Stickers")}> 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>; </AccessibleButton>;
} else { } else {
// Show show-stickers button // Show show-stickers button
@ -362,7 +362,7 @@ export default class Stickerpicker extends React.Component {
className="mx_MessageComposer_stickers" className="mx_MessageComposer_stickers"
onClick={this._onShowStickersClick} onClick={this._onShowStickersClick}
title={_t("Show Stickers")}> 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>; </AccessibleButton>;
} }
return <div> return <div>