From ff4f93f4a5a347a0f8bba7eac878e9af1a35696e Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 6 Oct 2022 22:26:49 +0200
Subject: [PATCH] Updated attribution widget design

refs https://github.com/TryGhost/Team/issues/1986
---
 .../dashboard/charts/attribution.hbs          |  1 +
 .../source-attribution-table.hbs              |  8 +++----
 ghost/admin/app/styles/layouts/dashboard.css  | 21 ++++++++++++++-----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/charts/attribution.hbs b/ghost/admin/app/components/dashboard/charts/attribution.hbs
index 7db80d745a..c330df7d3f 100644
--- a/ghost/admin/app/components/dashboard/charts/attribution.hbs
+++ b/ghost/admin/app/components/dashboard/charts/attribution.hbs
@@ -40,6 +40,7 @@
                         @sources={{this.chartSources}}
                         @sortColumn={{this.selectedSortColumn}}
                     />
+                    <span class="gh-dashboard-attribution-chart-label">{{if (eq this.selectedSortColumn "signups") "Free" "Paid"}}</span>
                 </div>
                 <div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
                     <div class="gh-dashboard-tooltip-value">
diff --git a/ghost/admin/app/components/member-attribution/source-attribution-table.hbs b/ghost/admin/app/components/member-attribution/source-attribution-table.hbs
index b59e9fbc0c..3827952928 100644
--- a/ghost/admin/app/components/member-attribution/source-attribution-table.hbs
+++ b/ghost/admin/app/components/member-attribution/source-attribution-table.hbs
@@ -5,7 +5,7 @@
             <div
                 class="gh-dashboard-list-title {{if (eq @sortColumn "signups") "sorted-by"}}"
             >
-                Free signups
+                Free signups{{svg-jar "arrow-down-fill"}}
             </div>
         {{/if}}
         {{#if (eq @sortColumn "paid")}}
@@ -13,7 +13,7 @@
                 <div
                     class="gh-dashboard-list-title {{if (eq @sortColumn "paid") "sorted-by"}}"
                 >
-                    <span class="hide-when-small">Paid </span>Conversions
+                    <span class="hide-when-small">Paid </span>Conversions{{svg-jar "arrow-down-fill"}}
                 </div>
             {{/if}}
         {{/if}}
@@ -27,7 +27,7 @@
                             </span>
                     </div>
                     {{#if (eq @sortColumn "signups")}}
-                    <div class="gh-dashboard-list-item-sub">
+                    <div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-signup {{if (eq @sortColumn "signups") "sorted-by"}}">
                         {{#if sourceData.signups}}
                             <span class="gh-dashboard-metric-minivalue">
                                 {{format-number sourceData.signups}}
@@ -41,7 +41,7 @@
                     {{/if}}
                     {{#if (eq @sortColumn "paid")}}
                         {{#if this.membersUtils.paidMembersEnabled}}
-                            <div class="gh-dashboard-list-item-sub">
+                            <div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-paid {{if (eq @sortColumn "paid") "sorted-by"}}">
                                 {{#if sourceData.paidConversions}}
                                     <span class="gh-dashboard-metric-minivalue">
                                         {{format-number sourceData.paidConversions}}
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 642f304b6d..b50451a28c 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -1134,10 +1134,9 @@ Dashboard Attribution */
 }
 
 .gh-dashboard-list-title svg {
-    height: 4px;
-    width: 6.11px;
-    margin-left: 2px;
-    margin-top: -2px;
+    width: 9px;
+    margin-left: 4px;
+    margin-top: -3px;
     vertical-align: middle;
     display: none;
 }
@@ -1146,8 +1145,20 @@ Dashboard Attribution */
     display: inline;
 }
 
+.gh-dashboard-attribution-chart-label {
+    position: absolute;
+    top: 45%;
+    left: 44%;
+    font-weight: 600;
+    color: var(--midgrey);
+}
+
 .gh-dashboard-list-title svg path {
-    stroke: var(--midgrey);
+    fill: var(--midlightgrey);
+}
+
+.gh-dashboard-list-item-sub-signup:not(.sorted-by), .gh-dashboard-list-item-sub-paid:not(.sorted-by) {
+    opacity: 0.6;
 }
 
 .gh-dashboard-list-item:first-child .gh-dashboard-list-item-sub-source::after {