Merge pull request #67 from morrowind-modding/edit-button-css

Update: Improve edit button CSS

Author: MasssiveJuice08

quartz/components/ContentMeta.tsx

@@ -48,14 +48,16 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       return (
         <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
           {segmentsElements} <br/>
-          <a href={`https://github.com/morrowind-modding/wiki/edit/main/${fileRelativePath}`} class={classNames(displayClass, "external")} target={"_blank"} style={"font-weight:400"}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
-            Edit This Page!
-          </a> &nbsp;
-          <a href={`https://github.com/morrowind-modding/wiki/blame/main/${fileRelativePath}`} class={classNames(displayClass, "external")} target={"_blank"} style={"font-weight:400"}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-clock"><circle cx="16" cy="16" r="6"/><path d="M7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2"/><path d="M16 14v2l1 1"/></svg>
-            History
-          </a>
+          <span id="edit-btn-container">
+            <a href={`https://github.com/morrowind-modding/wiki/edit/main/${fileRelativePath}`} class={classNames(displayClass, "external", "edit-btn")} target={"_blank"}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+              Edit page
+            </a> &nbsp;
+            <a href={`https://github.com/morrowind-modding/wiki/blame/main/${fileRelativePath}`} class={classNames(displayClass, "external", "edit-btn")} target={"_blank"}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-clock"><circle cx="16" cy="16" r="6"/><path d="M7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2"/><path d="M16 14v2l1 1"/></svg>
+              View history
+            </a>
+          </span>
         </p>
       )
     } else {

quartz/components/styles/contentMeta.scss

@@ -12,3 +12,14 @@
     }
   }
 }
+
+#edit-btn-container .edit-btn {
+  font-weight: 400;
+  margin-right: 4px;
+}
+#edit-btn-container svg {
+  height: 1.1em;
+  margin: 0 0.1em 0 0;
+  vertical-align: middle;
+ }
+