Merge pull request #15 from marcop135/epic-elgamal-1d5cd0

feat(ui): bootstrap-icons header + larger monospace editor (v2.8.0)

Author: marcop135

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2pdf",
-  "version": "2.7.6",
+  "version": "2.8.0",
   "description": "Offline Markdown to PDF in the browser. No server, no uploads.",
   "keywords": [
     "markdown",
@@ -27,6 +27,7 @@
     "nonaction": "^0.0.5",
     "normalize.css": "^8.0.1",
     "react": "^19.2.4",
+    "react-bootstrap-icons": "^1.11.6",
     "react-dom": "^19.2.4",
     "react-helmet": "^6.1.0",
     "react-markdown": "^10.1.0",

src/App/Components/Header/Upload.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useProvided } from 'nonaction';
+import { FileEarmarkArrowUpFill } from 'react-bootstrap-icons';
 import { TextContainer } from '../../Container';
 
 export default (props) => {
@@ -56,9 +57,7 @@ export default (props) => {
           cursor: 'pointer',
         }}
       />
-      <span role="img" aria-label="upload">
-        ⬆️
-      </span>
+      <FileEarmarkArrowUpFill size={18} aria-label="Import .md file" />
       <span>Import .md file</span>
     </p>
   );

src/App/Components/Header/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
+import { FileEarmarkPdfFill } from 'react-bootstrap-icons';
 import UploadButton from './Upload.js';
 import { waitForMermaidRenders } from '../Markdown/Previewer/Mermaid.jsx';
 import packageMeta from '../../../../package.json';
@@ -36,10 +37,8 @@ const Header = ({ className }) => {
 
         <div className="menu">
           <UploadButton className="button upload" />
-          <p className="button download" onClick={onTransfrom} tabIndex={0}>
-            <span role="img" aria-label="download">
-              ⬇️
-            </span>
+          <p className="button download primary" onClick={onTransfrom} tabIndex={0}>
+            <FileEarmarkPdfFill size={18} aria-label="Export to PDF" />
             <span>Export to .pdf</span>
           </p>
         </div>
@@ -57,19 +56,28 @@ export default styled(Header)`
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   user-select: none;
-  padding: 0 5px;
-  color: black;
-  background-color: rgb(233, 233, 233);
+  padding: 0 12px;
+  color: #1f2328;
+  background-color: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 48px;
 
   .project {
-    font-weight: bold;
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: 0.2px;
     margin: 5px;
     flex-shrink: 0;
     height: 20px;
 
+    small {
+      margin-left: 4px;
+      color: #6c757d;
+      font-weight: 400;
+    }
+
     @media (max-width: 420px) {
       small {
         display: none;
@@ -85,40 +93,48 @@ export default styled(Header)`
     justify-content: flex-end;
 
     .button {
-      height: 75%;
+      height: 32px;
       min-width: 60px;
       display: flex;
       align-items: center;
       margin-left: 8px;
-      padding: 0 10px;
-      border: 1px solid rgb(53, 123, 253);
-      border-radius: 5px;
+      padding: 0 12px;
+      font-size: 14px;
+      border: 1px solid #d0d7de;
+      border-radius: 6px;
       cursor: pointer;
-      background-color: #cde4fe;
+      background-color: #ffffff;
+      color: #1f2328;
       transition:
-        background-color 0.2s ease,
-        transform 0.2s ease;
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        transform 0.15s ease;
 
       @media (max-width: 600px) {
-        span + span {
+        svg + span {
           display: none;
         }
-        span[role='img'] {
+        svg {
           margin: auto !important;
-          padding: 0 !important;
         }
       }
 
       &:hover {
-        background-color: #eaf4ff;
+        background-color: #f6f8fa;
+        border-color: #afb8c1;
       }
 
       &:active {
         transform: scale(0.97);
       }
 
-      span[role='img'] {
-        margin-right: 5px;
+      &.primary svg {
+        color: rgb(53, 123, 253);
+      }
+
+      svg {
+        margin-right: 6px;
+        flex-shrink: 0;
       }
     }
   }

src/App/Components/Markdown/Editor/MirrorEditor.js

@@ -34,6 +34,13 @@ export default styled(Editor)`
   }
 
   .cm-scroller {
-    line-height: 1.5;
+    line-height: 1.6;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
+      'Liberation Mono', monospace;
+    font-size: 15px;
+  }
+
+  .cm-gutters {
+    font-size: 13px;
   }
 `;

yarn.lock

@@ -4723,6 +4723,13 @@ punycode@^2.1.0, punycode@^2.3.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+react-bootstrap-icons@^1.11.6:
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/react-bootstrap-icons/-/react-bootstrap-icons-1.11.6.tgz#211b58b2f2b32a624c4f5b24b9a4dae8df3d3268"
+  integrity sha512-ycXiyeSyzbS1C4+MlPTYe0riB+UlZ7LV7YZQYqlERV2cxDiKtntI0huHmP/3VVvzPt4tGxqK0K+Y6g7We3U6tQ==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dom@^19.2.4:
   version "19.2.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.4.tgz#6fac6bd96f7db477d966c7ec17c1a2b1ad8e6591"