Improve style menu (#361)

* Change undo / redo icons, add undo/redo buttons, add Styles label

* Update TopPanel.tsx

* Fix breakpoints

packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx

@@ -141,6 +141,7 @@ export const StyledToolButton = styled('button', {
         [`& ${StyledToolButtonInner}`]: {
           fontSize: '$1',
           padding: '0 $3',
+          gap: '$3',
         },
       },
       circle: {

packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx

@@ -2,17 +2,8 @@ import * as React from 'react'
 
 export function RedoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
-    <svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.5 2.495a.5.5 0 00-.5.5v2.5H9.5a.5.5 0 100 1h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.697 2.049a5 5 0 104.02 6.613.5.5 0 10-.944-.332 4 4 0 11-.946-4.16l.01.01 2.32 2.18a.5.5 0 00.685-.729l-2.314-2.175A5 5 0 007.697 2.05z"
-      />
+    <svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M4.32978 8.5081C4.32978 10.1923 5.70009 11.5625 7.38418 11.5625H8.46539C8.64456 11.5625 8.78975 11.4173 8.78975 11.2382V11.13C8.78975 10.9508 8.64457 10.8057 8.46539 10.8057H7.38418C6.11736 10.8057 5.08662 9.77492 5.08662 8.5081C5.08662 7.24128 6.11736 6.21054 7.38418 6.21054H9.37894L8.00515 7.58433C7.8576 7.73183 7.8576 7.97195 8.00515 8.11944C8.14833 8.26251 8.39751 8.2623 8.54036 8.11944L10.56 6.09971C10.6315 6.02824 10.6709 5.93321 10.6709 5.8321C10.6709 5.73106 10.6315 5.63598 10.56 5.56454L8.54025 3.54472C8.3974 3.40176 8.14801 3.40176 8.00513 3.54472C7.85758 3.69218 7.85758 3.93234 8.00513 4.07979L9.37892 5.45368H7.38418C5.70009 5.45368 4.32978 6.82393 4.32978 8.5081Z" />
     </svg>
   )
 }

packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx

@@ -2,17 +2,8 @@ import * as React from 'react'
 
 export function UndoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
-    <svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 2.495a.5.5 0 01.5.5v2.5h2.5a.5.5 0 110 1h-3a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.303 2.049a5 5 0 11-4.02 6.613.5.5 0 01.944-.332 4 4 0 10.946-4.16l-.01.01-2.32 2.18a.5.5 0 01-.685-.729l2.314-2.175A5 5 0 017.303 2.05z"
-      />
+    <svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M10.6707 8.5081C10.6707 10.1923 9.3004 11.5625 7.61631 11.5625H6.5351C6.35593 11.5625 6.21074 11.4173 6.21074 11.2382V11.13C6.21074 10.9508 6.35591 10.8057 6.5351 10.8057H7.61631C8.88313 10.8057 9.91387 9.77492 9.91387 8.5081C9.91387 7.24128 8.88313 6.21054 7.61631 6.21054H5.62155L6.99534 7.58433C7.14289 7.73183 7.14289 7.97195 6.99534 8.11944C6.85216 8.26251 6.60298 8.2623 6.46013 8.11944L4.44045 6.09971C4.36898 6.02824 4.32959 5.93321 4.32959 5.8321C4.32959 5.73106 4.36898 5.63598 4.44045 5.56454L6.46024 3.54472C6.60309 3.40176 6.85248 3.40176 6.99535 3.54472C7.14291 3.69218 7.14291 3.93234 6.99535 4.07979L5.62156 5.45368H7.61631C9.3004 5.45368 10.6707 6.82393 10.6707 8.5081Z" />
     </svg>
   )
 }

packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx

@@ -38,6 +38,7 @@ import {
   TextAlignLeftIcon,
   TextAlignRightIcon,
 } from '@radix-ui/react-icons'
+import { RowButton } from '~components/Primitives/RowButton'
 
 const currentStyleSelector = (s: TDSnapshot) => s.appState.currentStyle
 const selectedIdsSelector = (s: TDSnapshot) =>
@@ -149,22 +150,25 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
 
   return (
     <DropdownMenu.Root dir="ltr">
-      <DMTriggerIcon>
-        <OverlapIcons
-          style={{
-            color: strokes[theme][displayedStyle.color as ColorStyle],
-          }}
-        >
-          {displayedStyle.isFilled && (
-            <CircleIcon
-              size={16}
-              stroke="none"
-              fill={fills[theme][displayedStyle.color as ColorStyle]}
-            />
-          )}
-          {DASH_ICONS[displayedStyle.dash]}
-        </OverlapIcons>
-      </DMTriggerIcon>
+      <DropdownMenu.Trigger asChild>
+        <ToolButton variant="text">
+          Styles
+          <OverlapIcons
+            style={{
+              color: strokes[theme][displayedStyle.color as ColorStyle],
+            }}
+          >
+            {displayedStyle.isFilled && (
+              <CircleIcon
+                size={16}
+                stroke="none"
+                fill={fills[theme][displayedStyle.color as ColorStyle]}
+              />
+            )}
+            {DASH_ICONS[displayedStyle.dash]}
+          </OverlapIcons>
+        </ToolButton>
+      </DropdownMenu.Trigger>
       <DMContent>
         <StyledRow variant="tall">
           <span>Color</span>

packages/tldraw/src/components/TopPanel/TopPanel.tsx

@@ -5,6 +5,10 @@ import { PageMenu } from './PageMenu'
 import { ZoomMenu } from './ZoomMenu'
 import { StyleMenu } from './StyleMenu'
 import { Panel } from '~components/Primitives/Panel'
+import { ToolButton } from '~components/Primitives/ToolButton'
+import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
+import { breakpoints } from '~components/breakpoints'
+import { useTldrawApp } from '~hooks'
 
 interface TopPanelProps {
   readOnly: boolean
@@ -23,6 +27,8 @@ export function TopPanel({
   showZoom,
   showSponsorLink,
 }: TopPanelProps) {
+  const app = useTldrawApp()
+
   return (
     <StyledTopPanel>
       {(showMenu || showPages) && (
@@ -35,6 +41,14 @@ export function TopPanel({
       {(showStyles || showZoom) && (
         <Panel side="right">
           {showStyles && !readOnly && <StyleMenu />}
+          <MobileOnly bp={breakpoints}>
+            <ToolButton>
+              <UndoIcon onClick={app.undo} />
+            </ToolButton>
+            <ToolButton>
+              <RedoIcon onClick={app.redo} />
+            </ToolButton>
+          </MobileOnly>
           {showZoom && <ZoomMenu />}
         </Panel>
       )}
@@ -60,3 +74,18 @@ const StyledSpacer = styled('div', {
   flexGrow: 2,
   pointerEvents: 'none',
 })
+
+const MobileOnly = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  variants: {
+    bp: {
+      small: {
+        display: 'inherit',
+      },
+      medium: {
+        display: 'none',
+      },
+    },
+  },
+})

packages/tldraw/src/components/breakpoints.tsx

@@ -3,4 +3,9 @@
 /* -------------------------------------------------- */
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const breakpoints: any = { '@initial': 'mobile', '@sm': 'small' }
+export const breakpoints: any = {
+  '@initial': 'mobile',
+  '@micro': 'micro',
+  '@sm': 'small',
+  '@md': 'medium',
+}

packages/tldraw/src/styles/stitches.config.ts

@@ -32,7 +32,8 @@ const { styled, createTheme } = createStitches({
       key: '1px 1px rgba(0,0,0,1)',
       panel: `0px 0px 16px -1px rgba(0, 0, 0, 0.05), 
         0px 0px 16px -8px rgba(0, 0, 0, 0.05), 
-        0px 0px 16px -12px rgba(0, 0, 0, 0.12)`,
+        0px 0px 16px -12px rgba(0, 0, 0, 0.12),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.08)`,
     },
     space: {
       0: '2px',