Merge pull request #585 from vector-im/matthew/dynamic-svg

Make SVGs and CSS dynamically recolourable
pull/599/head
Matthew Hodgson 2016-01-07 11:41:46 +00:00
commit d2635373f0
18 changed files with 130 additions and 55 deletions

View File

@ -50,9 +50,9 @@ module.exports = React.createClass({
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.png" label="Create new room" onClick={ this.onCreateRoomClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.png" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.png" label="Settings" onClick={ this.onSettingsClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Create new room" onClick={ this.onCreateRoomClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
</div>
</div>
);

View File

@ -100,6 +100,7 @@ module.exports = React.createClass({
render: function() {
var MemberList = sdk.getComponent('rooms.MemberList');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var buttonGroup;
var panel;
@ -126,13 +127,13 @@ module.exports = React.createClass({
if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
<img src="img/members.svg" width="17" height="22" title="Members" alt="Members"/>
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
<TintableSvg src="img/members.svg" width="17" height="22"/>
{ membersBadge }
{ membersHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
<img src="img/files.svg" width="17" height="22" title="Files" alt="Files"/>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
<TintableSvg src="img/files.svg" width="17" height="22"/>
{ filesHighlight }
</div>
</div>;

View File

@ -257,17 +257,17 @@ var RoomSubList = React.createClass({
unread={ self.props.activityMap[room.roomId] === 1 }
highlight={ self.props.activityMap[room.roomId] === 2 }
isInvite={ self.props.label === 'Invites' }
incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null }
/>
incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } />
);
});
},
_getHeaderJsx: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<img className="mx_RoomSubList_chevron"
<TintableSvg className="mx_RoomSubList_chevron"
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
width="10" height="10" />
</h2>

View File

@ -48,7 +48,7 @@ module.exports = React.createClass({
return (
<div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
<div className="mx_RoomTile_avatar">
<img src={ this.props.img } width="24" height="24"/>
<img src={ this.props.img } width="26" height="26"/>
</div>
{ label }
</div>

View File

@ -208,7 +208,7 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_voipChevron {
position: absolute;
bottom: -10px;
bottom: -11px;
right: 11px;
}
@ -218,6 +218,10 @@ hr.mx_RoomView_myReadMarker {
cursor: pointer;
}
.mx_RoomView_voipButton object {
pointer-events: none;
}
.mx_RoomView_unreadMessagesBar {
color: #ff0064;
cursor: pointer;
@ -315,7 +319,7 @@ hr.mx_RoomView_myReadMarker {
color: #76CFA6;
}
.mx_RoomView_tabCompleteEol img {
.mx_RoomView_tabCompleteEol object {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;

View File

@ -25,6 +25,7 @@ limitations under the License.
.mx_MImageBody_download {
color: #76cfa6;
cursor: pointer;
margin-left: -16px;
}
.mx_MImageBody_download a {
@ -32,6 +33,9 @@ limitations under the License.
text-decoration: none;
}
.mx_MImageBody_download img {
padding-right: 8px;
.mx_MImageBody_download object {
padding-right: 4px;
margin-top: -4px;
vertical-align: middle;
pointer-events: none;
}

View File

@ -82,6 +82,13 @@ limitations under the License.
cursor: pointer;
}
.mx_MessageComposer_upload object,
.mx_MessageComposer_hangup object,
.mx_MessageComposer_voicecall object,
.mx_MessageComposer_videocall object {
pointer-events: none;
}
.mx_MessageComposer_videocall {
padding-right: 10px;
padding-top: 4px;
@ -92,6 +99,6 @@ limitations under the License.
padding-top: 4px;
}
.mx_MessageComposer_upload img {
.mx_MessageComposer_upload object {
margin-top: 5px;
}

View File

@ -138,6 +138,10 @@ limitations under the License.
left: 4px;
}
.mx_RoomHeader_settingsButton object {
pointer-events: none;
}
.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
color: #76cfa6;
}
@ -203,10 +207,11 @@ limitations under the License.
vertical-align: top;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
}
.mx_RoomHeader_button img {
cursor: pointer;
.mx_RoomHeader_button object {
pointer-events: none;
}
.mx_RoomHeader_voipButton {

View File

@ -61,7 +61,7 @@ limitations under the License.
-webkit-flex: 0 0 140px;
flex: 0 0 140px;
background-color: rgba(118,207,166,0.19);
background-color: rgba(118,207,166,0.2);
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {

View File

@ -55,6 +55,10 @@ limitations under the License.
position: relative;
}
.mx_RightPanel_headerButton object {
pointer-events: none;
}
.mx_RightPanel_headerButton_highlight {
position: absolute;
bottom: -2px;

View File

@ -33,6 +33,7 @@ limitations under the License.
.mx_RoomSubList_chevron {
padding-left: 5px;
pointer-events: none;
}
.collapsed .mx_RoomSubList_chevron {

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
<title>icons_create_room</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -653.000000)">
<g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
<g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
<g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
<g id="Group-Copy-15">
<g id="icons_create_room">
<g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#454545">
<circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
</g>
<path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
<path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="26px" height="26px" viewBox="-1 -2 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
<title>icons_directory</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -689.000000)" fill="#454545">
<g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
<g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
<g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
<g id="icons_directory" transform="translate(0.000000, 36.000000)">
<path d="M8.74940618,2.46971496 C8.58491686,2.46971496 8.47565321,2.15795724 8.32719715,1.68349169 C8.11698337,1.01306413 7.80106888,0 6.69002375,0 L1.38182898,0 C0.63064133,0 0.0243467933,0.589073634 0.00118764846,1.35391924 L0,19.6264846 C0,20.3895487 0.620546318,21.0095012 1.38182898,21.0095012 L22.6187648,21.0095012 C23.3800475,21.0095012 24,20.3895487 24,19.6264846 L24,3.85213777 C24,3.08966746 23.3800475,2.46971496 22.6187648,2.46971496 L8.74940618,2.46971496 Z M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z M23.1086698,5.60391924 L0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L23.1086698,5.60391924 Z" id="Fill-137"></path>
<path d="M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z" id="Path-Copy-2" fill-opacity="0.1"></path>
<path d="M0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L0.89192399,5.60391924 Z" id="Path-Copy" fill-opacity="0.1"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="12px" height="14px" viewBox="-1 -1 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>Fill 75</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="#76CFA6">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(243.000000, 58.000000)">
<g id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap" transform="translate(1.000000, 181.000000)" sketch:type="MSShapeGroup">
<g id="Group-Copy-13">
<path d="M45.3400426,312.526774 C45.4870048,312.526774 45.633967,312.470898 45.7464849,312.35838 C45.9699899,312.134109 45.9699899,311.771296 45.7464849,311.547026 L41.3659396,307.168011 C41.1424345,306.943741 40.7788562,306.944506 40.5545857,307.167246 L36.1686823,311.540137 C35.9444119,311.764408 35.9436465,312.127986 36.1671515,312.352256 C36.3906565,312.577292 36.7542349,312.577292 36.9785053,312.353787 L40.3915495,308.950694 L40.3930804,318.425929 C40.3930804,318.742816 40.6510296,319 40.9671515,319 C41.2848042,319 41.5412226,318.742816 41.5412226,318.425929 L41.5396917,308.965237 L44.9343656,312.35838 C45.0461182,312.470898 45.1930804,312.526774 45.3400426,312.526774 L45.3400426,312.526774 Z" id="Fill-75" transform="translate(40.957057, 313.000000) rotate(-180.000000) translate(-40.957057, -313.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -9,7 +9,7 @@
<g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
<path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
<path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
<path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
<path d="M19.5,0 L19.5,14" id="Path-120" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
<title>icons_settings</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -720.000000)" fill="#454545" opacity="0.9">
<g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
<g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
<g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
<path d="M16,79 C16,77.8958278 15.6093789,76.9531289 14.828125,76.171875 C14.0468711,75.3906211 13.1041722,75 12,75 C10.8958278,75 9.95312891,75.3906211 9.171875,76.171875 C8.39062109,76.9531289 8,77.8958278 8,79 C8,80.1041722 8.39062109,81.0468711 9.171875,81.828125 C9.95312891,82.6093789 10.8958278,83 12,83 C13.1041722,83 14.0468711,82.6093789 14.828125,81.828125 C15.6093789,81.0468711 16,80.1041722 16,79 L16,79 Z M24,77.296875 L24,80.765625 C24,80.8906256 23.9583338,81.0104161 23.875,81.125 C23.7916662,81.2395839 23.6875006,81.3072916 23.5625,81.328125 L20.671875,81.765625 C20.4739573,82.3281278 20.2708344,82.8020814 20.0625,83.1875 C20.4270852,83.7083359 20.9843712,84.4270787 21.734375,85.34375 C21.8385422,85.4687506 21.890625,85.5989577 21.890625,85.734375 C21.890625,85.8697923 21.8437505,85.9895828 21.75,86.09375 C21.4687486,86.4791686 20.9531288,87.041663 20.203125,87.78125 C19.4531212,88.520837 18.9635428,88.890625 18.734375,88.890625 C18.6093744,88.890625 18.4739591,88.8437505 18.328125,88.75 L16.171875,87.0625 C15.7135394,87.3020845 15.2395858,87.4999992 14.75,87.65625 C14.5833325,89.0729238 14.4322923,90.0416641 14.296875,90.5625 C14.223958,90.8541681 14.0364598,91 13.734375,91 L10.265625,91 C10.1197909,91 9.99218805,90.9557296 9.8828125,90.8671875 C9.77343695,90.7786454 9.71354172,90.6666673 9.703125,90.53125 L9.265625,87.65625 C8.75520578,87.4895825 8.28646047,87.2968761 7.859375,87.078125 L5.65625,88.75 C5.55208281,88.8437505 5.42187578,88.890625 5.265625,88.890625 C5.11979094,88.890625 4.98958391,88.8333339 4.875,88.71875 C3.56249344,87.5312441 2.70312703,86.6562528 2.296875,86.09375 C2.22395797,85.9895828 2.1875,85.8697923 2.1875,85.734375 C2.1875,85.6093744 2.22916625,85.4895839 2.3125,85.375 C2.46875078,85.1562489 2.73437313,84.8098982 3.109375,84.3359375 C3.48437688,83.8619768 3.76562406,83.494793 3.953125,83.234375 C3.67187359,82.7135391 3.45833406,82.1979192 3.3125,81.6875 L0.453125,81.265625 C0.317707656,81.2447916 0.20833375,81.179688 0.125,81.0703125 C0.04166625,80.960937 0,80.8385423 0,80.703125 L0,77.234375 C0,77.1093744 0.04166625,76.9895839 0.125,76.875 C0.20833375,76.7604161 0.307291094,76.6927084 0.421875,76.671875 L3.328125,76.234375 C3.47395906,75.7552059 3.67708203,75.2760441 3.9375,74.796875 C3.52083125,74.203122 2.96354516,73.4843792 2.265625,72.640625 C2.16145781,72.5156244 2.109375,72.3906256 2.109375,72.265625 C2.109375,72.1614578 2.15624953,72.0416673 2.25,71.90625 C2.52083469,71.5312481 3.03385039,70.9713579 3.7890625,70.2265625 C4.54427461,69.4817671 5.03645719,69.109375 5.265625,69.109375 C5.40104234,69.109375 5.53645766,69.1614578 5.671875,69.265625 L7.828125,70.9375 C8.28646063,70.6979155 8.76041422,70.5000008 9.25,70.34375 C9.4166675,68.9270762 9.56770766,67.9583359 9.703125,67.4375 C9.77604203,67.1458319 9.96354016,67 10.265625,67 L13.734375,67 C13.8802091,67 14.007812,67.0442704 14.1171875,67.1328125 C14.226563,67.2213546 14.2864583,67.3333327 14.296875,67.46875 L14.734375,70.34375 C15.2447942,70.5104175 15.7135395,70.7031239 16.140625,70.921875 L18.359375,69.25 C18.4531255,69.1562495 18.5781242,69.109375 18.734375,69.109375 C18.8697923,69.109375 18.9999994,69.1614578 19.125,69.265625 C20.4687567,70.5052145 21.3281231,71.3906223 21.703125,71.921875 C21.776042,72.0052088 21.8125,72.1197909 21.8125,72.265625 C21.8125,72.3906256 21.7708338,72.5104161 21.6875,72.625 C21.5312492,72.8437511 21.2656269,73.1901018 20.890625,73.6640625 C20.5156231,74.1380232 20.2343759,74.505207 20.046875,74.765625 C20.3177097,75.2864609 20.5312492,75.7968725 20.6875,76.296875 L23.546875,76.734375 C23.6822923,76.7552084 23.7916662,76.820312 23.875,76.9296875 C23.9583338,77.039063 24,77.1614577 24,77.296875 L24,77.296875 Z" id="icons_settings"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
<title>icon_eol</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_2-Mentions-autocomplete" sketch:type="MSArtboardGroup" transform="translate(-772.000000, -670.000000)">
<g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
<path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
<path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
<path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
<title>icons_upload</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-873.000000, -722.000000)">
<g id="icons_upload" sketch:type="MSLayerGroup" transform="translate(873.000000, 722.000000)">
<g id="Rectangle-5-+-Rectangle-6" sketch:type="MSShapeGroup">
<path d="M0,4.00955791 C0,1.79514022 1.78163126,0 3.99825563,0 L9.59161955,0 C9.59161955,0 16.3225806,6.49234232 16.3225806,6.49234232 L16.3225806,18.0063928 C16.3225806,20.2120012 14.5290874,22 12.3296282,22 L3.99295243,22 C1.7877057,22 0,20.1996477 0,17.9904421 L0,4.00955791 Z" id="Rectangle-5" stroke="#76CFA6"></path>
<path d="M15.6804916,7.49527496 L11.5273266,7.49527496 C10.3308881,7.49527496 9.3609831,6.52527676 9.3609831,5.3289315 L9.3609831,1.88544393 L15.6804916,7.49527496 Z" id="Rectangle-6-Copy" fill="#FFFFFF"></path>
<path d="M16.3225806,7.09677419 L11.4129801,7.09677419 C10.2050375,7.09677419 9.22580645,6.11744908 9.22580645,4.90960051 L9.22580645,0" id="Rectangle-6" stroke="#76CFA6"></path>
</g>
<path d="M12.3736951,12.709235 C12.5125582,12.709235 12.6514212,12.6596674 12.7577382,12.5598531 C12.9689258,12.3609035 12.9689258,12.0390533 12.7577382,11.8401037 L8.61860697,7.95549406 C8.40741942,7.75654446 8.06387804,7.75722347 7.85196724,7.95481505 L3.70777326,11.8339926 C3.49586247,12.0329422 3.49513923,12.3554714 3.70632677,12.554421 C3.91751432,12.7540496 4.2610557,12.7540496 4.4729665,12.555779 L7.69791605,9.53690567 L7.69936254,17.9423563 C7.69936254,18.2234659 7.94309612,18.4516129 8.24179631,18.4516129 C8.541943,18.4516129 8.78423008,18.2234659 8.78423008,17.9423563 L8.78278359,9.54980684 L11.9903753,12.5598531 C12.095969,12.6596674 12.2348321,12.709235 12.3736951,12.709235 L12.3736951,12.709235 Z" id="Fill-75" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB