Live mode UI (#4487)

* no canvas color change, thicker border

* dont use stop icon in toolbar

* wip move play mode toast to toolbar submenu

* Revert "wip move play mode toast to toolbar submenu"

This reverts commit 749184b.

* nevermind! same canvas border

editor/src/components/editor/canvas-toolbar.tsx

@@ -454,7 +454,7 @@ export const CanvasToolbar = React.memo(() => {
         <Tooltip title='Live Mode' placement='bottom'>
           <InsertModeButton
             testid={PlayModeButtonTestId}
-            iconType={isLiveMode ? 'stop' : 'play'}
+            iconType={'play'}
             iconCategory='tools'
             primary={canvasToolbarMode.primary === 'play'}
             onClick={toggleLiveMode}

editor/src/templates/editor-canvas.tsx

@@ -92,7 +92,7 @@ import { emptyModifiers, Modifier } from '../utils/modifiers'
 import type { MouseButtonsPressed } from '../utils/mouse'
 import RU from '../utils/react-utils'
 import Utils from '../utils/utils'
-import { UtopiaStyles } from '../uuiui'
+import { UtopiaStyles, colorTheme } from '../uuiui'
 import { DropHandlers } from './image-drop'
 import { EditorCommon } from '../components/editor/editor-component-common'
 import { CursorComponent } from '../components/canvas/controls/select-mode/cursor-component'
@@ -871,6 +871,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
         'data-testid': 'canvas-root',
         style: {
           ...canvasLiveEditingStyle,
+          backgroundColor: colorTheme.canvasBackground.value,
           transition: 'all .2s linear',
           position: 'relative',
           overflow: 'hidden',

editor/src/uuiui/styles/theme/utopia-theme.ts

@@ -89,11 +89,9 @@ const flexCenter: React.CSSProperties = {
 const canvas = {
   live: {
     border: `1px solid ${colorTheme.canvasLiveBorder.value}`,
-    backgroundColor: colorTheme.canvasLiveBackground.value,
   },
   editing: {
     border: '1px solid transparent',
-    backgroundColor: colorTheme.canvasBackground.value,
   },
 }