Updated the post analytics tab design and added in responsiveness

- Changed the tab design to now include icons all across
- Better way of showing positive sentiment
- Much better responsiveness for the whole page

refs https://github.com/TryGhost/Team/issues/2172
This commit is contained in:
James Morris 2022-10-26 17:59:21 +01:00
parent f1e476d6af
commit 4f40fb8e12
15 changed files with 135 additions and 57 deletions

View File

@ -44,8 +44,8 @@
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
{{#if this.post.hasBeenEmailed}}
<tabs.tab>
<h3>Sent</h3>
<p>{{format-number this.post.email.emailCount}}</p>
<h3>{{svg-jar "analytics-tab-sent-large"}}{{format-number this.post.email.emailCount}}</h3>
<p>{{svg-jar "analytics-tab-sent"}}<span class="analytics-tab-label">Sent</span></p>
</tabs.tab>
<tabs.tabPanel>
@ -58,8 +58,8 @@
{{#if this.post.showEmailOpenAnalytics }}
<tabs.tab>
<h3>Opened</h3>
<p>{{format-number this.post.email.openedCount}} <strong>{{this.post.email.openRate}}%</strong></p>
<h3>{{svg-jar "analytics-tab-opened-large"}}{{format-number this.post.email.openedCount}}</h3>
<p>{{svg-jar "analytics-tab-opened"}}<span class="analytics-tab-label">Opened<span class="analytics-tab-percentage">&nbsp;— {{this.post.email.openRate}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
@ -73,8 +73,8 @@
{{#if this.post.showEmailClickAnalytics }}
<tabs.tab>
<h3>Clicked</h3>
<p>{{format-number this.post.count.clicks}} <strong>{{this.post.clickRate}}%</strong></p>
<h3>{{svg-jar "analytics-tab-clicked-large"}}{{format-number this.post.count.clicks}}</h3>
<p>{{svg-jar "analytics-tab-clicked"}}<span class="analytics-tab-label">Clicked<span class="analytics-tab-percentage">&nbsp;— {{this.post.clickRate}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
@ -89,11 +89,8 @@
{{#if this.post.showAudienceFeedback }}
<tabs.tab>
<h3>Positive feedback</h3>
<p>
{{format-number this.post.count.positive_feedback}}
{{!-- <strong>{{this.post.sentiment}}%</strong> --}}
</p>
<h3>{{svg-jar "analytics-tab-feedback-large"}}{{format-number this.post.count.positive_feedback}}</h3>
<p>{{svg-jar "analytics-tab-feedback"}}<span class="analytics-tab-label">Feedback<span class="analytics-tab-percentage">&nbsp;— {{this.post.sentiment}}%</span></span></p>
</tabs.tab>
<tabs.tabPanel>
@ -109,8 +106,8 @@
{{#if this.post.showAttributionAnalytics }}
<tabs.tab>
<h3>{{gh-pluralize this.post.count.conversions "Conversions" without-count=true}}</h3>
<p>{{format-number this.post.count.conversions}}</p>
<h3>{{svg-jar "analytics-tab-conversions-large"}}{{format-number this.post.count.conversions}}</h3>
<p>{{svg-jar "analytics-tab-conversions"}}<span class="analytics-tab-label">{{gh-pluralize this.post.count.conversions "Conversions" without-count=true}}</span></p>
</tabs.tab>
<tabs.tabPanel>

View File

@ -87,7 +87,7 @@
{{#if (or this.showPagination (feature "fixNewsletterLinks")) }}
<div class="gh-links-pagination">
{{#if (feature "fixNewsletterLinks")}}
<span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span>
<span class="gh-links-info">{{svg-jar "arrow-right-tail"}} <span class="gh-links-info-normal">Sent a broken link? You can update it!</span><span class="gh-links-info-short">Update your broken link!</span></span>
{{#if (not (feature "audienceFeedback"))}}
<div class="gh-links-pagination-actions">

View File

@ -83,7 +83,7 @@
{{#if (compute (fn this.areStubsNeeded eventsFetcher))}}
{{#let (compute (fn this.getAmountOfStubs eventsFetcher)) as |stubs|}}
{{#each stubs}}
<div class="gh-dashboard-list-item"></div>
<div class="gh-dashboard-list-item gh-dashboard-list-item-stub"></div>
{{/each}}
{{/let}}
{{/if}}

View File

@ -1431,6 +1431,10 @@ kbd {
border-color: #26282b;
}
.gh-tabs-analytics .tab-list h3 svg path {
stroke: #fff !important;
}
.gh-tabs-analytics .tab-panel-selected,
.gh-tabs-analytics .tab-selected {
background: #101114;

View File

@ -1240,6 +1240,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
transform: rotate(-90deg);
}
.gh-links-info .gh-links-info-short {
display: none;
}
.gh-links-pagination {
display: flex;
justify-content: space-between;
@ -1342,6 +1346,16 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
background: none;
}
@media (max-width: 1000px) {
.gh-links-info .gh-links-info-short {
display: inline;
}
.gh-links-info .gh-links-info-normal {
display: none;
}
}
/* Post list LABS
/* ---------------------------------------------------------- */
@ -1594,17 +1608,17 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
border: 1px solid #ECEEF0;
}
.gh-tabs-analytics .tab{
.gh-tabs-analytics .tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid transparent;
border-bottom: none;
padding: 16px 20px;
padding: 10px 14px 22px;
text-align: left;
}
.gh-tabs-analytics .tab-selected{
.gh-tabs-analytics .tab-selected {
box-sizing: border-box;
background: #ffffff;
border: 1px solid #E7E9EB;
@ -1635,39 +1649,47 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
min-height: 121px;
}
.gh-tabs-analytics h3 {
.gh-tabs-analytics .tab-list h3 {
display: flex;
flex-direction: row;
gap: 3px;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.gh-tabs-analytics p {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin: 0;
font-size: 2.4rem;
align-items: center;
gap: 4px;
padding: 0 0 0 1px;
margin: 0 0 6px;
font-weight: 600;
line-height: 1.2;
font-size: 2.8rem;
line-height: 1em;
letter-spacing: -0.05em;
color: var(--black);
white-space: nowrap;
}
.gh-tabs-analytics strong {
.gh-tabs-analytics .tab-list h3 svg {
display: none;
width: 20px;
height: 20px;
color: var(--black);
}
.gh-tabs-analytics .tab-list p {
display: flex;
gap: 2px;
color: #909CAB;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.2;
flex-direction: row;
gap: 6px;
align-items: center;
line-height: 1em;
white-space: nowrap;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: .03em;
color: var(--midgrey);
text-transform: uppercase;
padding: 0;
margin: 0;
}
.gh-tabs-analytics strong svg {
.gh-tabs-analytics .tab-list p svg {
width: 16px;
height: 16px;
stroke: #909CAB;
}
.gh-tabs-analytics .gh-dashboard-list-item {
@ -1691,8 +1713,12 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
}
@media (max-width: 1200px) {
.gh-tabs-analytics .tab{
padding: 8px 10px;
.gh-tabs-analytics .tab {
padding: 8px 7px 14px;
}
.gh-tabs-analytics .tab .analytics-tab-percentage {
display: none;
}
.gh-tabs-analytics .tab-panel-selected {
@ -1712,6 +1738,21 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
}
}
@media (max-width: 1000px) {
.gh-tabs-analytics .tab-list h3 {
margin-bottom: 0;
font-size: 1.8rem;
}
.gh-tabs-analytics .tab-list h3 svg {
display: block;
}
.gh-tabs-analytics .tab-list p {
display: none;
}
}
@media (max-width: 440px) {
.gh-tabs-analytics .tab-list {
padding: 4px 4px 0px;
@ -1735,12 +1776,6 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
grid-template-columns: 1fr auto
}
@media (max-width: 1150px) {
.gh-post-activity-feed {
grid-template-columns: unset;
}
}
.gh-post-activity-feed .gh-member-list-avatar {
font-size: 1.25rem;
}
@ -1852,14 +1887,6 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
font-size: 0px;
}
@media (max-width: 500px) {
.gh-post-activity-feed-footer {
flex-direction: column;
align-items: flex-start;
padding: 16px 0;
}
}
.gh-feedback-events-tooltip {
opacity: 0;
position: fixed;
@ -1921,3 +1948,17 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
.gh-post-activity-chart-link[hidden="true"] {
display: none;
}
@media (max-width: 1150px) {
.gh-post-activity-feed {
grid-template-columns: unset;
}
.gh-dashboard-list-item-stub {
display: none !important;
}
.gh-feedback-events-feed {
padding: 0 0 24px;
}
}

View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.85 18.0628L14.4836 16.7571C14.6311 16.684 14.6921 16.5056 14.6203 16.3574L12.75 12.5C12.75 12.5 16.356 10.6476 16.4048 10.5808C16.4654 10.498 16.5058 10.4016 16.5224 10.3003C16.539 10.199 16.5313 10.0959 16.5 10C16.4687 9.90425 16.4148 9.81871 16.3429 9.7511L5.63656 2.03028C5.5505 1.94919 5.4423 1.89712 5.3256 1.88064C5.20889 1.86416 5.08892 1.88398 4.98076 1.93764C4.87261 1.99128 4.78114 2.07635 4.71786 2.18212C4.65459 2.28789 4.62234 2.40962 4.62517 2.53199L4.94543 15.1123C4.94788 15.2144 4.97466 15.3133 5.02338 15.4005C5.07212 15.4876 5.1413 15.5602 5.22479 15.6119C5.30827 15.6635 5.40347 15.6924 5.50196 15.6963C5.60045 15.7002 5.69915 15.6788 5.78932 15.6339L9.35035 13.8675L11.0578 17.7763C11.1228 17.9241 11.2427 18.0373 11.3911 18.091C11.5396 18.1446 11.7045 18.1345 11.85 18.0628Z" stroke="#15171A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 999 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.47919 14.4502L11.5328 13.4321C11.6803 13.359 11.7413 13.1806 11.6695 13.0324L10.1992 10C10.1992 10 13.084 8.51808 13.1231 8.46466C13.1716 8.3984 13.2039 8.32131 13.2171 8.24022C13.2304 8.15921 13.2243 8.07668 13.1992 8C13.1742 7.9234 13.131 7.85497 13.0736 7.80088L4.50847 1.62422C4.43962 1.55935 4.35306 1.5177 4.2597 1.50451C4.16633 1.49133 4.07035 1.50719 3.98383 1.55011C3.89731 1.59303 3.82413 1.66108 3.77351 1.7457C3.72289 1.83031 3.69709 1.9277 3.69936 2.02559L3.95556 12.0898C3.95752 12.1715 3.97894 12.2507 4.01793 12.3204C4.05692 12.3901 4.11226 12.4482 4.17905 12.4895C4.24584 12.5308 4.322 12.5539 4.40079 12.5571C4.47957 12.5602 4.55854 12.543 4.63067 12.5071L7.4795 11.094L8.84548 14.221C8.89746 14.3393 8.99337 14.4298 9.11208 14.4728C9.23088 14.5157 9.36281 14.5076 9.47919 14.4502Z" stroke="#7E8B99" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1001 B

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8653 10.0361C11.3507 10.2493 10.7991 10.359 10.242 10.359C9.11695 10.359 8.03798 9.91208 7.24245 9.11655C6.44692 8.32102 6 7.24205 6 6.117C6 4.99195 6.44692 3.91298 7.24245 3.11745C8.03798 2.32192 9.11695 1.875 10.242 1.875C10.7991 1.875 11.3507 1.98472 11.8653 2.1979C12.38 2.41108 12.8476 2.72355 13.2415 3.11745C13.6355 3.51136 13.9479 3.97899 14.1611 4.49366C14.3743 5.00832 14.484 5.55993 14.484 6.117C14.484 6.67407 14.3743 7.22568 14.1611 7.74034C13.9479 8.25501 13.6355 8.72264 13.2415 9.11655C12.8476 9.51045 12.38 9.82292 11.8653 10.0361Z" stroke="#15171A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.2832 17.7527C2.68546 16.9995 3.19932 16.3026 3.81412 15.6878C5.45507 14.0469 7.68066 13.125 10.0013 13.125C11.1504 13.125 12.2882 13.3513 13.3498 13.7911C14.4114 14.2308 15.376 14.8753 16.1885 15.6878C16.7988 16.2981 17.3143 16.9941 17.7194 17.7527" stroke="#15171A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.69227 8.02888C9.28054 8.19942 8.83925 8.2872 8.3936 8.2872C7.49356 8.2872 6.63039 7.92966 5.99396 7.29324C5.35754 6.65681 5 5.79364 5 4.8936C5 3.99356 5.35754 3.13039 5.99396 2.49396C6.63039 1.85754 7.49356 1.5 8.3936 1.5C8.83925 1.5 9.28054 1.58778 9.69227 1.75832C10.104 1.92887 10.4781 2.17884 10.7932 2.49396C11.1084 2.80909 11.3583 3.18319 11.5289 3.59493C11.6994 4.00666 11.7872 4.44795 11.7872 4.8936C11.7872 5.33925 11.6994 5.78054 11.5289 6.19227C11.3583 6.604 11.1084 6.97811 10.7932 7.29324C10.4781 7.60836 10.104 7.85833 9.69227 8.02888Z" stroke="#7E8B99" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 14.2021C2.32181 13.5996 2.7329 13.0421 3.22474 12.5503C4.53749 11.2375 6.31797 10.5 8.17448 10.5C9.09374 10.5 10.004 10.6811 10.8533 11.0328C11.7025 11.3846 12.4742 11.9002 13.1242 12.5503C13.6124 13.0385 14.0248 13.5953 14.349 14.2021" stroke="#7E8B99" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.99023 15.5882C3.27614 15.7351 3.56302 15.8809 3.85088 16.0258C9.15621 18.707 8.89656 18.1847 13.439 18.1847C15.3353 18.1847 16.2995 16.9507 16.8597 15.1433V15.1317L18.2382 10.5309V10.5221C18.3037 10.3065 18.3177 10.0786 18.279 9.85656C18.2404 9.63457 18.1502 9.42474 18.0157 9.24397C17.8812 9.06319 17.7061 8.91651 17.5045 8.81573C17.303 8.71495 17.0806 8.66289 16.8553 8.66372H13.3106C13.0898 8.66311 12.872 8.61238 12.6737 8.51535C12.4753 8.41832 12.3016 8.27752 12.1655 8.10357C12.0303 7.9294 11.9372 7.72635 11.8935 7.51026C11.8497 7.29417 11.8564 7.07089 11.9132 6.85783L12.5506 3.24448C12.6002 3.05767 12.6047 2.86177 12.5639 2.67286C12.5231 2.48395 12.4381 2.30742 12.3158 2.15774C12.195 2.00966 12.0416 1.89149 11.8676 1.81241C11.6936 1.73334 11.5037 1.69551 11.3127 1.70186C11.1217 1.70821 10.9347 1.75858 10.7664 1.84904C10.5981 1.9395 10.4529 2.0676 10.3421 2.22338L6.80769 8.86502C6.67299 9.05274 6.49562 9.20578 6.2902 9.31153C6.08478 9.41729 5.85717 9.47273 5.62613 9.47331H2.99023M2.99063 8.0147V18.2257" stroke="#15171A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 12.3846C2.22409 12.4997 2.44895 12.614 2.67457 12.7276C6.83286 14.829 6.62935 14.4197 10.1897 14.4197C11.676 14.4197 12.4318 13.4525 12.8708 12.0359V12.0267L13.9512 8.42067V8.41381C14.0026 8.24483 14.0136 8.06615 13.9833 7.89215C13.953 7.71815 13.8823 7.55369 13.7769 7.412C13.6714 7.27031 13.5342 7.15535 13.3762 7.07635C13.2183 6.99736 13.044 6.95655 12.8674 6.95721H10.0891C9.91599 6.95673 9.74528 6.91697 9.58981 6.84092C9.43434 6.76486 9.29817 6.65451 9.19155 6.51817C9.08559 6.38165 9.01261 6.2225 8.9783 6.05313C8.94399 5.88376 8.94928 5.70875 8.99375 5.54176L9.49339 2.70964C9.53223 2.56321 9.5358 2.40967 9.5038 2.26161C9.4718 2.11354 9.40515 1.97517 9.30931 1.85785C9.21461 1.74179 9.0944 1.64917 8.95803 1.58719C8.82166 1.52521 8.67282 1.49556 8.52311 1.50054C8.3734 1.50552 8.22686 1.545 8.09491 1.6159C7.96296 1.6868 7.84917 1.78721 7.76239 1.9093L4.9921 7.11499C4.88652 7.26212 4.7475 7.38207 4.58649 7.46496C4.42549 7.54785 4.24709 7.59131 4.066 7.59176H2M2.00031 6.44851V14.4518" stroke="#7E8B99" stroke-width="1.24" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.9988 3.00125C6.77396 2.93073 3.43872 5.85219 1.34189 8.84417C1.1218 9.16093 1 9.57213 1 9.99844C1 10.4248 1.1218 10.836 1.34189 11.1527C3.39312 14.0814 6.71876 17.0703 9.9988 16.9987C13.2788 17.0703 16.6053 14.0814 18.6581 11.1527C18.8782 10.836 19 10.4248 19 9.99844C19 9.57213 18.8782 9.16093 18.6581 8.84417C16.5589 5.85219 13.2236 2.93073 9.9988 3.00125Z" stroke="#15171A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.3709 9.86678V9.86695C12.3708 10.3958 12.2254 10.9088 11.9583 11.3407C11.6915 11.7722 11.3179 12.0997 10.8913 12.2906C10.4655 12.4812 10.0006 12.5299 9.55271 12.4336C9.10429 12.337 8.68434 12.0973 8.34937 11.7351C8.01387 11.3723 7.78 10.9037 7.68482 10.3861C7.58963 9.86845 7.63895 9.3324 7.82467 8.84775C8.01029 8.36335 8.32133 7.95796 8.7104 7.67692C9.09869 7.39645 9.54887 7.25078 10.0042 7.25078L10.0044 7.25078C10.3073 7.25069 10.6088 7.31506 10.8921 7.44189C11.1755 7.5688 11.4367 7.7565 11.6593 7.99716C11.8819 8.23794 12.0611 8.52669 12.1842 8.84818C12.3073 9.16972 12.3711 9.51599 12.3709 9.86678Z" stroke="#15171A" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99941 3.00085C5.36579 2.95282 2.64201 4.94257 0.929604 6.98035C0.749859 7.19609 0.650391 7.47615 0.650391 7.76651C0.650391 8.05686 0.749859 8.33692 0.929604 8.55266C2.60477 10.5474 5.32071 12.583 7.99941 12.5343C10.6781 12.583 13.3947 10.5474 15.0712 8.55266C15.2509 8.33692 15.3504 8.05686 15.3504 7.76651C15.3504 7.47615 15.2509 7.19609 15.0712 6.98035C13.3568 4.94257 10.633 2.95282 7.99941 3.00085Z" stroke="#7E8B99" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.81998 7.7644V7.76455C9.81988 8.17515 9.70696 8.57298 9.50018 8.90738C9.29364 9.24139 9.00506 9.49394 8.67677 9.64087C8.34924 9.78745 7.99207 9.82481 7.64809 9.75077C7.30359 9.67662 6.97996 9.49223 6.72116 9.21237C6.4619 8.932 6.28051 8.56914 6.20665 8.16745C6.13276 7.76566 6.17108 7.34966 6.3151 6.97384C6.45903 6.59825 6.69981 6.28494 6.99982 6.06823C7.29913 5.85203 7.64538 5.74023 7.99495 5.74023L7.99513 5.74023C8.22776 5.74017 8.45944 5.78959 8.67739 5.88717C8.8955 5.98483 9.09699 6.12947 9.26893 6.31542C9.44097 6.50146 9.57975 6.72492 9.67515 6.97416C9.77057 7.22345 9.82012 7.49211 9.81998 7.7644Z" stroke="#7E8B99" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.38466 14.6419L10.7994 17.0456C10.9476 17.1974 11.1328 17.308 11.3368 17.3663C11.5408 17.4245 11.7565 17.4285 11.9625 17.3779C12.1698 17.3297 12.3612 17.229 12.5183 17.0854C12.6755 16.9419 12.793 16.7603 12.8597 16.5582L16.8252 4.67277C16.908 4.45007 16.925 4.20829 16.8744 3.97617C16.8238 3.74406 16.7075 3.53136 16.5395 3.36336C16.3716 3.19537 16.1589 3.07915 15.9267 3.02851C15.6946 2.97787 15.4528 2.99495 15.2301 3.07771L3.34471 7.04321C3.13563 7.11462 2.94942 7.24057 2.80532 7.40804C2.66122 7.57551 2.56445 7.77843 2.52502 7.99582C2.48432 8.19353 2.49338 8.39825 2.55139 8.59159C2.60939 8.78494 2.71452 8.96084 2.85733 9.1035L5.89238 12.1386L5.79269 15.9822L8.38466 14.6419Z" stroke="#15171A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.467 3.32617L5.88867 12.1433" stroke="#15171A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1009 B

View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.81709 11.5299L8.79377 13.4975C8.91505 13.6218 9.06668 13.7123 9.23367 13.76C9.40065 13.8077 9.5772 13.811 9.74584 13.7695C9.91553 13.7301 10.0722 13.6476 10.2009 13.5301C10.3295 13.4126 10.4257 13.264 10.4803 13.0985L13.7264 3.3693C13.7941 3.18701 13.8081 2.98909 13.7667 2.79908C13.7252 2.60907 13.6301 2.43496 13.4926 2.29744C13.355 2.15993 13.1809 2.06479 12.9909 2.02334C12.8009 1.98188 12.603 1.99586 12.4207 2.06361L2.69146 5.30971C2.52032 5.36817 2.36789 5.47127 2.24993 5.60836C2.13197 5.74545 2.05276 5.91155 2.02048 6.0895C1.98717 6.25134 1.99458 6.41893 2.04206 6.57719C2.08954 6.73546 2.1756 6.87945 2.2925 6.99623L4.77695 9.48068L4.69534 12.627L6.81709 11.5299Z" stroke="#7E8B99" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.4327 2.26562L4.77344 9.48321" stroke="#7E8B99" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1004 B