style(PageLinks): improve dark-mode link contrast and tighten top spacing (#8108)

Author: Deven14125

src/components/PageLinks/PageLinks.jsx

@@ -5,11 +5,15 @@ import PropTypes from "prop-types";
 const baseURL = "https://github.com/webpack/webpack.js.org/edit/main/";
 
 function Separator() {
-  return <span className="mx-5 text-black font-bold dark:text-white">·</span>;
+  return (
+    <span className="mx-5 text-gray-500 font-semibold dark:text-gray-300">
+      ·
+    </span>
+  );
 }
 
 const classes =
-  "text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline";
+  "text-gray-500 dark:text-gray-200 text-sm cursor-pointer font-sans hover:underline hover:text-gray-500 dark:hover:text-white transition-colors";
 
 function _handlePrintClick(event) {
   event.preventDefault();
@@ -21,7 +25,7 @@ export default function PageLinks({ page = {} }) {
   const editLink = page.edit || Url.resolve(baseURL, page.path);
 
   return (
-    <div className="print:hidden mt-20">
+    <div className="print:hidden mt-8">
       <a className={classes} href={editLink}>
         Edit this page
       </a>