[Improvement] Share zone styling (#2628)

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Tweaked user avatar size.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

apps/dotcom/src/components/ExportMenu.tsx

@@ -1,26 +1,18 @@
 import * as Popover from '@radix-ui/react-popover'
-import {
-	Button,
-	useActions,
-	useBreakpoint,
-	useContainer,
-	useEditor,
-	useTranslation,
-} from '@tldraw/tldraw'
+import { Button, useActions, useContainer, useEditor, useTranslation } from '@tldraw/tldraw'
 import React, { useState } from 'react'
 import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
 import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
 import { getSaveFileCopyAction } from '../utils/useFileSystem'
 import { useHandleUiEvents } from '../utils/useHandleUiEvent'
+import { ShareButton } from './ShareButton'
 
 export const ExportMenu = React.memo(function ExportMenu() {
 	const { [SHARE_PROJECT_ACTION]: shareProject, [SHARE_SNAPSHOT_ACTION]: shareSnapshot } =
 		useActions()
 	const container = useContainer()
 	const msg = useTranslation()
-	const breakpoint = useBreakpoint()
 	const handleUiEvent = useHandleUiEvents()
-	const showIcon = breakpoint < 5
 	const editor = useEditor()
 	const saveFileCopyAction = getSaveFileCopyAction(editor, handleUiEvent)
 	const [didCopySnapshotLink, setDidCopySnapshotLink] = useState(false)
@@ -31,13 +23,7 @@ export const ExportMenu = React.memo(function ExportMenu() {
 	return (
 		<Popover.Root open={isOpen} onOpenChange={onOpenChange}>
 			<Popover.Trigger dir="ltr" asChild>
-				<Button
-					type="normal"
-					className="tlui-share-zone__button"
-					title={msg('share-menu.title')}
-					label={showIcon ? undefined : 'share-menu.title'}
-					icon={showIcon ? 'collab' : undefined}
-				/>
+				<ShareButton title={'share-menu.title'} label={'share-menu.title'} />
 			</Popover.Trigger>
 			<Popover.Portal container={container}>
 				<Popover.Content

apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx

@@ -52,7 +52,14 @@ export const PeopleMenu = track(function PeopleMenu({
 				</button>
 			</Popover.Trigger>
 			<Popover.Portal container={container}>
-				<Popover.Content dir="ltr" className="tlui-menu" align="end" side="bottom" sideOffset={6}>
+				<Popover.Content
+					dir="ltr"
+					className="tlui-menu"
+					align="end"
+					side="bottom"
+					sideOffset={2}
+					alignOffset={-5}
+				>
 					<div className="tlui-people-menu__wrapper">
 						<div className="tlui-people-menu__section">
 							<UserPresenceEditor />

apps/dotcom/src/components/ShareButton.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from '@tldraw/tldraw'
+import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react'
+
+export type ShareButtonProps = DetailedHTMLProps<
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> & { title: string; label: string }
+
+export const ShareButton = forwardRef<HTMLButtonElement, ShareButtonProps>(function ShareButton(
+	{ label, title, ...props },
+	ref
+) {
+	const msg = useTranslation()
+	const titleStr = msg(title)
+	const labelStr = msg(label)
+	return (
+		<button
+			ref={ref}
+			draggable={false}
+			type="button"
+			title={titleStr}
+			className="tlui-share-zone__button-wrapper"
+			{...props}
+		>
+			<div className="tlui-button tlui-button__normal tlui-share-zone__button">
+				<span className="tlui-button__label" draggable={false}>
+					{labelStr}
+				</span>
+			</div>
+		</button>
+	)
+})

apps/dotcom/src/components/ShareMenu.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { useShareMenuIsOpen } from '../hooks/useShareMenuOpen'
 import { createQRCodeImageDataString } from '../utils/qrcode'
 import { SHARE_PROJECT_ACTION, SHARE_SNAPSHOT_ACTION } from '../utils/sharing'
+import { ShareButton } from './ShareButton'
 
 type ShareState = {
 	state: 'offline' | 'shared' | 'readonly'
@@ -93,12 +94,7 @@ export const ShareMenu = React.memo(function ShareMenu() {
 	return (
 		<Popover.Root onOpenChange={onOpenChange} open={isOpen}>
 			<Popover.Trigger dir="ltr" asChild>
-				<Button
-					type="normal"
-					className="tlui-share-zone__button"
-					title={msg('share-menu.title')}
-					label={'share-menu.title'}
-				/>
+				<ShareButton title={'share-menu.title'} label={'share-menu.title'} />
 			</Popover.Trigger>
 			<Popover.Portal container={container}>
 				<Popover.Content
@@ -107,6 +103,7 @@ export const ShareMenu = React.memo(function ShareMenu() {
 					align="end"
 					side="bottom"
 					sideOffset={2}
+					alignOffset={4}
 				>
 					{shareState.state === 'shared' || shareState.state === 'readonly' ? (
 						<>

apps/dotcom/styles/z-board.css

@@ -1,5 +1,9 @@
 /* ------------------ Da Share Zone ----------------- */
 
+.tlui-style-panel__wrapper {
+	margin-top: 4px;
+}
+
 .tlui-share-zone {
 	padding: 0px 0px 0px 0px;
 	display: flex;
@@ -26,23 +30,34 @@
 	border-radius: 100%;
 }
 
+.tlui-share-zone__button-wrapper {
+	all: unset;
+	padding: 2px;
+	position: relative;
+	pointer-events: all;
+	position: relative;
+	cursor: pointer;
+}
+
 .tlui-share-zone__button {
 	font-family: inherit;
 	font-size: inherit;
-	border: 4px solid var(--color-background);
+	height: 36px;
+	border: 2px solid var(--color-background);
 	border-radius: 8px;
 	background-color: var(--color-selected);
 	color: var(--color-selected-contrast);
 	text-shadow: none;
 	pointer-events: all;
 	position: relative;
+	font-weight: 600;
 }
 
 .tlui-share-zone__button::before {
 	position: absolute;
 	display: block;
 	content: '';
-	inset: -4px;
+	inset: 0px;
 	background-color: var(--color-background);
 	border-top-left-radius: var(--radius-3);
 	border-bottom-right-radius: var(--radius-3);
@@ -137,9 +152,9 @@
 }
 
 .tlui-people-menu__avatar {
-	height: 22px;
-	width: 22px;
-	border: 3px solid var(--color-background);
+	height: 28px;
+	width: 28px;
+	border: 2px solid var(--color-background);
 	background-color: var(--color-low);
 	border-radius: 100%;
 	display: flex;
@@ -153,7 +168,7 @@
 }
 
 .tlui-people-menu__avatar:nth-of-type(n + 2) {
-	margin-left: -10px;
+	margin-left: -12px;
 }
 
 .tlui-people-menu__avatars-button[data-state='open'] {