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 }}>
+        <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}
         />
-        </section>
       </ModalBody>
     </ModalLayout>
   );