From 15c770e9d01bea0564b65f96a0e75f1085a1db7b Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Fri, 19 Nov 2021 20:39:32 +0100
Subject: [PATCH] feat: Add titles to the diff viewer

---
 admin/src/components/ConfigDiff/index.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/admin/src/components/ConfigDiff/index.js b/admin/src/components/ConfigDiff/index.js
index 6bd0db7..d109ff0 100644
--- a/admin/src/components/ConfigDiff/index.js
+++ b/admin/src/components/ConfigDiff/index.js
@@ -3,6 +3,8 @@ import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 
 import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout';
 import { ButtonText } from '@strapi/design-system/Text';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography } from '@strapi/design-system/Typography';
 
 const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
   if (!isOpen) {
@@ -20,14 +22,20 @@ const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
         </ButtonText>
       </ModalHeader>
       <ModalBody>
-        <section style={{ marginTop: 20 }}>
-          <ReactDiffViewer
-            oldValue={JSON.stringify(oldValue, null, 2)}
-            newValue={JSON.stringify(newValue, null, 2)}
-            splitView
-            compareMethod={DiffMethod.WORDS}
-          />
-        </section>
+        <Grid paddingBottom={4} style={{ textAlign: 'center' }}>
+          <GridItem col={6}>
+            <Typography variant="delta">Sync directory</Typography>
+          </GridItem>
+          <GridItem col={6}>
+            <Typography variant="delta">Database</Typography>
+          </GridItem>
+        </Grid>
+        <ReactDiffViewer
+          oldValue={JSON.stringify(oldValue, null, 2)}
+          newValue={JSON.stringify(newValue, null, 2)}
+          splitView
+          compareMethod={DiffMethod.WORDS}
+        />
       </ModalBody>
     </ModalLayout>
   );