fix buttons, help button placement (#1145)

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

@@ -3,6 +3,7 @@ import { styled } from '~styles/stitches.config'
 export const Panel = styled('div', {
   backgroundColor: '$panel',
   display: 'flex',
+  alignItems: 'center',
   flexDirection: 'row',
   boxShadow: '$panel',
   padding: '$2',

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

@@ -61,11 +61,13 @@ interface ToolButtonWithTooltipProps extends ToolButtonProps {
   label: string
   isLocked?: boolean
   kbd?: string
+  variant?: 'icon' | 'text' | 'circle' | 'primary'
 }
 
 export function ToolButtonWithTooltip({
   label,
   kbd,
+  variant,
   isLocked,
   ...rest
 }: ToolButtonWithTooltipProps) {
@@ -85,7 +87,7 @@ export function ToolButtonWithTooltip({
     <Tooltip label={label[0].toUpperCase() + label.slice(1)} kbd={kbd}>
       <ToolButton
         {...rest}
-        variant="primary"
+        variant={variant}
         isToolLocked={isLocked && rest.isActive}
         onDoubleClick={handleDoubleClick}
         onKeyDown={handleKeyDown}
@@ -203,8 +205,8 @@ export const StyledToolButton = styled('button', {
       variant: 'primary',
       bp: 'small',
       css: {
-        height: '44px',
-        width: '44px',
+        height: '40px',
+        width: '40px',
         [`& ${StyledToolButtonInner} > svg`]: {
           width: 20,
           height: 20,

packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx

@@ -155,7 +155,7 @@ const PopoverAnchor = styled(Popover.Anchor, {
         bottom: 64,
       },
       small: {
-        bottom: 10,
+        bottom: 20,
       },
       medium: {},
       large: {},
@@ -168,6 +168,12 @@ const PopoverAnchor = styled(Popover.Anchor, {
     },
   },
   compoundVariants: [
+    {
+      debug: true,
+      css: {
+        bottom: 50,
+      },
+    },
     {
       bp: 'mobile',
       side: 'bottom',
@@ -181,7 +187,15 @@ const PopoverAnchor = styled(Popover.Anchor, {
       side: 'bottom',
       debug: true,
       css: {
-        bottom: 50,
+        bottom: 60,
+      },
+    },
+    {
+      bp: 'small',
+      side: 'bottom',
+      debug: true,
+      css: {
+        bottom: 60,
       },
     },
   ],

packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx

@@ -72,6 +72,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'select' })}
         onClick={selectSelectTool}
         isActive={activeTool === 'select'}
+        variant="primary"
         id="TD-PrimaryTools-CursorArrow"
       >
         <CursorArrowIcon />
@@ -81,6 +82,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'draw' })}
         onClick={selectDrawTool}
         isActive={activeTool === TDShapeType.Draw}
+        variant="primary"
         id="TD-PrimaryTools-Pencil"
       >
         <Pencil1Icon />
@@ -90,6 +92,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'eraser' })}
         onClick={selectEraseTool}
         isActive={activeTool === 'erase'}
+        variant="primary"
         id="TD-PrimaryTools-Eraser"
       >
         <EraserIcon />
@@ -100,6 +103,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'arrow' })}
         onClick={selectArrowTool}
         isLocked={isToolLocked}
+        variant="primary"
         isActive={activeTool === TDShapeType.Arrow}
         id="TD-PrimaryTools-ArrowTopRight"
       >
@@ -110,6 +114,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'text' })}
         onClick={selectTextTool}
         isLocked={isToolLocked}
+        variant="primary"
         isActive={activeTool === TDShapeType.Text}
         id="TD-PrimaryTools-Text"
       >
@@ -120,6 +125,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'sticky' })}
         onClick={selectStickyTool}
         isActive={activeTool === TDShapeType.Sticky}
+        variant="primary"
         id="TD-PrimaryTools-Pencil2"
       >
         <Pencil2Icon />
@@ -128,6 +134,7 @@ export const PrimaryTools = React.memo(function PrimaryTools() {
         label={intl.formatMessage({ id: 'image' })}
         onClick={uploadMedias}
         id="TD-PrimaryTools-Image"
+        variant="primary"
       >
         <ImageIcon />
       </ToolButtonWithTooltip>