From 94dc4a8fc52b61098132ac017a2b0c89101aecdc Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 18 Apr 2023 14:28:21 +0100
Subject: [PATCH] Updated post history sidebar

No ref
---
 .../app/components/modal-post-history.hbs     | 41 ++++++++++++++++---
 .../admin/app/styles/layouts/post-history.css | 35 +++++++++++++++-
 ghost/admin/app/styles/patterns/navlist.css   |  2 +-
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-history.hbs b/ghost/admin/app/components/modal-post-history.hbs
index 900092370c..a21fe723e5 100644
--- a/ghost/admin/app/components/modal-post-history.hbs
+++ b/ghost/admin/app/components/modal-post-history.hbs
@@ -33,31 +33,62 @@
                 <ul class="nav-list">
                     <li class="nav-list-item">
                         <button type="button">
-                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <div class="flex items-center">
+                                <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                                <span class="gh-post-history-version-current">Current</span>
+                                <span class="gh-post-history-version-wordcount">
+                                    <span class="added">+275</span>
+                                    <span class="subtracted">-73</span>
+                                </span>
+                            </div>
                             <span class="gh-post-history-version-meta">Jamie Larson</span>
                         </button>
                     </li>
                     <li class="nav-list-item">
                         <button type="button">
-                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <div class="flex items-center">
+                                <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                                <span class="gh-post-history-version-wordcount">
+                                    <span class="added">+275</span>
+                                    <span class="subtracted">-73</span>
+                                </span>
+                            </div>
                             <span class="gh-post-history-version-meta">Jamie Larson</span>
                         </button>
                     </li>
                     <li class="nav-list-item">
                         <button type="button">
-                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <div class="flex items-center">
+                                <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                                <span class="gh-post-history-version-wordcount">
+                                    <span class="added">+275</span>
+                                    <span class="subtracted">-73</span>
+                                </span>
+                            </div>                            
                             <span class="gh-post-history-version-meta">Jamie Larson</span>
                         </button>
                     </li>
                     <li class="nav-list-item">
                         <button type="button">
-                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <div class="flex items-center">
+                                <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                                <span class="gh-post-history-version-wordcount">
+                                    <span class="added">+275</span>
+                                    <span class="subtracted">-73</span>
+                                </span>
+                            </div>                            
                             <span class="gh-post-history-version-meta">Jamie Larson</span>
                         </button>
                     </li>
                     <li class="nav-list-item">
                         <button type="button">
-                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <div class="flex items-center">
+                                <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                                <span class="gh-post-history-version-wordcount">
+                                    <span class="added">+275</span>
+                                    <span class="subtracted">-73</span>
+                                </span>
+                            </div>                           
                             <span class="gh-post-history-version-meta">Jamie Larson</span>
                         </button>
                     </li>
diff --git a/ghost/admin/app/styles/layouts/post-history.css b/ghost/admin/app/styles/layouts/post-history.css
index 51f8ee5ee1..75e915c0ad 100644
--- a/ghost/admin/app/styles/layouts/post-history.css
+++ b/ghost/admin/app/styles/layouts/post-history.css
@@ -11,11 +11,39 @@
 
 /* Sidebar */
 
+.nav-list-item .gh-post-history-version {
+    margin-bottom: 2px;
+}
+
 .nav-list-item .gh-post-history-version-meta {
     color: var(--midgrey);
     font-weight: 400;
 }
 
+.nav-list-item .gh-post-history-version-current {
+    margin-left: 1rem;
+    padding: 0 4px;
+    background: var(--lightgrey-l2);
+    color: var(--darkgrey);
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: inherit;
+    text-transform: uppercase;
+    letter-spacing: .2px;
+    border-radius: var(--border-radius);
+}
+
+.nav-list-item .gh-post-history-version-wordcount {
+    color: var(--green-d1);
+    margin-left: auto;
+}
+
+.nav-list-item .gh-post-history-version-wordcount .subtracted {
+    color: var(--red-d1);
+    margin-left: .8rem;
+}
+
+
 /* Main content */
 
 .gh-post-history-main {
@@ -30,8 +58,13 @@
     max-width: 740px;
     margin-left: auto;
     margin-right: auto;
+    color: rgba(21, 23, 26, 0.4);
+}
+
+.gh-post-history-main .koenig-lexical p {
+    color: rgba(21, 23, 26, 0.4);
 }
 
 .gh-post-history-main .koenig-lexical del {
     color: var(--red) !important;
-}
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/navlist.css b/ghost/admin/app/styles/patterns/navlist.css
index e33878f114..5aa9ca4b01 100644
--- a/ghost/admin/app/styles/patterns/navlist.css
+++ b/ghost/admin/app/styles/patterns/navlist.css
@@ -14,7 +14,7 @@
 }
 
 .nav-list-item:hover {
-    background: var(--whitegrey-l1);
+    background: var(--whitegrey-l2);
     cursor: pointer;
 }