feat: use markdown and change message

Author: Naturalclar

src/components/common/AppNameWarning.js

@@ -1,17 +1,22 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Alert } from 'antd'
+import Markdown from './Markdown'
 
 const Container = styled.div({
-  width: '100%'
+  width: '100%',
+  marginTop: '16px'
 })
 
 export const AppNameWarning = () => (
   <Container>
     <Alert
-      message="Don't forget: `RnDiffApp` is a placeholder. When upgrading, all
-          instances of `RnDiffApp` should be `YourProjectName`, all `rndiffapp`
-          should be `yourprojectname` etc."
+      message={
+        <Markdown>
+          Keep in mind that `RnDiffApp` and `rndiffapp` are placeholders. When
+          upgrading, you should replace them with your actual project's name.
+        </Markdown>
+      }
       type="info"
       closable
     />

src/components/common/Markdown.js

@@ -19,7 +19,7 @@ const InlineCode = styled.em`
   padding: 0.2em 0.4em;
 `
 
-export default ({ forceBlock, options = {}, ...props }) => (
+export default ({ forceBlock = false, options = {}, ...props }) => (
   <Markdown
     {...props}
     options={{