improves mobile layout

components/shared.tsx

@@ -40,8 +40,8 @@ export const IconButton = styled('button', {
         height: 44,
         width: 44,
         '& > svg': {
-          height: '16px',
-          width: '16px',
+          height: '20px',
+          width: '20px',
         },
       },
       large: {

components/tools-panel/tools-panel.tsx

@@ -58,7 +58,7 @@ export default function ToolsPanel() {
         <Container>
           <IconButton
             name="select"
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
             onClick={selectSelectTool}
             isActive={activeTool === 'select'}
           >
@@ -68,7 +68,7 @@ export default function ToolsPanel() {
         <Container>
           <IconButton
             name={ShapeType.Draw}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectDrawTool}
             isActive={activeTool === ShapeType.Draw}
           >
@@ -76,7 +76,7 @@ export default function ToolsPanel() {
           </IconButton>
           <IconButton
             name={ShapeType.Rectangle}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectRectangleTool}
             isActive={activeTool === ShapeType.Rectangle}
           >
@@ -84,7 +84,7 @@ export default function ToolsPanel() {
           </IconButton>
           <IconButton
             name={ShapeType.Circle}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectEllipseTool}
             isActive={activeTool === ShapeType.Ellipse}
           >
@@ -92,7 +92,7 @@ export default function ToolsPanel() {
           </IconButton>
           <IconButton
             name={ShapeType.Arrow}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectArrowTool}
             isActive={activeTool === ShapeType.Arrow}
           >
@@ -100,7 +100,7 @@ export default function ToolsPanel() {
           </IconButton>
           {/* <IconButton
             name={ShapeType.Circle}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectCircleTool}
             isActive={activeTool === ShapeType.Circle}
           >
@@ -108,7 +108,7 @@ export default function ToolsPanel() {
           </IconButton> */}
           {/* <IconButton
             name={ShapeType.Line}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectLineTool}
             isActive={activeTool === ShapeType.Line}
           >
@@ -116,7 +116,7 @@ export default function ToolsPanel() {
           </IconButton>
           <IconButton
             name={ShapeType.Ray}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectRayTool}
             isActive={activeTool === ShapeType.Ray}
           >
@@ -124,7 +124,7 @@ export default function ToolsPanel() {
           </IconButton>
           <IconButton
             name={ShapeType.Dot}
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'medium', '@sm': 'small', '@md': 'large' }}
             onClick={selectDotTool}
             isActive={activeTool === ShapeType.Dot}
           >
@@ -133,14 +133,14 @@ export default function ToolsPanel() {
         </Container>
         <Container>
           <IconButton
-            size={{ '@sm': 'small', '@md': 'large' }}
+            size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
             onClick={selectToolLock}
           >
             {isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
           </IconButton>
           {isPenLocked && (
             <IconButton
-              size={{ '@sm': 'small', '@md': 'large' }}
+              size={{ '@initial': 'small', '@sm': 'small', '@md': 'large' }}
               onClick={selectToolLock}
             >
               <Pencil2Icon />
@@ -161,7 +161,7 @@ const OuterContainer = styled('div', {
   padding: '0 8px 12px 8px',
   width: '100%',
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-end',
   justifyContent: 'center',
   flexWrap: 'wrap',
   gap: 16,
@@ -170,15 +170,17 @@ const OuterContainer = styled('div', {
 
 const Flex = styled('div', {
   display: 'flex',
-  justifyContent: 'space-between',
   width: '100%',
   padding: '0 4px',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
 
   variants: {
     size: {
       small: {
         width: 'auto',
         padding: '0',
+        justifyContent: 'center',
         '& > *:nth-child(n+2)': {
           marginLeft: 16,
         },

components/tools-panel/undo-redo.tsx

@@ -38,6 +38,7 @@ const Container = styled('div', {
   boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
+  flexDirection: 'column',
 
   '& svg': {
     height: 13,
@@ -48,6 +49,8 @@ const Container = styled('div', {
     size: {
       small: {
         bottom: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
       },
     },
   },

components/tools-panel/zoom.tsx

@@ -31,6 +31,11 @@ function ZoomCounter() {
   )
 }
 
+const ZoomButton = styled(IconButton, {
+  fontSize: '$0',
+  padding: 8,
+})
+
 const Container = styled('div', {
   position: 'absolute',
   left: 12,
@@ -46,6 +51,8 @@ const Container = styled('div', {
   boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
   display: 'flex',
   padding: 4,
+  flexDirection: 'column',
+  alignItems: 'center',
 
   '& svg': {
     strokeWidth: 0,
@@ -55,13 +62,12 @@ const Container = styled('div', {
     size: {
       small: {
         bottom: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        [`& ${ZoomButton}`]: {
+          width: 44,
+        },
       },
     },
   },
 })
-
-const ZoomButton = styled(IconButton, {
-  fontSize: '$0',
-  padding: 8,
-  width: 44,
-})

lib/shape-utils/index.tsx

@@ -5,10 +5,7 @@ import {
   Corner,
   Edge,
   ShapeStyles,
-  ShapeHandle,
   ShapeBinding,
-  BaseShape,
-  ShapeSpecificProps,
   Mutable,
 } from 'types'
 import { v4 as uuid } from 'uuid'
@@ -26,7 +23,6 @@ import {
   getBoundsFromPoints,
   getRotatedCorners,
 } from 'utils/utils'
-import shape from 'components/canvas/shape'
 import {
   boundsCollidePolygon,
   boundsContainPolygon,