Use a mask instead of an img for "Show image" eye

See https://github.com/matrix-org/matrix-react-sdk/pull/3492#pullrequestreview-296223646
pull/21833/head
Travis Ralston 2019-10-02 12:52:07 -06:00
parent b94c94db04
commit 0491b742c2
2 changed files with 9 additions and 3 deletions

View File

@ -79,11 +79,17 @@ limitations under the License.
.mx_HiddenImagePlaceholder_button {
color: $accent-color;
img {
span.mx_HiddenImagePlaceholder_eye {
margin-right: 8px;
background-color: $accent-color;
mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block;
width: 18px;
height: 14px;
}
span {
span:not(.mx_HiddenImagePlaceholder_eye) {
vertical-align: text-bottom;
}
}

View File

@ -496,7 +496,7 @@ export class HiddenImagePlaceholder extends React.PureComponent {
return (
<div className={className}>
<div className='mx_HiddenImagePlaceholder_button'>
<img src={require("../../../../res/img/feather-customised/eye.svg")} width={17} height={12} />
<span className='mx_HiddenImagePlaceholder_eye' />
<span>{_t("Show image")}</span>
</div>
</div>