Remix bars (#4224)

* scene label always aqua * commit * all scenes same font size * scene titles same height * better scene label colors * same gap between label and actual scene * even better colors * hide arrows when scene not selected * play mode toolbar fixes and hover states * color tweak * padding refactor and a castle appears * font size and padding adjustments * RemixSceneLabelTestId --------- Co-authored-by: Berci Kormendy <[email protected]>
concrete-utopia · Sep 22, 2023 · 12ae0ec · 12ae0ec
1 parent ba7e291
commit 12ae0ec
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 81 deletions.
diff --git a/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx b/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx
@@ -22,6 +22,9 @@ import { unless } from '../../../../utils/react-conditionals'
 export const RemixSceneLabelPathTestId = (path: ElementPath): string =>
   `${EP.toString(path)}-remix-scene-label-path`
 
+export const RemixSceneLabelTestId = (path: ElementPath): string =>
+  `${EP.toString(path)}-remix-scene-label-test-id`
+
 export const LocationDoesNotMatchRoutesTestId = 'location-does-not-match-routes'
 
 export const RemixSceneHomeLabel = '(home)'
@@ -94,7 +97,19 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
   const currentPath = (navigationData[EP.toString(props.target)] ?? null)?.location.pathname
   const isIndexRoute = currentPath === '/'
 
-  const label = isIndexRoute ? RemixSceneHomeLabel : currentPath
+  const pathLabel = isIndexRoute ? RemixSceneHomeLabel : currentPath
+
+  const scenelabel = useEditorState(
+    Substores.metadata,
+    (store) =>
+      MetadataUtils.getElementLabel(
+        store.editor.allElementProps,
+        props.target,
+        store.editor.elementPathTree,
+        store.editor.jsxMetadata,
+      ),
+    'SceneLabel label',
+  )
 
   const currentLocationMatchesRoutes = useCurrentLocationMatchesRoutes(props.target)
 
@@ -133,12 +148,13 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
     (store) => store.editor.canvas.scale,
     'RemixSceneLabel scale',
   )
-  const baseFontSize = 9
+  const baseFontSize = 10
   const scaledFontSize = baseFontSize / scale
   const scaledLineHeight = 17 / scale
-  const paddingY = scaledFontSize / 2
-  const offsetY = scaledFontSize
-  const offsetX = scaledFontSize
+  const paddingY = scaledFontSize / 4
+  const paddingX = paddingY * 2
+  const offsetY = scaledFontSize / 1.5
+  const offsetX = scaledFontSize / 2
   const borderRadius = 3 / scale
 
   const editorModeRef = useRefEditorState((store) => {
@@ -243,14 +259,12 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
         className='roleComponentName'
         style={{
           pointerEvents: labelSelectable ? 'initial' : 'none',
-          color: isIndexRoute ? colorTheme.aqua.value : colorTheme.textColor.value,
+          color: colorTheme.aqua.value,
           position: 'absolute',
           left: frame.x,
           bottom: -frame.y + offsetY,
           width: frame.width,
-          paddingLeft: offsetX,
-          paddingTop: paddingY,
-          paddingBottom: paddingY,
+          padding: `${paddingY}px ${paddingX}px`,
           fontFamily: 'Utopian-Inter',
           fontSize: scaledFontSize,
           lineHeight: `${scaledLineHeight}px`,
@@ -259,47 +273,72 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
           textOverflow: 'ellipsis',
           borderRadius: borderRadius,
           backgroundColor: backgroundColor,
-          gap: 12 / scale,
+          justifyContent: 'space-between',
         }}
       >
-        <Tooltip title={'Back'}>
-          <span
-            data-testid={RemixSceneLabelButtonTestId(props.target, 'back')}
-            style={{ cursor: 'pointer', fontSize: 16 / scale }}
-            onMouseDown={back}
+        <FlexRow style={{ gap: paddingX }}>
+          <div
+            data-testid={RemixSceneLabelTestId(props.target)}
+            style={{
+              fontWeight: 600,
+            }}
           >
-            〱
-          </span>
-        </Tooltip>
-        <Tooltip title={'Forward'}>
-          <span
-            data-testid={RemixSceneLabelButtonTestId(props.target, 'forward')}
-            style={{ cursor: 'pointer', fontSize: 16 / scale, transform: 'scale(-1, 1)' }}
-            onMouseDown={forward}
+            {scenelabel}
+          </div>
+          <div
+            data-testid={RemixSceneLabelPathTestId(props.target)}
+            style={{
+              color: currentLocationMatchesRoutes ? undefined : colorTheme.error.value,
+            }}
           >
-            〱
-          </span>
-        </Tooltip>
-        <Tooltip title={'Home'}>
-          <span
-            data-testid={RemixSceneLabelButtonTestId(props.target, 'home')}
-            style={{ cursor: 'pointer', fontSize: 16 / scale }}
-            onMouseDown={home}
-          >
-            ／
-          </span>
-        </Tooltip>
-        <div
-          data-testid={RemixSceneLabelPathTestId(props.target)}
-          style={{
-            borderRadius: 10 / scale,
-            padding: `${4 / scale}px ${12 / scale}px`,
-            fontSize: 14 / scale,
-            color: currentLocationMatchesRoutes ? undefined : colorTheme.error.value,
-          }}
-        >
-          {label}
-        </div>
+            {pathLabel}
+          </div>
+        </FlexRow>
+        <FlexRow style={{ gap: paddingX, alignItems: 'center' }}>
+          <Tooltip title={'Back'}>
+            <span
+              data-testid={RemixSceneLabelButtonTestId(props.target, 'back')}
+              style={{
+                cursor: 'pointer',
+                fontSize: 10 / scale,
+                display: isSelected ? 'block' : 'none',
+              }}
+              onMouseDown={back}
+            >
+              〱
+            </span>
+          </Tooltip>
+          <Tooltip title={'Forward'}>
+            <span
+              data-testid={RemixSceneLabelButtonTestId(props.target, 'forward')}
+              style={{
+                cursor: 'pointer',
+                fontSize: 10 / scale,
+                display: isSelected ? 'block' : 'none',
+                transform: 'scale(-1, 1)',
+              }}
+              onMouseDown={forward}
+            >
+              〱
+            </span>
+          </Tooltip>
+          <Tooltip title={'Home'}>
+            <span
+              data-testid={RemixSceneLabelButtonTestId(props.target, 'home')}
+              style={{
+                cursor: 'pointer',
+                fontSize: 14 / scale,
+                display: isSelected ? 'block' : 'none',
+                position: 'relative',
+                bottom: 0 / scale,
+              }}
+              onMouseDown={home}
+            >
+              ⛫
+            </span>
+          </Tooltip>
+        </FlexRow>
+
         {unless(
           currentLocationMatchesRoutes,
           <Tooltip title={"Current location doesn't match available routes"}>

diff --git a/editor/src/components/canvas/controls/select-mode/scene-label.tsx b/editor/src/components/canvas/controls/select-mode/scene-label.tsx
@@ -5,7 +5,7 @@ import { isFiniteRectangle, windowPoint } from '../../../../core/shared/math-uti
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { NO_OP } from '../../../../core/shared/utils'
 import { Modifier } from '../../../../utils/modifiers'
-import { useColorTheme } from '../../../../uuiui'
+import { FlexRow, useColorTheme } from '../../../../uuiui'
 import { clearHighlightedViews, selectComponents } from '../../../editor/actions/action-creators'
 import { useDispatch } from '../../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
@@ -99,11 +99,12 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
     (store) => store.editor.canvas.scale,
     'SceneLabel scale',
   )
-  const baseFontSize = 9
+  const baseFontSize = 10
   const scaledFontSize = baseFontSize / scale
   const scaledLineHeight = 17 / scale
-  const paddingY = scaledFontSize / 9
-  const offsetY = scaledFontSize / 3
+  const paddingY = scaledFontSize / 4
+  const paddingX = paddingY * 2
+  const offsetY = scaledFontSize / 1.5
   const offsetX = scaledFontSize / 2
   const borderRadius = 3 / scale
 
@@ -194,13 +195,13 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
 
   const selectedBackgroundColor = sceneHasSingleChild
     ? colorTheme.componentPurple05solid.value
-    : colorTheme.bg5.value
+    : colorTheme.bg510solid.value
   const backgroundColor = isSelected ? selectedBackgroundColor : 'transparent'
 
   if (frame != null && isFiniteRectangle(frame)) {
     return (
       <CanvasOffsetWrapper>
-        <div
+        <FlexRow
           onMouseOver={labelSelectable ? onMouseOver : NO_OP}
           onMouseOut={labelSelectable ? onMouseLeave : NO_OP}
           onMouseDown={labelSelectable ? onMouseDown : NO_OP}
@@ -209,16 +210,13 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
           className='roleComponentName'
           style={{
             pointerEvents: labelSelectable ? 'initial' : 'none',
-            color: sceneHasSingleChild
-              ? colorTheme.componentPurple.value
-              : colorTheme.subduedForeground.value,
+            color: sceneHasSingleChild ? colorTheme.componentPurple.value : colorTheme.fg2.value,
             position: 'absolute',
             fontWeight: 600,
             left: frame.x,
             bottom: -frame.y + offsetY,
             width: frame.width,
-            paddingLeft: offsetX,
-            paddingBottom: paddingY,
+            padding: `${paddingY}px ${paddingX}px`,
             fontFamily: 'Utopian-Inter',
             fontSize: scaledFontSize,
             lineHeight: `${scaledLineHeight}px`,
@@ -229,8 +227,14 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
             backgroundColor: backgroundColor,
           }}
         >
-          {label}
-        </div>
+          <div
+            style={{
+              fontWeight: 600,
+            }}
+          >
+            {label}
+          </div>
+        </FlexRow>
       </CanvasOffsetWrapper>
     )
   } else {

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -747,7 +747,7 @@ export const CanvasToolbar = React.memo(() => {
                 height: 32,
                 overflow: 'hidden',
                 backgroundColor: colorTheme.bg2.value,
-                borderRadius: '0px 10px 10px 10px',
+                borderRadius: '0px 0px 10px 10px',
                 boxShadow: UtopiaTheme.panelStyles.shadows.medium,
                 pointerEvents: 'initial',
                 zIndex: -1, // it sits below the main menu row, but we want the main menu's shadow to cast over this one

diff --git a/editor/src/components/editor/remix-navigation-bar.tsx b/editor/src/components/editor/remix-navigation-bar.tsx
@@ -1,11 +1,14 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import { useAtom } from 'jotai'
 import React from 'react'
 import {
   ActiveRemixSceneAtom,
   RemixNavigationAtom,
 } from '../canvas/remix/utopia-remix-root-component'
 import { Substores, useEditorState } from './store/store-hook'
-import { FlexRow, Tooltip, UtopiaTheme, useColorTheme } from '../../uuiui'
+import { FlexRow, Tooltip, UtopiaTheme, colorTheme, useColorTheme } from '../../uuiui'
 import { stopPropagation } from '../inspector/common/inspector-utils'
 import * as EP from '../../core/shared/element-path'
 
@@ -54,53 +57,65 @@ export const RemixNavigationBar = React.memo(() => {
   return (
     <FlexRow
       style={{
-        gap: 12,
+        gap: 10,
+        alignSelf: 'stretch',
         alignItems: 'center',
-        backgroundColor: theme.inspectorBackground.value,
-        borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-        boxShadow: `3px 4px 10px 0px ${UtopiaTheme.panelStyles.shadows.medium}`,
+        justifyContent: 'center',
         pointerEvents: 'initial',
         userSelect: 'none',
-        padding: 4,
-        color: theme.fg4.value,
       }}
       onMouseDown={stopPropagation}
       onClick={stopPropagation}
     >
-      <Tooltip title={'Back'}>
+      <Tooltip title={'Back'} placement='bottom'>
         <span
           data-testid={RemixNavigationBarButtonTestId('back')}
-          style={{ cursor: 'pointer', fontSize: 16 }}
+          style={{ cursor: 'pointer', fontSize: 12 }}
+          css={{
+            '&:hover': {
+              color: colorTheme.dynamicBlue.value,
+            },
+          }}
           onMouseDown={back}
         >
           〱
         </span>
       </Tooltip>
-      <Tooltip title={'Forward'}>
+      <Tooltip title={'Forward'} placement='bottom'>
         <span
           data-testid={RemixNavigationBarButtonTestId('forward')}
-          style={{ cursor: 'pointer', fontSize: 16, transform: 'scale(-1, 1)' }}
+          style={{ cursor: 'pointer', fontSize: 12, transform: 'scale(-1, 1)' }}
+          css={{
+            '&:hover': {
+              color: colorTheme.dynamicBlue.value,
+            },
+          }}
           onMouseDown={forward}
         >
           〱
         </span>
       </Tooltip>
-      <Tooltip title={'Home'}>
+      <Tooltip title={'Home'} placement='bottom'>
         <span
           data-testid={RemixNavigationBarButtonTestId('home')}
           style={{ cursor: 'pointer', fontSize: 16 }}
+          css={{
+            '&:hover': {
+              color: colorTheme.dynamicBlue.value,
+            },
+          }}
           onMouseDown={home}
         >
-          ／
+          ⛫
         </span>
       </Tooltip>
       <div
         data-testid={RemixNavigationBarPathTestId}
         style={{
-          backgroundColor: '#f2f3f4',
-          borderRadius: 10,
-          padding: `${4}px ${12}px`,
-          fontSize: 14,
+          backgroundColor: colorTheme.bg3.value,
+          borderRadius: 20,
+          padding: '2px 10px',
+          fontSize: 11,
         }}
       >
         {label}

diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
@@ -26,14 +26,15 @@ const darkBase = {
   componentOrange: createUtopiColor('oklch(80.6% 0.15 50)'),
   componentPurple: createUtopiColor('oklch(76% 0.155 300)'),
   componentPurple05: createUtopiColor('oklch(76% 0.155 300 / 5%)'),
-  componentPurple05solid: createUtopiColor('oklch(5% 0.155 300)'),
+  componentPurple05solid: createUtopiColor('oklch(0.4 0.04 284.66)'),
   dynamicBlue: createUtopiColor('oklch(81% 0.11 241)'),
   dynamicBlue10: createUtopiColor('oklch(81% 0.11 241 / 10%)'),
   unavailable: createUtopiColor('oklch(0% 0 0 / 5%)'),
   unavailableGrey: createUtopiColor('oklch(100% 0 0 / 22%)'),
   unavailableGrey10: createUtopiColor('oklch(100% 0 0 / 10%)'),
   aqua: createUtopiColor('oklch(86% 0.135 208.71)'),
-  aqua05solid: createUtopiColor('oklch(5% 0.135 208.71)'),
+  aqua05solid: createUtopiColor('oklch(0.41 0.03 238.48)'),
+  bg510solid: createUtopiColor('oklch(0.41 0.02 269.74)'),
   bg0: createUtopiColor('#000000'),
   bg1: createUtopiColor('#181C20'),
   bg2: createUtopiColor('#20232C'),

diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
@@ -27,14 +27,15 @@ const lightBase = {
   componentOrange: createUtopiColor('oklch(68% 0.2 42)'),
   componentPurple: createUtopiColor('oklch(53% 0.31 290)'),
   componentPurple05: createUtopiColor('oklch(53.19% 0.307 289.7 / 5%)'),
-  componentPurple05solid: createUtopiColor('oklch(0.96 0.02 286)'),
+  componentPurple05solid: createUtopiColor('oklch(0.96 0.02 287)'),
   dynamicBlue: createUtopiColor('oklch(59% 0.25 254)'),
   dynamicBlue10: createUtopiColor('oklch(58.98% 0.246 254.39 / 10%)'),
   unavailable: createUtopiColor('oklch(54.52% 0 0 / 5%)'),
   unavailableGrey: createUtopiColor('oklch(0% 0 0 / 22%)'),
   unavailableGrey10: createUtopiColor('oklch(0% 0 0 / 10%)'),
   aqua: createUtopiColor('oklch(0.74 0.18 218.28)'),
-  aqua05solid: createUtopiColor('oklch(0.98 0.02 211)'),
+  aqua05solid: createUtopiColor('oklch(0.95 0.02 208.7)'),
+  bg510solid: createUtopiColor('oklch(0.95 0 0)'),
   bg0: createUtopiColor('hsl(0,0%,100%)'),
   bg1: createUtopiColor('lch(99.5 0.01 0)'),
   bg2: createUtopiColor('lch(98.0 0.01 0)'),