Add pencil icon to rename page input as an indicator (#638)

* Add pencil icon to rename page input

* improve style for page name input

Co-authored-by: judicael_ai <judicael@smartpredict.ai>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

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

@@ -1,23 +1,52 @@
 import * as React from 'react'
 import { styled } from '~styles'
+import { SmallIcon } from '../SmallIcon'
 
 export interface TextFieldProps {
   value: string
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   placeholder?: string
+  icon?: React.ReactElement
 }
 
-export const TextField = ({ value, onChange, placeholder = '' }: TextFieldProps) => {
-  return <StyledInput value={value} onChange={onChange} placeholder={placeholder} />
+export const TextField = ({ value, onChange, placeholder = '', icon }: TextFieldProps) => {
+  return (
+    <StyledInputWrapper>
+      <StyledInput value={value} onChange={onChange} placeholder={placeholder} />
+      {icon ? <StyledInputIcon>{icon}</StyledInputIcon> : null}
+    </StyledInputWrapper>
+  )
 }
 
-export const StyledInput = styled('input', {
+const StyledInputWrapper = styled('div', {
+  position: 'relative',
+  width: '100%',
+  height: 'min-content',
+})
+
+const StyledInput = styled('input', {
   color: '$text',
   border: 'none',
-  textAlign: 'center',
+  textAlign: 'left',
   width: '100%',
+  paddingLeft: '$3',
+  paddingRight: '$6',
+
   height: '32px',
   outline: 'none',
   fontFamily: '$ui',
   fontSize: '$1',
+  '&:focus': {
+    backgroundColor: '$hover',
+  },
+  borderRadius: '$2',
+})
+
+const StyledInputIcon = styled(SmallIcon, {
+  top: 0,
+  right: 0,
+  position: 'absolute',
+  paddingLeft: '$3',
+  paddingRight: '$3',
+  pointerEvents: 'none',
 })

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as Dialog from '@radix-ui/react-alert-dialog'
-import { MixerVerticalIcon } from '@radix-ui/react-icons'
+import { MixerVerticalIcon, Pencil1Icon } from '@radix-ui/react-icons'
 import type { TDSnapshot, TDPage } from '~types'
 import { useTldrawApp } from '~hooks'
 import { RowButton, RowButtonProps } from '~components/Primitives/RowButton'
@@ -10,7 +10,6 @@ import { IconButton } from '~components/Primitives/IconButton/IconButton'
 import { SmallIcon } from '~components/Primitives/SmallIcon'
 import { breakpoints } from '~components/breakpoints'
 import { TextField } from '~components/Primitives/TextField'
-import { preventEvent } from '~components/preventEvent'
 
 const canDeleteSelector = (s: TDSnapshot) => {
   return Object.keys(s.document.pages).length > 1
@@ -94,7 +93,12 @@ export function PageOptionsDialog({ page, onOpen, onClose }: PageOptionsDialogPr
       >
         <StyledDialogOverlay onPointerDown={close} />
         <StyledDialogContent dir="ltr" onKeyDown={stopPropagation} onKeyUp={stopPropagation}>
-          <TextField placeholder="Page name" value={pageName} onChange={handleRename} />
+          <TextField
+            placeholder="Page name"
+            value={pageName}
+            onChange={handleRename}
+            icon={<Pencil1Icon />}
+          />
           <Divider />
           <DialogAction onSelect={handleDuplicate}>Duplicate</DialogAction>
           <DialogAction disabled={!canDelete} onSelect={handleDelete}>

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

@@ -42,6 +42,8 @@ const { styled, createTheme } = createStitches({
       3: '8px',
       4: '12px',
       5: '16px',
+      6: '32px',
+      7: '48px',
     },
     fontSizes: {
       0: '10px',