From 1b81aa0e8ba732f464d3b74973eee38d6788a0c6 Mon Sep 17 00:00:00 2001
From: Raissa North <raissa@silverstripe.com>
Date: Mon, 23 Jul 2018 16:11:03 +1200
Subject: [PATCH 1/3] Add colours to dels and ins

---
 .../HistoryViewer/HistoryViewer.scss          | 21 +++++++++++++++++++
 src/Forms/DiffTransformation.php              |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss
index 19fd0919..c043d641 100644
--- a/client/src/components/HistoryViewer/HistoryViewer.scss
+++ b/client/src/components/HistoryViewer/HistoryViewer.scss
@@ -171,6 +171,27 @@
   }
 }
 
+.history-viewer__version-detail-diff {
+
+  del, ins {
+    border-radius: .192 rem;
+    padding: .192 rem;
+  }
+  del {
+    background-color: $red;
+    color: white;
+    border-radius: .192rem;
+    padding: .192rem;
+  }
+
+  ins {
+    background-color: $green;
+    color: white;
+    border-radius: .192 rem;
+    padding: .192 rem;
+  }
+}
+
 // Hide preview on small devices. @todo replace this with a view toggle component
 @include media-breakpoint-down(md) {
   .history-viewer__preview {
diff --git a/src/Forms/DiffTransformation.php b/src/Forms/DiffTransformation.php
index 560efe3b..47a27891 100644
--- a/src/Forms/DiffTransformation.php
+++ b/src/Forms/DiffTransformation.php
@@ -110,7 +110,7 @@ public function transform(FormField $field)
                 Diff::compareHTML($field->Value(), isset($this->data[$name]) ? $this->data[$name] : '')
             );
 
-            $diffField->addExtraClass($field->extraClass());
+            $diffField->addExtraClass($field->extraClass() . "history-viewer__version-detail-diff");
             $diffField->setDescription($field->getDescription());
 
             return $diffField;

From 390315fc80610074ff8913bfa4fa54bcac8d1df0 Mon Sep 17 00:00:00 2001
From: Raissa North <raissa@silverstripe.com>
Date: Mon, 23 Jul 2018 16:24:59 +1200
Subject: [PATCH 2/3] Changes as requested

---
 client/src/components/HistoryViewer/HistoryViewer.scss | 1 +
 src/Forms/DiffTransformation.php                       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss
index c043d641..576c0db1 100644
--- a/client/src/components/HistoryViewer/HistoryViewer.scss
+++ b/client/src/components/HistoryViewer/HistoryViewer.scss
@@ -177,6 +177,7 @@
     border-radius: .192 rem;
     padding: .192 rem;
   }
+
   del {
     background-color: $red;
     color: white;
diff --git a/src/Forms/DiffTransformation.php b/src/Forms/DiffTransformation.php
index 47a27891..01c6a7c1 100644
--- a/src/Forms/DiffTransformation.php
+++ b/src/Forms/DiffTransformation.php
@@ -110,7 +110,7 @@ public function transform(FormField $field)
                 Diff::compareHTML($field->Value(), isset($this->data[$name]) ? $this->data[$name] : '')
             );
 
-            $diffField->addExtraClass($field->extraClass() . "history-viewer__version-detail-diff");
+            $diffField->addExtraClass($field->extraClass() . " history-viewer__version-detail-diff");
             $diffField->setDescription($field->getDescription());
 
             return $diffField;

From e2722214f4759ca077e5a113bd9eb9eb65eea4db Mon Sep 17 00:00:00 2001
From: Raissa North <raissa@silverstripe.com>
Date: Mon, 23 Jul 2018 17:03:18 +1200
Subject: [PATCH 3/3] Change styling for consistent look

---
 .../HistoryViewer/HistoryViewer.scss           | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss
index 576c0db1..fa15721d 100644
--- a/client/src/components/HistoryViewer/HistoryViewer.scss
+++ b/client/src/components/HistoryViewer/HistoryViewer.scss
@@ -167,29 +167,17 @@
     .form-check-label {
       text-transform: none;
     }
-
   }
 }
 
 .history-viewer__version-detail-diff {
-
-  del, ins {
-    border-radius: .192 rem;
-    padding: .192 rem;
-  }
-
   del {
-    background-color: $red;
-    color: white;
-    border-radius: .192rem;
-    padding: .192rem;
+    color: #f44;
   }
 
   ins {
-    background-color: $green;
-    color: white;
-    border-radius: .192 rem;
-    padding: .192 rem;
+    background-color: #dfd;
+    text-decoration: none;
   }
 }