@brillout/docpress 0.15.13-commit-a35cb87 → 0.15.13-commit-6651c78

package/EditLink.tsx

@@ -5,16 +5,20 @@ import { usePageContext } from './renderer/usePageContext'
 import { iconPencil } from './icons'
 import { getRepoHref } from './components'
 
-function EditLink({ className, style }: { className?: string; style: React.CSSProperties }) {
+function EditLink({
+  className,
+  style,
+  verbose,
+}: { className?: string; style: React.CSSProperties; verbose?: boolean }) {
   const pageContext = usePageContext()
-  const iconSize = 17
+  const iconSize = 13
   const icon = (
     <img
       src={iconPencil}
       width={iconSize}
       height={iconSize}
       style={{
-        marginRight: 9,
+        marginRight: 6,
         position: 'relative',
         top: -1,
       }}
@@ -25,8 +29,26 @@ function EditLink({ className, style }: { className?: string; style: React.CSSPr
   const docsDir = pageContext.globalContext.config.docpress.docsDir ?? 'docs'
   const editLink = getRepoHref(`/${docsDir}/pages${fsPath}`, true)
   return (
-    <a href={editLink} className={className} style={{ display: 'flex', alignItems: 'center', ...style }}>
-      {icon} Edit this page
+    <a
+      href={editLink}
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingTop: 4,
+        paddingBottom: 1,
+        paddingLeft: 8,
+        paddingRight: 8,
+        border: '1px solid #e0e0e0',
+        borderRadius: 7,
+        fontSize: '0.91em',
+        color: '#6c6c6c',
+        background: '#f8f8f8',
+        letterSpacing: 0.4,
+        ...style,
+      }}
+    >
+      {icon} Edit{verbose ? ' this page' : ''}
     </a>
   )
 }

package/Layout.tsx

@@ -161,7 +161,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         {/* globalNote */}
         {pageTitleParsed && !pageContext.resolved.pageDesign?.hideTitle && (
           <div>
-            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 6, padding: 10 }} />
+            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 15 }} />
             <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
           </div>
         )}

package/MenuModal.tsx

@@ -50,7 +50,9 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
             >
               <ExternalLinks style={{ height: 50 }} />
             </div>
-            <EditLink style={{ justifyContent: 'center', padding: 10, marginTop: 0, marginBottom: 13 }} />
+            <Center>
+              <EditLink style={{ justifyContent: 'center', marginTop: 8, marginBottom: 20 }} verbose />
+            </Center>
           </div>
         </div>
         <CloseButton className="show-only-on-mobile" />
@@ -176,3 +178,17 @@ function CloseButton({ className }: { className: string }) {
     </div>
   )
 }
+
+function Center({ style, ...props }: any) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...style,
+      }}
+      {...props}
+    ></div>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-a35cb87",
+  "version": "0.15.13-commit-6651c78",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",