Fix: show link on light theme

[Shubhamchinda]

@helfi92
Issue

The build issue got fixed after restarting vs-code 😅

Let me know if this is correct!
Thanks as always!

[Shubhamchinda]

@djmitche
Made the changes! :)

[djmitche]

Looks good to me! @helfi92 will be back next week, and will offer his review at that time.

[helfi92]

Planning to review this very soon :)

[Shubhamchinda]

Planning to review this very soon :)

Okay 👍 Thanks!

[helfi92]

What do you think about removing this style all together and do the change in ErrorPanel/index.jsx:

diff --git a/src/components/ErrorPanel/index.jsx b/src/components/ErrorPanel/index.jsx
index c203b88..f77acb5 100644
--- a/src/components/ErrorPanel/index.jsx
+++ b/src/components/ErrorPanel/index.jsx
@@ -15,54 +15,61 @@ import Markdown from '../Markdown';
 import palette from '../../utils/palette';
 
 @withStyles(
-  theme => ({
-    panel: {
-      marginBottom: 3 * theme.spacing.unit,
-    },
-    paper: {
-      padding: `0 ${2 * theme.spacing.unit}px`,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start',
-    },
-    // Make sure the markdown doesn't overflow the panel
-    markdownContent: {
-      minWidth: 0,
-      overflow: 'auto',
-    },
-    pad: {
-      paddingTop: 9,
-      paddingBottom: 9,
-    },
-    error: {
-      backgroundColor: theme.palette.error.dark,
-      borderColor: theme.palette.error.light,
-    },
-    warning: {
-      backgroundColor: palette.warning.dark,
-      borderColor: palette.warning.light,
-      '& svg': {
-        fill: palette.warning.contrastText,
+  theme => {
+    const warning = theme.palette.warning || palette.warning;
+
+    return {
+      panel: {
+        marginBottom: 3 * theme.spacing.unit,
+      },
+      paper: {
+        padding: `0 ${2 * theme.spacing.unit}px`,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+      },
+      // Make sure the markdown doesn't overflow the panel
+      markdownContent: {
+        minWidth: 0,
+        overflow: 'auto',
+      },
+      pad: {
+        paddingTop: 9,
+        paddingBottom: 9,
+      },
+      error: {
+        backgroundColor: theme.palette.error.dark,
+        borderColor: theme.palette.error.light,
+      },
+      warning: {
+        backgroundColor: warning.dark,
+        borderColor: warning.light,
+        '& svg': {
+          fill: warning.contrastText,
+        },
+      },
+      errorText: {
+        color: theme.palette.error.contrastText,
+      },
+      warningText: {
+        color: warning.contrastText,
+        '& code': {
+          color: lighten(warning.contrastText, 0.2),
+          fontWeight: 'bold',
+        },
+        '& a': {
+          color: lighten(warning.contrastText, 0.2),
+        },
+      },
+      disabled: {
+        opacity: 1,
       },
-    },
-    errorText: {
-      color: theme.palette.error.contrastText,
-    },
-    warningText: {
-      color: palette.warning.contrastText,
-      '& code': {
-        color: lighten(palette.warning.contrastText, 0.2),
-        fontWeight: 'bold',
+      heading: {
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
       },
-    },
-    disabled: {
-      opacity: 1,
-    },
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-  }),
+    };
+  },
   { withTheme: true }
 )
 /**
diff --git a/src/components/Markdown/index.jsx b/src/components/Markdown/index.jsx
index c2ba4a2..614eede 100644
--- a/src/components/Markdown/index.jsx
+++ b/src/components/Markdown/index.jsx
@@ -171,10 +171,6 @@ markdown.use(linkAttributes, {
       padding: `${theme.spacing.unit / 2}px ${3 * theme.spacing.unit}px`,
       margin: `${3 * theme.spacing.unit}px 0`,
     },
-    '& a, & a code': {
-      // Style taken from the Link component
-      color: theme.palette.error.contrastText,
-    },
     '& img': {
       maxWidth: '100%',
     },

The main change is adding const warning = theme.palette.warning || palette.warning; and then substituting it wherever we use warning.

[Shubhamchinda]

Okay @helfi92 , I tested the changes and it's working but one thing I want to ask why here ? when it was working in src/components/Markdown/index.jsx ?

Is it because so we can apply these changes to any anchor tag not just limited to anchor tag in MarkDownTextArea ? Am I understanding it correct?

Thanks! :)

[helfi92]

I want to ask why here ?

I'm not sure I understand the question. Why here what? :)

[Shubhamchinda]

I'm not sure I understand the question. Why here what?

I mean the previous changes were working too, but why we made the changes in src/components/ErrorPanel/index.jsx.

Is it because so we can apply these changes to any anchor tag not just limited to anchor tag in MarkDownTextArea ? Am I understanding it correct?

But I think I got it now!

[helfi92]

Ah, yes, correct!

[Shubhamchinda]

Thanks a lot @helfi92 , I appreciate it! :)

[helfi92]

@Shubhamchinda Did you have some time to look at #49 (comment)? :-)

[Shubhamchinda]

@Shubhamchinda Did you have some time to look at #49 (comment)? :-)

Hey @helfi92 , I had been busy in college. I'll take a look right now! :)

[helfi92]

💯 Thank you so much!

[helfi92]

🎉 This PR is included in version 2.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀