design tweaks

src/components/MermaidToExcalidraw.scss

@@ -9,6 +9,8 @@
       font-size: 14px;
       font-style: normal;
       font-weight: 600;
+      margin-bottom: 8px;
+      margin-left: 4px;
     }
 
     &-text {
@@ -19,7 +21,6 @@
         width: 20rem;
         height: 22rem;
         resize: none;
-        border: 1px solid var(--ImageExportModal-preview-border);
         border-radius: 8px;
         padding: 1rem;
       }
@@ -35,16 +36,18 @@
       height: 22rem;
       background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
         left center;
-
-      border: 1px solid var(--ImageExportModal-preview-border);
       border-radius: 8px;
+      border: 1px solid #e4e4eb;
     }
 
     &-preview-insert.excalidraw-button {
+      font-family: "Assistant";
+      font-weight: 600;
       height: 2.5rem;
       margin-top: 1em;
       margin-bottom: 0.3em;
-      width: 5rem;
+      width: 7.5rem;
+      font-size: 12px;
       background-color: var(--color-primary);
       &:hover {
         background-color: var(--color-primary-darker);

src/components/MermaidToExcalidraw.tsx

@@ -13,6 +13,7 @@ import {
 } from "../packages/excalidraw/index";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { canvasToBlob } from "../data/blob";
+import { ArrowRightIcon } from "./icons";
 
 const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
 
@@ -77,6 +78,20 @@ const MermaidToExcalidraw = ({
 
   const app = useApp();
 
+  const resetPreview = () => {
+    const canvasNode = canvasRef.current;
+
+    if (!canvasNode) {
+      return;
+    }
+    const parent = canvasNode.parentElement;
+    if (!parent) {
+      return;
+    }
+    parent.style.background = "";
+    canvasNode.replaceChildren();
+  };
+
   useEffect(() => {
     const loadMermaidToExcalidrawLib = async () => {
       mermaidToExcalidrawLib.current = await import(
@@ -113,8 +128,10 @@ const MermaidToExcalidraw = ({
         setError(null);
       } catch (e: any) {
         console.error(e.message);
-        canvasNode.replaceChildren();
+        resetPreview();
-        setError(e.message);
+        if (text) {
+          setError(e.message);
+        }
       }
       if (mermaidGraphData) {
         const { elements, files } =
@@ -143,6 +160,7 @@ const MermaidToExcalidraw = ({
           // if converting to blob fails, there's some problem that will
           // likely prevent preview and export (e.g. canvas too big)
           return canvasToBlob(canvas).then(() => {
+            parent.style.background = "#fff";
             canvasNode.replaceChildren(canvas);
           });
         });
@@ -195,7 +213,8 @@ const MermaidToExcalidraw = ({
             style={{
               padding: "0.85rem",
               borderRadius: "8px",
-              border: "1px solid var(--ImageExportModal-preview-border)",
+              border: "1px solid #e4e4eb",
+              whiteSpace: "pre-wrap",
             }}
             onChange={(event) => setText(event.target.value)}
             value={text}
@@ -214,7 +233,10 @@ const MermaidToExcalidraw = ({
             className="mermaid-to-excalidraw-wrapper-preview-insert"
             onSelect={onSelect}
           >
-            Insert
+            Insert{" "}
+            <span style={{ paddingLeft: "8px", display: "flex" }}>
+              {ArrowRightIcon}
+            </span>
           </Button>
         </div>
       </div>

src/components/icons.tsx

@@ -1662,3 +1662,30 @@ export const mermaidLogoIcon = createIcon(
     d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z"
   />,
 );
+
+export const ArrowRightIcon = createIcon(
+  <>
+    <path
+      d="M4.16602 10H15.8327"
+      stroke="white"
+      stroke-width="1.25"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.5 13.3333L15.8333 10"
+      stroke="white"
+      stroke-width="1.25"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.5 6.66666L15.8333 9.99999"
+      stroke="white"
+      stroke-width="1.25"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </>,
+  { width: 20, height: 20 },
+);