Add Decoration to DiffView

This fixes #101

Author: KevinHu2014

src/components/common/Diff/Diff.js

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Diff as RDiff, Hunk, markEdits, tokenize } from 'react-diff-view'
+import {
+  Diff as RDiff,
+  Hunk,
+  markEdits,
+  tokenize,
+  Decoration as DiffDecoration
+} from 'react-diff-view'
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
 
@@ -11,6 +17,17 @@ const Container = styled.div`
   margin-top: 16px;
 `
 
+const More = styled.div`
+  background-color: #f1f8ff;
+  margin-left: 30px;
+  padding-left: 4px;
+  color: '#1b1f23b3';
+`
+
+const Decoration = styled(DiffDecoration)`
+  background-color: #dbedff;
+`
+
 const DiffView = styled(RDiff)`
   .diff-gutter-col {
     width: 30px;
@@ -122,14 +139,17 @@ const Diff = ({
 
             const tokens = tokenize(hunks, options)
 
-            return hunks.map(hunk => (
+            return hunks.map(hunk => [
+              <Decoration key={'decoration-' + hunk.content}>
+                <More>{hunk.content}</More>
+              </Decoration>,
               <Hunk
                 key={hunk.content}
                 hunk={hunk}
                 tokens={tokens}
                 gutterEvents={{ onClick: onToggleChangeSelection }}
               />
-            ))
+            ])
           }}
         </DiffView>
       )}