feat(json-crdt-peritext-ui): 🎸 improve context menu header presentation

Author: streamich

src/json-crdt-peritext-ui/components/ContextHeader.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {drule, useTheme} from 'nano-theme';
+
+const blockClass = drule({
+  pd: '8px 20px',
+});
+
+export interface ContextHeaderProps extends React.AllHTMLAttributes<any> {
+  compact?: boolean;
+  children?: React.ReactNode;
+}
+
+export const ContextHeader: React.FC<ContextHeaderProps> = ({compact, children, ...rest}) => {
+  const theme = useTheme();
+
+  const className =
+    (rest.className || '') +
+    blockClass({
+      bg: theme.g(0, 0.05),
+    });
+
+  const style: React.CSSProperties = {
+    padding: compact ? '8px' : void 0,
+    ...rest.style,
+  };
+
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+};

src/json-crdt-peritext-ui/components/ContextPaneHeader.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import {ContextHeader} from 'nice-ui/lib/4-card/ContextMenu/ContextHeader';
+import {ContextHeader} from './ContextHeader';
 import {BasicButtonBack} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonBack';
 import {BasicButtonClose} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose';
 import {Flex} from 'nice-ui/lib/3-list-item/Flex';
+import {Split} from 'nice-ui/lib/3-list-item/Split';
 
 export interface ContextPaneHeaderProps {
+  short?: boolean;
   children?: React.ReactNode;
   onBackClick?: React.MouseEventHandler;
   onCloseClick?: React.MouseEventHandler;
 }
 
-export const ContextPaneHeader: React.FC<ContextPaneHeaderProps> = ({children, onBackClick, onCloseClick}) => {
+export const ContextPaneHeader: React.FC<ContextPaneHeaderProps> = ({short, children, onBackClick, onCloseClick}) => {
   let element = (
     <Flex style={{alignItems: 'center'}}>
       {!!onBackClick && <BasicButtonBack onClick={onBackClick} />}
@@ -20,15 +22,15 @@ export const ContextPaneHeader: React.FC<ContextPaneHeaderProps> = ({children, o
 
   if (onCloseClick) {
     element = (
-      <Flex style={{alignItems: 'center'}}>
+      <Split style={{alignItems: 'center'}}>
         {element}
         {!!onCloseClick && <BasicButtonClose onClick={onCloseClick} />}
-      </Flex>
+      </Split>
     );
   }
 
   return (
-    <ContextHeader compact>
+    <ContextHeader style={{padding: short ? '12px 16px' : '16px'}}>
       {element}
     </ContextHeader>
   );

src/json-crdt-peritext-ui/components/ContextPaneHeaderSep.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {useStyles} from 'nice-ui/lib/styles/context';
+
+export interface ContextPaneHeaderSepProps {}
+
+export const ContextPaneHeaderSep: React.FC<ContextPaneHeaderSepProps> = () => {
+  const style = useStyles();
+
+  return (
+    <div style={{background: style.g(0, 0.05), width: '100%', height: '8px'}}>
+      <div style={{background: style.col.mapped('bg') + '', borderRadius: '8px 8px 0 0', width: '100%', height: '8px'}} />
+    </div>
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/config/NewLinkConfig.tsx

@@ -13,26 +13,35 @@ import {BasicButtonClose} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButt
 import {UrlDisplayCard} from '../cards/UrlDisplayCard';
 import {rule} from 'nano-theme';
 import {parseUrl} from '../../../web/util';
+import {ContextPaneHeaderSep} from '../../../components/ContextPaneHeaderSep';
 import type {SliceConfigState} from '../state/types';
 
 const headerClass = rule({
+  d: 'flex',
+  ai: 'center',
   fz: '14px',
   us: 'none',
-  pdb: '8px',
 });
 
 const iconClass = rule({
-  transform: 'scale(.8)',
   fz: '14px',
   w: '28px',
   h: '28px',
   bdrad: '6px',
+  pd: '0',
+  mr: '0 8px 0 0',
   d: 'flex',
   ai: 'center',
   jc: 'center',
   bg: 'rgba(0,0,0,.1)',
   o: .7,
-  mr: '0 6px 0 4px',
+  '&>div': {
+    transform: 'scale(.9)',
+    transformOrigin: 'center',
+    d: 'flex',
+    ai: 'center',
+    jc: 'center',
+  },
 });
 
 export interface NewLinkConfigProps {
@@ -57,12 +66,12 @@ export const NewLinkConfig: React.FC<NewLinkConfigProps> = ({config, onSave}) =>
       e.preventDefault();
       onSave();
     }}>
-      <ContextPaneHeader onCloseClick={() => toolbar.newSliceConfig.next(void 0)}>
+      <ContextPaneHeader short onCloseClick={() => toolbar.newSliceConfig.next(void 0)}>
         <div className={headerClass}>
           {icon ? (
             <Flex style={{alignItems: 'center'}}>
               <div className={iconClass}>
-                {icon}
+                <div>{icon}</div>
               </div>
               {name}
             </Flex>
@@ -71,8 +80,7 @@ export const NewLinkConfig: React.FC<NewLinkConfigProps> = ({config, onSave}) =>
           )}
         </div>
       </ContextPaneHeader>
-
-      <div style={{background: '#fff', borderRadius: '8px 8px 0 0', margin: '-8px 0 -8px', width: '100%', height: '8px'}} />
+      <ContextPaneHeaderSep />
 
       <div style={{padding: '16px'}}>
         <CollaborativeInput str={href} input={(ref) => (