feat(react): Change the expand icon to have the arrows point inwards if expand is disabled

packages/react/components/Editor/components/HeaderMenu.mjs

@@ -11,6 +11,7 @@ import { ViewIcon, viewLabels } from './views/index.mjs'
 import { Tooltip } from './Tooltip.mjs'
 import {
   AsideIcon,
+  CompactIcon,
   DetailIcon,
   ExpandIcon,
   ExportIcon,
@@ -336,9 +337,11 @@ export const HeaderMenuDraftViewIcons = (props) => {
           }
           tooltip="Turns Expand on or off (see Core Settings)"
         >
-          <ExpandIcon
+          {[false, 0, '0'].includes(settings.expand) ? (
-            className={`${size} ${[false, 0, '0'].includes(settings.expand) ? style.custom : style.dflt}`}
+            <CompactIcon className={`${size} ${style.custom}`} />
-          />
+          ) : (
+            <ExpandIcon className={`${size} ${style.dflt}`} />
+          )}
         </Button>
       ) : null}
       <HeaderMenuIconSpacer />

packages/react/components/Icon/index.mjs

@@ -143,6 +143,13 @@ export const CodeIcon = (props) => (
   </IconWrapper>
 )
 
+// Looks like arrows pointing inwards
+export const CompactIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="m15 15v4.5m0-4.5h4.5m-15.8-11.3 5.25 5.25m6 0v-4.5m0 4.5h4.5m-15.8 11.3 5.25-5.25h-4.5m4.5 0v4.5m11.3-15.8-5.25 5.25m-6 0h-4.5m4.5 0v-4.5m11.3 15.8-5.25-5.25" />
+  </IconWrapper>
+)
+
 // FIXME
 export const CompareIcon = (props) => (
   <IconWrapper {...props}>