From e9afcb3bc872667a7a551f7975e1a365fa99dd83 Mon Sep 17 00:00:00 2001
From: Paul Hayes <fofr@users.noreply.github.com>
Date: Tue, 23 Dec 2014 15:03:58 +0000
Subject: [PATCH] Improve legibility of diff views

New lines were displaying as thin strips. Spaces between lines made
making comparisons more difficult. The +/- signs were hard to read
against grey text.

* Give each line in the diff a minimum height, making new lines display
thicker and maintaining a vertical rhythm
* Remove space between lines, the content naturally provides this
spacing
* Extend red/green highlight to edges of the view
* Use darker red and green colours for the +/- icons

Based on https://github.com/alphagov/publisher/pull/335
---
 app/assets/stylesheets/diff.scss | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/diff.scss b/app/assets/stylesheets/diff.scss
index 94afeec14..2a6807fdf 100644
--- a/app/assets/stylesheets/diff.scss
+++ b/app/assets/stylesheets/diff.scss
@@ -1,6 +1,6 @@
 /* ==========================================================================
-   Diff of two editions
-   ========================================================================== */
+Diff of two editions
+========================================================================== */
 
 $added-color: #dfd;
 $strong-added-color: #77f177;
@@ -10,16 +10,19 @@ $strong-removed-color: #faa;
 .diff {
   border: 1px solid $gray-lighter;
   border-left: 40px solid $gray-lighter;
+  border-radius: 3px;
   padding: 15px;
 
   ul {
     padding-left: 0;
 
     li {
-      padding: 5px 2px;
-      margin-bottom: 1em;
+      min-height: 24px;
+      margin: 0 -15px;
+      padding: 0 15px;
       word-wrap: break-word;
       list-style: none;
+      position: relative;
 
       del,
       ins {
@@ -27,6 +30,11 @@ $strong-removed-color: #faa;
       }
     }
 
+    li.del,
+    li.ins {
+      padding-top: 2px;
+    }
+
     li.del {
       background-color: $removed-color;
 
@@ -48,21 +56,24 @@ $strong-removed-color: #faa;
     li.del:before,
     li.ins:before {
       position: absolute;
-      font-size: 26px;
       font-weight: bold;
-      margin-left: -57px;
-      margin-top: -11px;
+      margin-left: -55px;
       width: 40px;
       text-align: center;
+      min-height: 24px;
+      top: 0;
+      bottom: 0;
     }
 
     li.del:before {
-      color: $strong-removed-color;
+      color: $state-danger-text;
+      background-color: $removed-color;
       content: "-";
     }
 
     li.ins:before {
-      color: $strong-added-color;
+      color: $state-success-text;
+      background-color: $added-color;
       content: "+";
     }
   }