improves: Make command menu larger, darken toolbar, order image + link higher up menu

app/editor/components/CommandMenu.tsx

@@ -614,7 +614,7 @@ export const Wrapper = styled.div<{
   pointer-events: none;
   white-space: nowrap;
   width: 300px;
-  max-height: 224px;
+  max-height: 324px;
   overflow: hidden;
   overflow-y: auto;
 

app/editor/menus/block.ts

@@ -71,6 +71,19 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
     {
       name: "separator",
     },
+    {
+      name: "image",
+      title: dictionary.image,
+      icon: ImageIcon,
+      keywords: "picture photo",
+    },
+    {
+      name: "link",
+      title: dictionary.link,
+      icon: LinkIcon,
+      shortcut: `${metaDisplay} k`,
+      keywords: "link url uri href",
+    },
     {
       name: "table",
       title: dictionary.table,
@@ -104,19 +117,6 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       keywords: "page print break line",
       attrs: { markup: "***" },
     },
-    {
-      name: "image",
-      title: dictionary.image,
-      icon: ImageIcon,
-      keywords: "picture photo",
-    },
-    {
-      name: "link",
-      title: dictionary.link,
-      icon: LinkIcon,
-      shortcut: `${metaDisplay} k`,
-      keywords: "link url uri href",
-    },
     {
       name: "separator",
     },

shared/theme.ts

@@ -149,7 +149,7 @@ export const light = {
   inputBorderFocused: colors.slate,
   listItemHoverBackground: colors.warmGrey,
   toolbarHoverBackground: colors.black,
-  toolbarBackground: colors.lightBlack,
+  toolbarBackground: colors.almostBlack,
   toolbarInput: colors.white10,
   toolbarItem: colors.white,
   tableDivider: colors.smokeDark,