fix(css): add css for view page as markdown

Author: dineshpinto

src/theme/EditThisPage/index.tsx

@@ -3,6 +3,7 @@ import Translate from "@docusaurus/Translate";
 import { ThemeClassNames } from "@docusaurus/theme-common";
 import Link from "@docusaurus/Link";
 import type { Props } from "@theme/EditThisPage";
+import styles from "./styles.module.css";
 
 function ExternalIcon({ className }: { className?: string }) {
   return (
@@ -29,14 +30,17 @@ function ExternalIcon({ className }: { className?: string }) {
 
 export default function EditThisPage({ editUrl }: Props): ReactNode {
   return (
-    <Link to={editUrl} className={ThemeClassNames.common.editThisPage}>
+    <Link
+      to={editUrl}
+      className={`${ThemeClassNames.common.editThisPage} ${styles.editThisPageLink}`}
+    >
       <Translate
         id="theme.common.editThisPage"
         description="The link label to view the raw source for the current page"
       >
         View page as Markdown
       </Translate>
-      <ExternalIcon />
+      <ExternalIcon className={styles.externalIcon} />
     </Link>
   );
 }

src/theme/EditThisPage/styles.module.css

@@ -0,0 +1,26 @@
+.editThisPageLink,
+.editThisPageLink:visited {
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.editThisPageLink:hover,
+.editThisPageLink:focus-visible {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .editThisPageLink:hover,
+[data-theme="dark"] .editThisPageLink:focus-visible {
+  color: var(--ifm-color-primary-lighter);
+}
+
+.externalIcon {
+  margin-left: 0.3em;
+  vertical-align: text-bottom;
+  stroke: currentColor;
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}