chat-fe: add profile overlay

Adds a profile overlay to display information about the user on hover.
Also adds the svgClass prop to the sigil component, to allow setting
classes directly on the sigil svg.

pkg/interface/chat/src/css/custom.css

@@ -169,6 +169,14 @@ h2 {
   border-radius: 100%;
 }
 
+.shadow-6 {
+  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+.brt2 {
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
 /* responsive */
 
 @media all and (max-width: 34.375em) {

pkg/interface/chat/src/js/components/lib/icons/sigil.js

@@ -22,7 +22,8 @@ export class Sigil extends Component {
             patp: props.ship,
             renderer: reactRenderer,
             size: props.size,
-            colors: [props.color, "white"]
+            colors: [props.color, "white"],
+            class: props.svgClass
           })}
         </div>
       );

pkg/interface/chat/src/js/components/lib/message.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Sigil } from '/components/lib/icons/sigil';
+import { ProfileOverlay } from '/components/lib/profile-overlay';
 import classnames from 'classnames';
 import { Route, Link } from 'react-router-dom'
 import { uxToHex, cite, writeText } from '/lib/util';
@@ -163,11 +164,12 @@ export class Message extends Component {
       return (
         <div
           className={
-            "w-100 f8 pl3 pt4 pr3 cf flex lh-copy " + " " + pending
+            "relative w-100 f8 pl3 pt4 pr3 cf flex lh-copy " + " " + pending
           }
           style={{
             minHeight: "min-content"
           }}>
+          <ProfileOverlay ship={props.msg.author} name={contact.nickname} color={color} />
           <div className="fl mr3 v-top bg-white bg-gray0-d">
             <Sigil
               ship={props.msg.author}

pkg/interface/chat/src/js/components/lib/profile-overlay.js

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import { Sigil } from "/components/lib/icons/sigil";
+
+export class ProfileOverlay extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    const { name, ship, color } = this.props;
+    return (
+      <div
+        style={{ top: "-250px" }}
+        className="flex-col shadow-6 br2 bg-white inter absolute z-1 f9 lh-solid"
+      >
+        <div style={{ height: "160px" }}>
+          <Sigil
+            ship={ship}
+            size={160}
+            color={color}
+            classes="brt2"
+            svgClass="brt2"
+          />
+        </div>
+        <div className="pv3 pl3 pr2">
+          {name && <div className="b">{name}</div>}
+          <div className="mono gray2">{`~${ship}`}</div>
+          <div className="b--green0 b--solid bw1 green2 mt3 tc pa2 pointer">
+            Send Message
+          </div>
+        </div>
+      </div>
+    );
+  }
+}