gaja-group
/
matrix-bot
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #2181 from vector-im/wmwragg/chat-multi-invite 

Wmwragg/chat multi invite
This commit is contained in:
Matthew Hodgson 2016-09-13 19:31:05 +01:00 committed by GitHub
parent a623430c2b 56606c01a0
commit c6a9614372
11 changed files with 263 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/structures/RightPanel.js
View File

@ -109,6 +109,14 @@ module.exports = React.createClass({
}
},
onInviteButtonClick: function() {
// call ChatInviteDialog
dis.dispatch({
action: 'view_invite',
roomId: this.props.roomId,
});
},
onRoomStateMember: function(ev, state, member) {
// redraw the badge on the membership list
if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@ -236,6 +244,12 @@ module.exports = React.createClass({
</div>
{ panel }
<div className="mx_RightPanel_footer">
<div className="mx_RightPanel_invite" >
<div className="mx_RightPanel_icon" onClick={ this.onInviteButtonClick } >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
<div className="mx_RightPanel_message">Invite to this room</div>
</div>
</div>
</aside>
);

4
src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
View File

@ -151,6 +151,6 @@ limitations under the License.
}
.mx_MatrixChat .mx_RightPanel.collapsed {
-webkit-flex: 0 0 72px;
flex: 0 0 72px;
-webkit-flex: 0 0 122px;
flex: 0 0 122px;
}

30
src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
View File

@ -42,33 +42,15 @@ limitations under the License.
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
overflow: hidden;
}
.mx_ChatInviteDialog_queryList {
position: absolute;
background-color: #fff;
width: 485px;
max-height: 116px;
max-height: 150px;
overflow-x: hidden;
overflow-y: scroll;
border-radius: 3px;
background-color: #fff;
border: solid 1px #76cfa6;
cursor: pointer;
}
.mx_ChatInviteDialog_queryListElement .mx_AddressTile {
background-color: #fff;
border: solid 1px #fff;
}
.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected {
background-color: #eaf5f0; /* selected colour */
}
.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile {
background-color: #eaf5f0; /* selected colour */
border: solid 1px #eaf5f0; /* selected colour */
.mx_ChatInviteDialog_error {
position: absolute;
color: #ff0064;
line-height: 36px;
}
.mx_ChatInviteDialog_cancel {

45
src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css Normal file
View File

@ -0,0 +1,45 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AddressSelector {
position: absolute;
background-color: #fff;
width: 485px;
max-height: 116px;
overflow-y: scroll;
border-radius: 3px;
background-color: #fff;
border: solid 1px #76cfa6;
cursor: pointer;
}
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #fff;
border: solid 1px #fff;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #eaf5f0; /* selected colour */
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: #eaf5f0; /* selected colour */
border: solid 1px #eaf5f0; /* selected colour */
}

55
src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
View File

@ -23,6 +23,13 @@ limitations under the License.
color: #454545;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
}
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: #ff0064;
border-color: #ff0064;
}
.mx_AddressTile_network {
@ -41,6 +48,13 @@ limitations under the License.
vertical-align: middle;
}
.mx_AddressTile_mx {
display: inline-block;
margin: 0;
border: 0;
padding: 0;
}
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
@ -71,6 +85,47 @@ limitations under the License.
vertical-align: middle;
}
.mx_AddressTile_unknownMx {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_email {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_email.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_unknown {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_unknown.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;

12
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

@ -91,19 +91,13 @@ limitations under the License.
.collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
margin-left: 0px ! important;
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_people {
margin-right: 10px;
}

27
src/skins/vector/css/vector-web/structures/RightPanel.css
View File

@ -103,3 +103,30 @@ limitations under the License.
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 35px;
font-size: 14px;
color: #4A4A4A;
padding-top: 13px;
padding-left: 5px;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon {
display: inline-block;
cursor: pointer;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
display: inline-block;
vertical-align: top;
padding-left: 10px
}

15
src/skins/vector/img/avatar-error.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>5EF602F6-A36C-41EE-BAEC-50801DFD5492</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-People-2c-Invite-modal-ERROR" transform="translate(-611.000000, -358.000000)">
<g id="avatar_error" transform="translate(611.000000, 358.000000)">
<circle id="Oval-2" fill="#FF0064" cx="12.5" cy="12.5" r="12.5"></circle>
<path d="M11.2470703,15.0292969 C11.2470703,14.5901671 11.2733559,14.2082536 11.3259277,13.8835449 C11.3784996,13.5588363 11.4650873,13.2619642 11.5856934,12.9929199 C11.7062994,12.7238756 11.8624665,12.4687512 12.0541992,12.2275391 C12.2459319,11.9863269 12.4809556,11.7296563 12.7592773,11.4575195 C12.9695649,11.2534169 13.1659333,11.0601409 13.3483887,10.8776855 C13.530844,10.6952302 13.6916497,10.508139 13.8308105,10.3164062 C13.9699714,10.1246735 14.0797522,9.920574 14.1601562,9.70410156 C14.2405603,9.48762913 14.2807617,9.2464206 14.2807617,8.98046875 C14.2807617,8.39908563 14.1369643,7.9553238 13.8493652,7.64916992 C13.5617661,7.34301605 13.1396512,7.18994141 12.5830078,7.18994141 C12.3603504,7.18994141 12.1438813,7.22086558 11.9335938,7.28271484 C11.7233062,7.34456411 11.5346688,7.44352146 11.3676758,7.57958984 C11.2006828,7.71565823 11.0661626,7.88883358 10.9641113,8.09912109 C10.86206,8.3094086 10.8110352,8.5629868 10.8110352,8.85986328 L8.55664062,8.85986328 C8.56282555,8.27848017 8.66951394,7.76668515 8.87670898,7.32446289 C9.08390403,6.88224063 9.36840639,6.51115059 9.73022461,6.21118164 C10.0920428,5.91121269 10.515704,5.68546625 11.0012207,5.53393555 C11.4867375,5.38240484 12.0139946,5.30664062 12.5830078,5.30664062 C13.2076854,5.30664062 13.7643205,5.38704347 14.2529297,5.54785156 C14.7415389,5.70865966 15.1559228,5.94368335 15.4960938,6.25292969 C15.8362647,6.56217603 16.0944815,6.9394509 16.270752,7.38476562 C16.4470224,7.83008035 16.5351562,8.33414432 16.5351562,8.89697266 C16.5351562,9.30517782 16.4702155,9.68554511 16.340332,10.0380859 C16.2104486,10.3906268 16.0372732,10.7215154 15.8208008,11.0307617 C15.6043283,11.3400081 15.356935,11.6368801 15.0786133,11.9213867 C14.8002916,12.2058933 14.5126968,12.4873033 14.2158203,12.765625 C13.8756493,13.0748713 13.6483567,13.413491 13.5339355,13.7814941 C13.4195144,14.1494973 13.3592123,14.5654274 13.3530273,15.0292969 L11.2470703,15.0292969 Z M11.0893555,17.9145508 C11.0893555,17.7413728 11.1171872,17.5805671 11.1728516,17.4321289 C11.2285159,17.2836907 11.310465,17.1538092 11.4187012,17.0424805 C11.5269374,16.9311518 11.6599113,16.8445641 11.817627,16.7827148 C11.9753426,16.7208656 12.156249,16.6899414 12.3603516,16.6899414 C12.5644541,16.6899414 12.7453605,16.7208656 12.9030762,16.7827148 C13.0607918,16.8445641 13.1937657,16.9311518 13.302002,17.0424805 C13.4102382,17.1538092 13.4937334,17.2836907 13.5524902,17.4321289 C13.611247,17.5805671 13.640625,17.7413728 13.640625,17.9145508 C13.640625,18.2547218 13.529298,18.5392241 13.3066406,18.7680664 C13.0839833,18.9969087 12.7685567,19.1113281 12.3603516,19.1113281 C11.9521464,19.1113281 11.6382661,18.9969087 11.4187012,18.7680664 C11.1991363,18.5392241 11.0893555,18.2547218 11.0893555,17.9145508 L11.0893555,17.9145508 Z" id="?" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

17
src/skins/vector/img/icon-email-user.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>6F488856-F8EF-479C-9747-AB6E0945C7DE</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-Group-5a-Invite-modal" transform="translate(-611.000000, -366.000000)">
<g id="Group-6" transform="translate(604.000000, 364.000000)">
<g id="icon_email_user" transform="translate(7.000000, 2.000000)">
<circle id="Oval-2" fill="#D8D8D8" cx="12.5" cy="12.5" r="12.5"></circle>
<path d="M19.3007812,12.2265625 C19.3007812,12.9713579 19.1835949,13.6523407 18.9492188,14.2695312 C18.7148426,14.8867218 18.3854188,15.3671858 17.9609375,15.7109375 C17.5364562,16.0546892 17.0455757,16.2265625 16.4882812,16.2265625 C16.0768209,16.2265625 15.7200536,16.1171886 15.4179688,15.8984375 C15.1158839,15.6796864 14.9127609,15.3828144 14.8085938,15.0078125 L14.7148438,15.0078125 C14.4596341,15.4140645 14.1445331,15.718749 13.7695312,15.921875 C13.3945294,16.125001 12.9726586,16.2265625 12.5039062,16.2265625 C11.6549437,16.2265625 10.9869816,15.9531277 10.5,15.40625 C10.0130184,14.8593723 9.76953125,14.1197963 9.76953125,13.1875 C9.76953125,12.114578 10.0924447,11.2434929 10.7382812,10.5742188 C11.3841178,9.90494457 12.2512966,9.5703125 13.3398438,9.5703125 C13.7356791,9.5703125 14.1744768,9.6054684 14.65625,9.67578125 C15.1380232,9.7460941 15.5664044,9.84374937 15.9414062,9.96875 L15.7695312,13.6015625 L15.7695312,13.7890625 C15.7695312,14.6224 16.0403619,15.0390625 16.5820312,15.0390625 C16.9934916,15.0390625 17.3203113,14.7734402 17.5625,14.2421875 C17.8046887,13.7109348 17.9257812,13.0338583 17.9257812,12.2109375 C17.9257812,11.320308 17.7434914,10.5377638 17.3789062,9.86328125 C17.0143211,9.18879871 16.4960971,8.66927266 15.8242188,8.3046875 C15.1523404,7.94010234 14.3815148,7.7578125 13.5117188,7.7578125 C12.4023382,7.7578125 11.4375041,7.98697687 10.6171875,8.4453125 C9.7968709,8.90364813 9.17057508,9.55858949 8.73828125,10.4101562 C8.30598742,11.261723 8.08984375,12.2499944 8.08984375,13.375 C8.08984375,14.8854242 8.49348555,16.0468709 9.30078125,16.859375 C10.108077,17.6718791 11.2669195,18.078125 12.7773438,18.078125 C13.9283912,18.078125 15.1289,17.8437523 16.3789062,17.375 L16.3789062,18.65625 C15.2851508,19.1041689 14.0950585,19.328125 12.8085938,19.328125 C10.8815008,19.328125 9.37891164,18.8085989 8.30078125,17.7695312 C7.22265086,16.7304636 6.68359375,15.2812593 6.68359375,13.421875 C6.68359375,12.0624932 6.9752575,10.8528699 7.55859375,9.79296875 C8.14193,8.73306762 8.95051566,7.92187781 9.984375,7.359375 C11.0182343,6.79687219 12.1887955,6.515625 13.4960938,6.515625 C14.6263077,6.515625 15.6328081,6.74999766 16.515625,7.21875 C17.3984419,7.68750234 18.0833309,8.35546441 18.5703125,9.22265625 C19.0572941,10.0898481 19.3007812,11.0911402 19.3007812,12.2265625 L19.3007812,12.2265625 Z M11.2695312,13.21875 C11.2695312,14.4322977 11.746089,15.0390625 12.6992188,15.0390625 C13.7044321,15.0390625 14.2539058,14.2760493 14.3476562,12.75 L14.4414062,10.8828125 C14.1132796,10.7942704 13.7617206,10.75 13.3867188,10.75 C12.7200488,10.75 12.2005227,10.971352 11.828125,11.4140625 C11.4557273,11.856773 11.2695312,12.4583295 11.2695312,13.21875 L11.2695312,13.21875 Z" id="@" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

24
src/skins/vector/img/icon-invite-people.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>9BA71BF4-DC4F-42D2-B2D0-9EAE0F7F8D45</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Right-panel/Footer" transform="translate(-26.000000, -34.000000)">
<g id="icon_invite_people" transform="translate(26.000000, 34.000000)">
<path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval" fill="#76CFA6"></path>
<g id="Group-5" transform="translate(8.000000, 9.000000)" stroke="#FFFFFF">
<g id="Group-3" opacity="0.8" transform="translate(14.437500, 3.937500)" stroke-linecap="round">
<path d="M0,3.28125 L6.5625,3.28125" id="Line"></path>
<path d="M3.28125,0 L3.28125,6.5625" id="Line"></path>
</g>
<g id="icons_people_svg">
<path d="M13.78125,15.75 C13.78125,12.1256313 13.7812503,9.1875 7.21875,9.1875 C0.656249741,9.1875 0.65625,12.1256313 0.65625,15.75 C5.21807306,15.75 7.96856689,15.75 13.78125,15.75 Z" id="Oval-40" stroke-linecap="round" stroke-linejoin="round"></path>
<circle id="Oval" cx="7.21875" cy="3.609375" r="3.609375"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

55
src/skins/vector/img/icon-mx-user.svg Normal file
View File

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>7EB955F8-D226-4EEE-B1DF-E97BA41D1247</title>
<desc>Created with sketchtool.</desc>
<defs>
<ellipse id="path-1" cx="7.68292683" cy="15.4246795" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.36546279" height="4.27100271">
<rect x="5.50019543" y="13.2891781" width="4.36546279" height="4.27100271" fill="white"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
<ellipse id="path-3" cx="1.72109346" cy="4.95482816" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.29534171" height="4.3426507">
<rect x="-0.426577393" y="2.78350281" width="4.29534171" height="4.3426507" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<ellipse id="path-5" cx="13.4645442" cy="4.95482816" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.29534171" height="4.3426507">
<rect x="11.3168734" y="2.78350281" width="4.29534171" height="4.3426507" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
</defs>
<g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-Group-5a-Invite-modal-ALT" transform="translate(-611.000000, -366.000000)">
<g id="Group-6" transform="translate(604.000000, 364.000000)">
<g id="icon_mx_user" transform="translate(7.000000, 2.000000)">
<circle id="Oval-2" fill="#FFFFFF" cx="12.5" cy="12.5" r="12.5"></circle>
<g id="Mark" transform="translate(5.000000, 4.000000)">
<ellipse id="large-circ-copy-42" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="8.50694444" rx="6.77506775" ry="7.01121795"></ellipse>
<ellipse id="Oval-1-Copy-200" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="1.40224359" rx="1.35501355" ry="1.40224359"></ellipse>
<ellipse id="Oval-1-Copy-201" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="1.72109346" cy="11.8725632" rx="1.35501355" ry="1.40224359"></ellipse>
<ellipse id="Oval-1-Copy-202" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="13.4645442" cy="11.8725632" rx="1.35501355" ry="1.40224359"></ellipse>
<path d="M7.77326107,14.0224359 C7.77326107,14.0224359 3.07588076,10.0441118 3.07588076,5.04807692" id="Path-72-Copy-2" stroke="#73D0A5" stroke-width="0.780487805"></path>
<path d="M12.2899729,14.0224359 C12.2899729,14.0224359 7.59259259,10.0441118 7.59259259,5.04807692" id="Path-72-Copy-3" stroke="#73D0A5" stroke-width="0.780487805" transform="translate(9.941283, 9.535256) scale(-1, 1) translate(-9.941283, -9.535256) "></path>
<g id="Oval-1-Copy-203">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="1.56097561" xlink:href="#path-1"></use>
<use stroke="#73D0A5" stroke-width="0.780487805" xlink:href="#path-1"></use>
</g>
<g id="Oval-1-Copy-204">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
<use stroke="#FFFFFF" mask="url(#mask-4)" stroke-width="1.56097561" xlink:href="#path-3"></use>
<use stroke="#73D0A5" stroke-width="0.780487805" xlink:href="#path-3"></use>
</g>
<g id="Oval-1-Copy-205">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#FFFFFF" mask="url(#mask-6)" stroke-width="1.56097561" xlink:href="#path-5"></use>
<use stroke="#76CFA6" stroke-width="0.780487805" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB