feat: Add titles to the diff viewer

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>
   );