fix: Icon misalignment in document restore menu

app/components/ContextMenu/MenuItem.tsx

@@ -1,5 +1,6 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
+import { ellipsis } from "polished";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
@@ -76,7 +77,7 @@ const MenuItem = (
             </MenuIconWrapper>
           )}
           {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
-          {children}
+          <Title>{children}</Title>
         </MenuAnchor>
       );
     },
@@ -101,6 +102,10 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
+const Title = styled.div`
+  ${ellipsis()}
+`;
+
 type MenuAnchorProps = {
   level?: number;
   disabled?: boolean;
@@ -129,10 +134,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   white-space: nowrap;
   position: relative;
 
-  svg:not(:last-child) {
-    margin-right: 4px;
-  }
-
   svg {
     flex-shrink: 0;
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
@@ -154,6 +155,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       cursor: var(--pointer);
 
       svg {
+        color: ${props.theme.accentText};
         fill: ${props.theme.accentText};
       }
     }

app/menus/DocumentMenu.tsx

@@ -8,7 +8,7 @@ import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, ellipsis } from "@shared/styles";
+import { s } from "@shared/styles";
 import { UserPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import Document from "~/models/Document";
@@ -16,7 +16,6 @@ import ContextMenu from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Separator from "~/components/ContextMenu/Separator";
 import Template from "~/components/ContextMenu/Template";
-import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import Switch from "~/components/Switch";
 import { actionToMenuItem } from "~/actions";
@@ -146,12 +145,8 @@ function DocumentMenu({
               handleRestore(ev, {
                 collectionId: collection.id,
               }),
-            title: (
+            icon: <CollectionIcon collection={collection} />,
-              <Flex align="center">
+            title: collection.name,
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
           });
         }
 
@@ -383,8 +378,4 @@ const Style = styled.div`
   `};
 `;
 
-const CollectionName = styled.div`
-  ${ellipsis()}
-`;
-
 export default observer(DocumentMenu);

app/menus/NewChildDocumentMenu.tsx

@@ -34,34 +34,30 @@ function NewChildDocumentMenu({ document, label }: Props) {
             {
               type: "route",
               title: (
-                <span>
+                <Trans
-                  <Trans
+                  defaults="New document in <em>{{ collectionName }}</em>"
-                    defaults="New document in <em>{{ collectionName }}</em>"
+                  values={{
-                    values={{
+                    collectionName,
-                      collectionName,
+                  }}
-                    }}
+                  components={{
-                    components={{
+                    em: <strong />,
-                      em: <strong />,
+                  }}
-                    }}
+                />
-                  />
-                </span>
               ),
               to: newDocumentPath(document.collectionId),
             },
             {
               type: "route",
               title: (
-                <span>
+                <Trans
-                  <Trans
+                  defaults="New document in <em>{{ collectionName }}</em>"
-                    defaults="New document in <em>{{ collectionName }}</em>"
+                  values={{
-                    values={{
+                    collectionName: document.title,
-                      collectionName: document.title,
+                  }}
-                    }}
+                  components={{
-                    components={{
+                    em: <strong />,
-                      em: <strong />,
+                  }}
-                    }}
+                />
-                  />
-                </span>
               ),
               to: newDocumentPath(document.collectionId, {
                 parentDocumentId: document.id,

app/menus/NewTemplateMenu.tsx

@@ -3,8 +3,6 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
-import styled from "styled-components";
-import { ellipsis } from "@shared/styles";
 import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import Header from "~/components/ContextMenu/Header";
@@ -39,7 +37,7 @@ function NewTemplateMenu() {
           filtered.push({
             type: "route",
             to: newTemplatePath(collection.id),
-            title: <CollectionName>{collection.name}</CollectionName>,
+            title: collection.name,
             icon: <CollectionIcon collection={collection} />,
           });
         }
@@ -70,8 +68,4 @@ function NewTemplateMenu() {
   );
 }
 
-const CollectionName = styled.div`
-  ${ellipsis()}
-`;
-
 export default observer(NewTemplateMenu);