From ac58b335353eb9e78dcc9680180e94c5fa638730 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 4 May 2022 15:19:15 +0200
Subject: [PATCH] shortcuts for zoom and breakpoints menu

---
 app/designer/features/topbar/menu/menu.tsx | 40 ++++++++++++++++++++++
 app/shared/design-system/index.ts          | 11 +-----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/designer/features/topbar/menu/menu.tsx b/app/designer/features/topbar/menu/menu.tsx
index 1a578484bc..bd9271538b 100644
--- a/app/designer/features/topbar/menu/menu.tsx
+++ b/app/designer/features/topbar/menu/menu.tsx
@@ -20,6 +20,9 @@ import {
   TrashIcon,
   ClipboardCopyIcon,
   CopyIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  DevicesIcon,
 } from "~/shared/icons";
 import type { Config } from "~/config";
 import { ShortcutHint } from "./shortcut-hint";
@@ -135,6 +138,43 @@ export const Menu = ({ config, publish }: MenuProps) => {
           <ShortcutHint value={["backspace"]} />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
+        <DropdownMenuItem
+          css={menuItemCss}
+          onSelect={() => {
+            publish({ type: "openBreakpointsMenu" });
+          }}
+        >
+          <DevicesIcon />
+          <Text css={textCss}>Breakpoints</Text>
+          <ShortcutHint value={["cmd", "b"]} />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          css={menuItemCss}
+          onSelect={() => {
+            publish({
+              type: "zoom",
+              payload: "zoomIn",
+            });
+          }}
+        >
+          <ZoomInIcon />
+          <Text css={textCss}>Zoom in</Text>
+          <ShortcutHint value={["cmd", "="]} />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          css={menuItemCss}
+          onSelect={() => {
+            publish({
+              type: "zoom",
+              payload: "zoomOut",
+            });
+          }}
+        >
+          <ZoomOutIcon />
+          <Text css={textCss}>Zoom out</Text>
+          <ShortcutHint value={["cmd", "-"]} />
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem
           css={menuItemCss}
           onSelect={() => {
diff --git a/app/shared/design-system/index.ts b/app/shared/design-system/index.ts
index 88aaa60c32..9461feeae8 100644
--- a/app/shared/design-system/index.ts
+++ b/app/shared/design-system/index.ts
@@ -45,16 +45,7 @@ export {
   PopoverClose,
 } from "./components/popover";
 export { Heading } from "./components/heading";
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuGroup,
-  DropdownMenuTrigger,
-  DropdownMenuArrow,
-  DropdownMenuSeparator,
-} from "./components/dropdown-menu";
+export * from "./components/dropdown-menu";
 export { MenuContent, MenuItem, Menu, MenuAnchor } from "./components/menu";
 export { Paragraph } from "./components/paragraph";
 export { Link } from "./components/link";