Toolbar Update (#5785)

* style changes * padding * align toolbar with panes * account for indicator arrow
concrete-utopia · May 30, 2024 · 6be7ad6 · 6be7ad6
1 parent 551149f
commit 6be7ad6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 24 deletions.
diff --git a/editor/src/components/canvas/canvas-floating-toolbars.tsx b/editor/src/components/canvas/canvas-floating-toolbars.tsx
@@ -33,7 +33,7 @@ export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSPrope
           top: 0,
           alignItems: 'flex-start',
           justifyContent: 'space-between',
-          padding: 10,
+          padding: 6,
           width: '100%',
           height: '100%',
         }}

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -380,21 +380,23 @@ export const CanvasToolbar = React.memo(() => {
 
   const wrapInSubmenu = React.useCallback((wrapped: React.ReactNode) => {
     return (
-      <FlexRow
+      <FlexColumn
         data-testid='canvas-toolbar-submenu'
         style={{
-          marginLeft: 8,
-          height: 32,
+          height: 38,
           overflow: 'hidden',
+          justifyContent: 'flex-end',
           backgroundColor: colorTheme.bg1subdued.value,
-          borderRadius: '0px 10px 10px 10px',
+          borderRadius: '0 0 6px 6px',
           boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
           pointerEvents: 'initial',
           zIndex: -1, // it sits below the main menu row, but we want the main menu's shadow to cast over this one
+          //to make the submenu appear visually underneath the corners of the main menu
+          marginTop: -6,
         }}
       >
-        {wrapped}
-      </FlexRow>
+        <FlexRow style={{ height: 32 }}>{wrapped}</FlexRow>
+      </FlexColumn>
     )
   }, [])
 
@@ -440,14 +442,15 @@ export const CanvasToolbar = React.memo(() => {
         id={CanvasToolbarId}
         style={{
           backgroundColor: theme.inspectorBackground.value,
-          borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
+          borderRadius: 6,
           overflow: 'hidden',
           boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
           pointerEvents: 'initial',
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          padding: '0 6px 0 8px',
+          padding: 3,
+          gap: 8,
         }}
       >
         <Tooltip title='Edit' placement='bottom'>
@@ -458,7 +461,6 @@ export const CanvasToolbar = React.memo(() => {
             onClick={dispatchSwitchToSelectModeCloseMenus}
             keepActiveInLiveMode
             testid={CanvasToolbarEditButtonID}
-            style={{ width: 36 }}
           />
         </Tooltip>
         {when(
@@ -471,7 +473,6 @@ export const CanvasToolbar = React.memo(() => {
                 primary={canvasToolbarMode.primary === 'text'}
                 onClick={insertTextCallback}
                 keepActiveInLiveMode
-                style={{ width: 36 }}
               />
             </Tooltip>
             <Tooltip title='Insert' placement='bottom'>
@@ -482,7 +483,6 @@ export const CanvasToolbar = React.memo(() => {
                 primary={canvasToolbarMode.primary === 'insert'}
                 onClick={toggleInsertButtonClicked}
                 keepActiveInLiveMode
-                style={{ width: 36 }}
               />
             </Tooltip>
           </>,
@@ -495,12 +495,11 @@ export const CanvasToolbar = React.memo(() => {
             primary={canvasToolbarMode.primary === 'play'}
             onClick={toggleLiveMode}
             keepActiveInLiveMode
-            style={{ width: 36 }}
           />
         </Tooltip>
         {when(
           canComment,
-          <div style={{ display: 'flex', width: 36 }}>
+          <div style={{ display: 'flex', width: 26 }}>
             <Tooltip title={commentButtonTooltip} placement='bottom'>
               <InsertModeButton
                 testid={commentButtonTestId}
@@ -509,7 +508,6 @@ export const CanvasToolbar = React.memo(() => {
                 primary={canvasToolbarMode.primary === 'comment'}
                 onClick={toggleCommentMode}
                 keepActiveInLiveMode
-                style={{ width: 36 }}
                 disabled={commentButtonDisabled}
               />
             </Tooltip>
@@ -522,9 +520,8 @@ export const CanvasToolbar = React.memo(() => {
         <Tooltip title='Zoom to 100%' placement='bottom'>
           <SquareButton
             style={{
-              height: 32,
               width: 'min-content',
-              padding: '0 8px',
+              padding: '0 4px',
             }}
             css={{
               '&:hover': {
@@ -724,7 +721,7 @@ const InsertModeButton = React.memo((props: InsertModeButtonProps) => {
   return (
     <SquareButton
       data-testid={props.testid}
-      style={{ height: 32, width: 32, ...props.style }}
+      style={{ height: 26, width: 26, borderRadius: 3, ...props.style }}
       primary={primary}
       spotlight={secondary}
       highlight
@@ -768,7 +765,7 @@ const Separator = React.memo((props) => {
         width: 1,
         height: 16,
         alignSelf: 'center',
-        margin: '0 8px',
+        margin: '0 4px',
         backgroundColor: colorTheme.seperator.value,
       }}
     ></div>

diff --git a/editor/src/components/editor/elements-outside-visible-area-indicator.tsx b/editor/src/components/editor/elements-outside-visible-area-indicator.tsx
@@ -44,9 +44,7 @@ export const ElementsOutsideVisibleAreaIndicator = React.memo(() => {
         style={{
           textAlign: 'center',
           width: 'min-content',
-          minWidth: 32,
-          height: 32,
-          padding: '0 8px',
+          padding: '0 8px 0px 2px',
           position: 'relative',
           color: colorTheme.dynamicBlue.value,
         }}

diff --git a/editor/src/components/editor/remix-navigation-bar.tsx b/editor/src/components/editor/remix-navigation-bar.tsx
@@ -180,10 +180,11 @@ export const RemixNavigationBar = React.memo(() => {
         style={{
           backgroundColor: colorTheme.bg3.value,
           borderRadius: 20,
-          padding: '2px 10px',
+          padding: '2px 2px 2px 6px',
           fontSize: 11,
           minWidth: 150,
-          height: '30px',
+          height: 20,
+          alignItems: 'center',
         }}
       >
         <StringInput