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

         [`& ${StyledToolButtonInner}`]: {
           fontSize: '$1',
           padding: '0 $3',
+          gap: '$3',
         },
       },
       circle: {

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

 
 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

 
 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

   TextAlignLeftIcon,
   TextAlignRightIcon,
 } from '@radix-ui/react-icons'
+import { RowButton } from '~components/Primitives/RowButton'
 
 const currentStyleSelector = (s: TDSnapshot) => s.appState.currentStyle
 const selectedIdsSelector = (s: TDSnapshot) =>
 
   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

 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
   showZoom,
   showSponsorLink,
 }: TopPanelProps) {
+  const app = useTldrawApp()
+
   return (
     <StyledTopPanel>
       {(showMenu || showPages) && (
       {(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>
       )}
   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

 /* -------------------------------------------------- */
 
 // 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

       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',