Merge pull request #3734 from urbit/mp/interface/sigil-icons

interface: use icon sigils for <16px renders

pkg/interface/src/logic/lib/sigil.js

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import { sigil, reactRenderer } from '@tlon/sigil-js';
+import { Box } from '@tlon/indigo-react';
 
 export const foregroundFromBackground = (background) => {
   const rgb = {
@@ -11,30 +12,42 @@ export const foregroundFromBackground = (background) => {
   const whiteBrightness = 255;
 
   return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
-}
+};
 
-export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '', icon = false }) => {
+export const Sigil = memo(({ classes = '', color, foreground = '', ship, size, svgClass = '', icon = false, padded = false }) => {
+  const padding = (icon && padded) ? '2px' : '0px';
+  const innerSize = (icon && padded) ? (Number(size) - 4) : size;
+  const foregroundColor = foreground ? foreground : foregroundFromBackground(color);
   return ship.length > 14
-    ? (<div
-      className={'bg-black dib ' + classes}
-      style={{ width: size, height: size }}>
-    </div>)
-    : (<div
-      className={'dib ' + classes}
-      style={{ flexBasis: size, backgroundColor: color }}
-    >
+    ? (<Box
+        backgroundColor='black'
+        borderRadius={icon ? '1' : '0'}
+        display='inline-block'
+        height={size}
+        width={size}
+       />) : (
+       <Box
+        display='inline-block'
+        borderRadius={icon ? '1' : '0'}
+        flexBasis={size}
+        backgroundColor={color}
+        padding={padding}
+        className={classes}
+       >
       {sigil({
         patp: ship,
         renderer: reactRenderer,
-        size: size,
+        size: innerSize,
         icon,
         colors: [
           color,
-          foregroundFromBackground(color)
+          foregroundColor
         ],
         class: svgClass
       })}
-    </div>)
-})
+    </Box>);
+});
+
+Sigil.displayName = 'Sigil';
 
 export default Sigil;

pkg/interface/src/views/apps/chat/components/ChatInput.tsx

@@ -185,6 +185,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
         size={16}
         color={`#${color}`}
         classes={sigilClass}
+        icon
         />;
 
     return (
@@ -197,6 +198,7 @@ export default class ChatInput extends Component<ChatInputProps, ChatInputState>
         borderTopColor='washedGray'
         backgroundColor='white'
         className='cf'
+        zIndex='0'
       >
         <div className="pa2 flex items-center">
           {avatar}

pkg/interface/src/views/apps/chat/components/overlay-sigil.js

@@ -64,6 +64,8 @@ export class OverlaySigil extends PureComponent {
         size={16}
         color={props.color}
         classes={props.sigilClass}
+        icon
+        padded
         />;
 
      return (

pkg/interface/src/views/components/StatusBar.js

@@ -40,7 +40,7 @@ const StatusBar = (props) => {
       </Row>
       <Row justifyContent="flex-end" collapse>
         <StatusBarItem onClick={() => props.history.push('/~profile')}>
-          <Sigil ship={props.ship} size={24} color={"#000000"} classes="dib mix-blend-diff" />
+          <Sigil ship={props.ship} size={16} color='black' classes='mix-blend-diff' icon />
           <Text ml={2} display={["none", "inline"]} fontFamily="mono">~{props.ship}</Text>
         </StatusBarItem>
       </Row>

pkg/interface/src/views/components/leap/OmniboxResult.js

@@ -36,7 +36,7 @@ export class OmniboxResult extends Component {
     } else if (icon === 'logout') {
       graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' color={iconFill} />;
     } else if (icon === 'profile') {
-      graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />;
+      graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} icon padded />;
     } else if (icon === 'home') {
       graphic = <Icon display='inline-block' verticalAlign='middle' icon='Circle' mr='2' size='16px' color={iconFill} />;
     } else {