From b9c7fe316bbd6a721d7ac2b69fef0020866e6c13 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 26 Sep 2022 12:14:06 +0200
Subject: [PATCH] Updated attribution widget design

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

diff --git a/ghost/admin/app/components/dashboard/charts/attribution.hbs b/ghost/admin/app/components/dashboard/charts/attribution.hbs
index c35192f44d..59f5aab4bb 100644
--- a/ghost/admin/app/components/dashboard/charts/attribution.hbs
+++ b/ghost/admin/app/components/dashboard/charts/attribution.hbs
@@ -1,21 +1,21 @@
 <section class="gh-dashboard-section gh-dashboard-attribution">
 
     <article class="gh-dashboard-box" {{did-insert this.loadData}}>
-        <div style="display: grid;grid-template-columns: 1fr 2fr;grid-gap: 24px;">
+        <div style="display: grid;grid-template-columns: 2fr 1fr;grid-gap: 24px; position: relative;">
             <div>
                 <h3 class="gh-dashboard-metric-label">Attribution</h3>
-                <div style="display:flex;justify-content:center;align-items: center;height:100%;">
-                    <div style="max-width: 200px; position: relative;">
-                        <MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
-                    </div>
-                    <div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
-                        <div class="gh-dashboard-tooltip-value">
-                            -
-                        </div>
+                <MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-attribution-list gh-dashboard-list" style="justify-content:flex-start;" />
+            </div>
+            <div style="display:flex;justify-content:center;align-items: center;height:100%;position: relative;">
+                <div style="max-width: 200px; position: relative;">
+                    <MemberAttribution::SourceAttributionChart @sources={{this.chartSources}} />
+                </div>
+                <div id="gh-dashboard-attribution-tooltip" class="gh-dashboard-tooltip">
+                    <div class="gh-dashboard-tooltip-value">
+                        -
                     </div>
                 </div>
             </div>
-            <MemberAttribution::SourceAttributionTable @sources={{this.sources}} class="gh-dashboard-attribution-list gh-dashboard-list" style="justify-content:flex-start;" />
         </div>
     </article>
 </section>
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 1ba2ad71f8..aea28f1ca5 100644
--- a/ghost/admin/app/components/member-attribution/source-attribution-table.hbs
+++ b/ghost/admin/app/components/member-attribution/source-attribution-table.hbs
@@ -1,13 +1,12 @@
 <div ...attributes>
     <div class="gh-dashboard-list-header">
-        <div class="gh-dashboard-list-title">Sources</div>
+        <div class="gh-dashboard-list-title gh-dashboard-list-title-sources">Sources</div>
         <div class="gh-dashboard-list-title">Signups</div>
         {{#if this.membersUtils.paidMembersEnabled}}
             <div class="gh-dashboard-list-title"><span class="hide-when-small">Paid </span>Conversions</div>
         {{/if}}
     </div>
-    <div class="gh-dashboard-list-body" style="max-height: 230px; overflow-y: clip; justify-content: flex-start;">
-        <div class="gh-dashboard-attribution-list-scrollable">
+    <div class="gh-dashboard-list-body">
             {{#each this.sources as |sourceData|}}
                 <div class="gh-dashboard-list-item">
                     <div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-source">
@@ -44,7 +43,7 @@
                     {{on "click" this.openAllSources}}
                 >
                     <div class="gh-dashboard-list-item-sub gh-dashboard-list-item-sub-source gh-dsahboard-list-item-other-source">
-                        <span class="gh-dashboard-list-text">Other</span>
+                        <span class="gh-dashboard-list-text">Other sources →</span>
                     </div>
                     <div class="gh-dashboard-list-item-sub">
                         <span class="gh-dashboard-metric-minivalue">
@@ -68,6 +67,5 @@
                     {{/if}}
                 </div>
             {{/if}}
-        </div>
     </div>
 </div>
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index daba5b2b81..bd107a3633 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -1024,6 +1024,19 @@ Dashboard Zero */
 /* ---------------------------------
 Dashboard Attribution */
 
+.gh-dashboard-attribution-list {
+    margin-top: -20px;
+}
+
+.gh-dashboard-attribution-list .gh-dashboard-list-body {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.gh-dashboard-attribution .gh-dashboard-list-title-sources {
+    opacity: 0;
+}
+
 .gh-dashboard-list-item-sub-source {
     padding-left: 20px;
     position: relative;
@@ -1041,8 +1054,8 @@ Dashboard Attribution */
     background: #E6E9EB;
 }
 
-.gh-dsahboard-list-item-other-source {
-    text-decoration: underline;
+.gh-dsahboard-list-item-other-source span {
+    color: var(--green);
     cursor: pointer;
 }
 
@@ -1070,34 +1083,6 @@ Dashboard Attribution */
     position: relative;
 }
 
-.gh-dashboard-attribution-list-scrollable {
-    overflow-y: auto;
-    padding-top: 6px;
-    padding-bottom: 6px;
-}
-
-.gh-dashboard-attribution-list .gh-dashboard-list-body:after {
-    content: " ";
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 24px;
-    bottom: 0;
-    background: linear-gradient(180deg,#ffffff00,hsl(0deg 0% 100%) 100%);
-    z-index: 1;
-}
-
-.gh-dashboard-attribution-list .gh-dashboard-list-body:before {
-    content: " ";
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 24px;
-    top: 0;
-    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
-    z-index: 1;
-}
-
 /* ---------------------------------
 Dashboard Engagement */