UI fixes (#187)

Co-authored-by: Aria Minaei <aria.minaei@gmail.com>

packages/playground/src/shared/dom/Scene.tsx

@@ -1,7 +1,7 @@
 import studio from '@theatre/studio'
 import type {UseDragOpts} from './useDrag'
 import useDrag from './useDrag'
-import React, {useLayoutEffect, useMemo, useState} from 'react'
+import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
 import type {IProject, ISheet} from '@theatre/core'
 import {onChange, types} from '@theatre/core'
 import type {IScrub, IStudio} from '@theatre/studio'
@@ -19,6 +19,17 @@ const textInterpolate = (left: string, right: string, progression: number) => {
   return left
 }
 
+const globalConfig = {
+  background: {
+    type: types.stringLiteral('black', {
+      black: 'black',
+      white: 'white',
+      dynamic: 'dynamic',
+    }),
+    dynamic: types.rgba(),
+  },
+}
+
 const boxObjectConfig = {
   test: types.string('Hello?', {interpolate: textInterpolate}),
   testLiteral: types.stringLiteral('a', {a: 'Option A', b: 'Option B'}),
@@ -162,8 +173,24 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
     })
   })
 
+  const containerRef = useRef<HTMLDivElement>(null!)
+
+  const globalObj = sheet.object('global', globalConfig)
+
+  useLayoutEffect(() => {
+    const unsubscribeFromChanges = onChange(globalObj.props, (newValues) => {
+      console.log(newValues)
+      containerRef.current.style.background =
+        newValues.background.type !== 'dynamic'
+          ? newValues.background.type
+          : newValues.background.dynamic.toString()
+    })
+    return unsubscribeFromChanges
+  }, [globalObj])
+
   return (
     <div
+      ref={containerRef}
       style={{
         position: 'absolute',
         left: '0',

packages/playground/src/tests/setting-static-props/test.e2e.ts

@@ -10,8 +10,6 @@ test.describe('setting-static-props', () => {
   })
 
   test('Undo/redo', async ({page}) => {
-    await page.locator('[data-testid="OutlinePanel-TriggerButton"]').click()
-
     // https://github.com/microsoft/playwright/issues/12298
     // The div does in fact intercept pointer events, but it is meant to 🤦‍
     await page