Fix links color in embedded Markdown text

newIDE/app/src/ExtensionsSearch/ExtensionInstallDialog.js

@@ -11,7 +11,6 @@ import {
 import LeftLoader from '../UI/LeftLoader';
 import PlaceholderLoader from '../UI/PlaceholderLoader';
 import PlaceholderError from '../UI/PlaceholderError';
-import ThemeConsumer from '../UI/Theme/ThemeConsumer';
 import { MarkdownText } from '../UI/MarkdownText';
 import Text from '../UI/Text';
 
@@ -66,62 +65,54 @@ export default class ExtensionInstallDialog extends Component<Props, State> {
     const { extensionHeader, error } = this.state;
 
     return (
-      <ThemeConsumer>
-        {muiTheme => (
-          <Dialog
-            title={
-              extensionHeader
-                ? extensionHeader.fullName
-                : extensionShortHeader.fullName
-            }
-            actions={[
-              <FlatButton
-                key="close"
-                label={<Trans>Back</Trans>}
-                primary={false}
-                onClick={onClose}
-                disabled={isInstalling}
-              />,
-              <LeftLoader isLoading={isInstalling}>
-                <FlatButton
-                  key="install"
-                  label={
-                    alreadyInstalled ? (
-                      <Trans>Re-install/update</Trans>
-                    ) : (
-                      <Trans>Install in project</Trans>
-                    )
-                  }
-                  primary
-                  onClick={onInstall}
-                  disabled={isInstalling}
-                />
-              </LeftLoader>,
-            ]}
-            open
-            onRequestClose={onClose}
-          >
-            {!extensionHeader ? (
-              <Text>{extensionShortHeader.shortDescription}</Text>
-            ) : (
-              <MarkdownText
-                source={extensionHeader.description}
-                className={muiTheme.markdownRootClassName}
-                useParagraphs
-              />
-            )}
-            {!extensionHeader && !error && <PlaceholderLoader />}
-            {!extensionHeader && error && (
-              <PlaceholderError onRetry={this._loadExtensionheader}>
-                <Trans>
-                  Can't load the extension registry. Verify your internet
-                  connection or try again later.
-                </Trans>
-              </PlaceholderError>
-            )}
-          </Dialog>
+      <Dialog
+        title={
+          extensionHeader
+            ? extensionHeader.fullName
+            : extensionShortHeader.fullName
+        }
+        actions={[
+          <FlatButton
+            key="close"
+            label={<Trans>Back</Trans>}
+            primary={false}
+            onClick={onClose}
+            disabled={isInstalling}
+          />,
+          <LeftLoader isLoading={isInstalling}>
+            <FlatButton
+              key="install"
+              label={
+                alreadyInstalled ? (
+                  <Trans>Re-install/update</Trans>
+                ) : (
+                  <Trans>Install in project</Trans>
+                )
+              }
+              primary
+              onClick={onInstall}
+              disabled={isInstalling}
+            />
+          </LeftLoader>,
+        ]}
+        open
+        onRequestClose={onClose}
+      >
+        {!extensionHeader ? (
+          <Text>{extensionShortHeader.shortDescription}</Text>
+        ) : (
+          <MarkdownText source={extensionHeader.description} isStandaloneText />
         )}
-      </ThemeConsumer>
+        {!extensionHeader && !error && <PlaceholderLoader />}
+        {!extensionHeader && error && (
+          <PlaceholderError onRetry={this._loadExtensionheader}>
+            <Trans>
+              Can't load the extension registry. Verify your internet connection
+              or try again later.
+            </Trans>
+          </PlaceholderError>
+        )}
+      </Dialog>
     );
   }
 }

newIDE/app/src/MainFrame/Changelog/ChangelogRenderer.js

@@ -13,7 +13,6 @@ import { Column, Line } from '../../UI/Grid';
 import Window from '../../Utils/Window';
 import { hasBreakingChange } from '../../Utils/GDevelopServices/Release';
 import AlertMessage from '../../UI/AlertMessage';
-import ThemeConsumer from '../../UI/Theme/ThemeConsumer';
 import FlatButton from '../../UI/FlatButton';
 import RaisedButton from '../../UI/RaisedButton';
 
@@ -69,41 +68,36 @@ const ChangelogRenderer = ({ releases, error, currentReleaseName }: Props) => {
     !!currentRelease && hasBreakingChange(currentRelease);
 
   return (
-    <ThemeConsumer>
-      {muiTheme => (
-        <Column>
-          {currentVersionHasBreakingChange && (
-            <AlertMessage kind="warning">
-              This version of GDevelop has a breaking change. Please make sure
-              to read the changes below to understand if any change or
-              adaptation must be made to your project.
-            </AlertMessage>
-          )}
-          {releases.map(release =>
-            release.name ? (
-              <MarkdownText
-                key={release.name}
-                source={
-                  '# Version ' +
-                  release.name +
-                  '\n---\n' +
-                  (release.description ||
-                    'Changes and new features description will be available soon.')
-                }
-                className={muiTheme.markdownRootClassName}
-                useParagraphs
-              />
-            ) : null
-          )}
-          <Line justifyContent="center">
-            <FlatButton
-              label={<Trans>See all the releases notes</Trans>}
-              onClick={openReleaseNote}
-            />
-          </Line>
-        </Column>
+    <Column>
+      {currentVersionHasBreakingChange && (
+        <AlertMessage kind="warning">
+          This version of GDevelop has a breaking change. Please make sure to
+          read the changes below to understand if any change or adaptation must
+          be made to your project.
+        </AlertMessage>
       )}
-    </ThemeConsumer>
+      {releases.map(release =>
+        release.name ? (
+          <MarkdownText
+            key={release.name}
+            source={
+              '# Version ' +
+              release.name +
+              '\n---\n' +
+              (release.description ||
+                'Changes and new features description will be available soon.')
+            }
+            isStandaloneText
+          />
+        ) : null
+      )}
+      <Line justifyContent="center">
+        <FlatButton
+          label={<Trans>See all the releases notes</Trans>}
+          onClick={openReleaseNote}
+        />
+      </Line>
+    </Column>
   );
 };
 

newIDE/app/src/UI/MarkdownText.js

@@ -1,9 +1,11 @@
 // @flow
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
+import ThemeContext from './Theme/ThemeContext';
+import classNames from 'classnames';
 
 // Sensible defaults for react-markdown
-const makeMarkdownCustomRenderers = (useParagraphs: boolean) => ({
+const makeMarkdownCustomRenderers = (isStandaloneText: boolean) => ({
   // Ensure link are opened in a new page
   link: props => (
     <a href={props.href} target="_blank" rel="noopener noreferrer">
@@ -12,29 +14,32 @@ const makeMarkdownCustomRenderers = (useParagraphs: boolean) => ({
   ),
   // Add paragraphs only if we explictly opt in.
   paragraph: props =>
-    useParagraphs ? <p>{props.children}</p> : props.children,
+    isStandaloneText ? <p>{props.children}</p> : props.children,
 });
 
 type Props = {|
   source: string,
-  className?: ?string,
-  useParagraphs?: boolean,
+  isStandaloneText?: boolean,
 |};
 
 /**
  * Display a markdown text
  */
 export const MarkdownText = (props: Props) => {
+  const gdevelopTheme = React.useContext(ThemeContext);
   const markdownCustomRenderers = React.useMemo(
-    () => makeMarkdownCustomRenderers(props.useParagraphs || false),
-    [props.useParagraphs]
+    () => makeMarkdownCustomRenderers(props.isStandaloneText || false),
+    [props.isStandaloneText]
   );
 
   return (
     <ReactMarkdown
       escapeHtml
       source={props.source}
-      className={props.className}
+      className={classNames({
+        [gdevelopTheme.markdownRootClassName]: true,
+        'standalone-text-container': props.isStandaloneText,
+      })}
       renderers={markdownCustomRenderers}
     />
   );

newIDE/app/src/UI/Theme/DarkTheme/Markdown.css

@@ -6,6 +6,8 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+.gd-markdown-dark-theme.standalone-text-container {
   font-size: 16px;
   line-height: 1.3;
 }
@@ -30,6 +32,7 @@
 
 .gd-markdown-dark-theme a {
   color: rgb(221, 221, 221);
+  cursor: pointer;
 }
 
 .gd-markdown-dark-theme img {

newIDE/app/src/UI/Theme/DefaultTheme/Markdown.css

@@ -6,6 +6,8 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+.gd-markdown-default-theme.standalone-text-container {
   font-size: 16px;
   line-height: 1.3;
 }
@@ -30,6 +32,7 @@
 
 .gd-markdown-default-theme a {
   color: rgb(74, 176, 228);
+  cursor: pointer;
 }
 
 .gd-markdown-default-theme img {