Adds undo / redo / clear button

components/editor.tsx

@@ -20,7 +20,6 @@ export default function Editor() {
 
   return (
     <Layout>
-      <Toolbar />
       <Canvas />
       <LeftPanels>
         <CodePanel />
@@ -42,10 +41,9 @@ const Layout = styled('div', {
   bottom: 0,
   right: 0,
   display: 'grid',
-  gridTemplateRows: '40px 1fr auto 40px',
+  gridTemplateRows: '1fr auto 40px',
   gridTemplateColumns: 'minmax(50%, 400px) 1fr auto',
   gridTemplateAreas: `
-    "toolbar toolbar toolbar"
     "leftPanels main rightPanels"
     "tools tools tools"
     "statusbar statusbar statusbar"

components/tools-panel/tools-panel.tsx

@@ -16,6 +16,7 @@ import React from 'react'
 import state, { useSelector } from 'state'
 import styled from 'styles'
 import { ShapeType } from 'types'
+import UndoRedo from './undo-redo'
 import Zoom from './zoom'
 
 const selectSelectTool = () => state.send('SELECTED_SELECT_TOOL')
@@ -129,6 +130,7 @@ export default function ToolsPanel() {
           </IconButton>
         )}
       </Container>
+      <UndoRedo />
     </OuterContainer>
   )
 }

components/tools-panel/undo-redo.tsx

@@ -0,0 +1,46 @@
+import { IconButton } from 'components/shared'
+import { RotateCcw, RotateCw, Trash2 } from 'react-feather'
+import state, { useSelector } from 'state'
+import styled from 'styles'
+
+const undo = () => state.send('UNDO')
+const redo = () => state.send('REDO')
+const clear = () => state.send('CLEARED_PAGE')
+
+export default function UndoRedo() {
+  return (
+    <Container>
+      <IconButton onClick={undo}>
+        <RotateCcw />
+      </IconButton>
+      <IconButton onClick={redo}>
+        <RotateCw />
+      </IconButton>
+      <IconButton onClick={clear}>
+        <Trash2 />
+      </IconButton>
+    </Container>
+  )
+}
+
+const Container = styled('div', {
+  position: 'absolute',
+  bottom: 12,
+  right: 12,
+  backgroundColor: '$panel',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  alignSelf: 'flex-end',
+  border: '1px solid $border',
+  pointerEvents: 'all',
+  userSelect: 'none',
+  zIndex: 200,
+  boxShadow: '0px 2px 12px rgba(0,0,0,.08)',
+  display: 'flex',
+  padding: 4,
+
+  '& svg': {
+    height: 13,
+    width: 13,
+  },
+})

state/state.ts

@@ -143,6 +143,7 @@ const state = createState({
             SAVED: 'forceSave',
             UNDO: 'undo',
             REDO: 'redo',
+            CLEARED_PAGE: ['selectAll', 'deleteSelection'],
             SAVED_CODE: 'saveCode',
             DELETED: 'deleteSelection',
             STARTED_PINCHING: { to: 'pinching' },