chore: UI refactor

docs/public/icons/icon-open-source.svg

@@ -1,11 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  height="24px"
-  viewBox="0 -960 960 960"
-  width="24px"
-  fill="currentColor"
->
-  <path
-    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
-  />
-</svg>

docs/public/icons/open-source.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
+  />
+</svg>

packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue

@@ -21,9 +21,9 @@ const editorColumns: EditorColumn[] = [
     redirectUrl:
       'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
     features: [
-      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
+      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
     ],
   },
   {
@@ -33,17 +33,17 @@ const editorColumns: EditorColumn[] = [
       'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart',
     highlighted: true,
     features: [
-      { iconUrl: '/icons/icon-folder.svg', featureName: 'Storage' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-ai-diagram.svg', featureName: 'AI diagram generator' },
-      { iconUrl: '/icons/icon-whiteboard.svg', featureName: 'Whiteboard' },
-      { iconUrl: '/icons/icon-group.svg', featureName: 'Teams' },
-      { iconUrl: '/icons/icon-groups.svg', featureName: 'Multi-user editing' },
-      { iconUrl: '/icons/icon-ai-repair.svg', featureName: 'AI diagram repair' },
-      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
-      { iconUrl: '/icons/icon-comment.svg', featureName: 'Comments' },
-      { iconUrl: '/icons/icon-presentation.svg', featureName: 'Presentations' },
-      { iconUrl: '/icons/icon-plugins.svg', featureName: 'Advanced Plugins' },
+      { iconUrl: '/icons/folder.svg', featureName: 'Storage' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/ai-diagram.svg', featureName: 'AI diagram generator' },
+      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
+      { iconUrl: '/icons/group.svg', featureName: 'Teams' },
+      { iconUrl: '/icons/groups.svg', featureName: 'Multi-user editing' },
+      { iconUrl: '/icons/ai-repair.svg', featureName: 'AI diagram repair' },
+      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
+      { iconUrl: '/icons/comment.svg', featureName: 'Comments' },
+      { iconUrl: '/icons/presentation.svg', featureName: 'Presentations' },
+      { iconUrl: '/icons/plugins.svg', featureName: 'Advanced Plugins' },
     ],
   },
   {
@@ -51,10 +51,10 @@ const editorColumns: EditorColumn[] = [
     description: 'Code only, no login',
     redirectUrl: 'https://mermaid.live/edit',
     features: [
-      { iconUrl: '/icons/icon-public.svg', featureName: 'Diagram stored in URL' },
-      { iconUrl: '/icons/icon-terminal.svg', featureName: 'Code editor' },
-      { iconUrl: '/icons/icon-open-source.svg', featureName: 'Open source' },
-      { iconUrl: '/icons/icon-version-history.svg', featureName: 'Version history' },
+      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
+      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
+      { iconUrl: '/icons/open-source.svg', featureName: 'Open source' },
+      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
     ],
   },
 ];
@@ -84,13 +84,13 @@ onUnmounted(() => {
 <template>
   <div
     v-if="isVisible"
-    class="fixed top-0 left-0 z-20 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
+    class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
     @click.self="isVisible = false"
   >
-    <div class="flex flex-row rounded-xl relative top-[8%] gap-5 p-6 bg-[#F1F8FA]">
+    <div class="flex flex-row rounded-xl relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
       <div
         v-for="column in editorColumns"
-        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 mb-6 mt-16 text-gray-800 shadow-sm"
+        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow-sm"
         :class="column.highlighted ? 'bg-white rounded-b-3xl' : 'bg-[#DCEEF1] rounded-3xl'"
       >
         <div

packages/mermaid/src/docs/public/icons/icon-open-source.svg

@@ -1,11 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  height="24px"
-  viewBox="0 -960 960 960"
-  width="24px"
-  fill="currentColor"
->
-  <path
-    d="M80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18q30 0 58.5 3t55.5 9l-70 70q-11-2-21.5-2H400q-71 0-127.5 17T180-306q-9 5-14.5 14t-5.5 20v32h250l80 80H80Zm542 16L484-282l56-56 82 82 202-202 56 56-258 258ZM400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm10 240Zm-10-320q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Z"
-  />
-</svg>

packages/mermaid/src/docs/public/icons/open-source.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
+  />
+</svg>