Merge pull request #1418 from matildepark/matilde-chat-css

Chat CSS polish - members page & message box

pkg/interface/chat/package-lock.json

@@ -1609,7 +1609,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1630,12 +1631,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1650,17 +1653,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1777,7 +1783,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1789,6 +1796,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1803,6 +1811,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1810,12 +1819,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1834,6 +1845,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1914,7 +1926,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1926,6 +1939,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2011,7 +2025,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2047,6 +2062,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2066,6 +2082,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2109,12 +2126,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

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

@@ -4,6 +4,7 @@ p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
   -webkit-margin-before: unset;
   -webkit-margin-after: unset;
   font-family: Inter, sans-serif;
+  padding: 0;
 }
 
 textarea, select, input, button {
@@ -118,3 +119,11 @@ h2 {
 .lh-16 {
   line-height: 16px;
 }
+
+.mono {
+  font-family: "Source Code Pro", monospace;
+}
+
+.label-small-mono.list-ship {
+  line-height: 29px;
+}

pkg/interface/chat/src/js/components/lib/chat-input.js

@@ -161,7 +161,7 @@ export class ChatInput extends Component {
         </div>
         <div className="fr h-100 flex" style={{ flexGrow: 1, height: 40 }}>
           <input className="ml2 bn"
-            style={{ flexGrow: 1 }}
+            style={{ flexGrow: 1, height: 40 }}
             ref={this.textareaRef}
             placeholder={props.placeholder}
             value={state.message}

pkg/interface/chat/src/js/components/lib/member-element.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
+import { Sigil } from '/components/lib/icons/sigil';
 
 
 export class MemberElement extends Component {
@@ -23,7 +24,7 @@ export class MemberElement extends Component {
       `~${window.ship}` === props.host) {
       actionElem = (
         <a onClick={this.onRemove.bind(this)}
-           className="w-40 dib underline black btn-font">
+           className="w-40 dib list-ship black underline label-small-mono pointer">
            Remove
         </a>
       );
@@ -34,10 +35,11 @@ export class MemberElement extends Component {
     }
 
     return (
-      <div>
+      <div className="flex mb2">
+        <Sigil ship={props.ship} size={32} />
         <p
           className={
-            "w-60 dib black pr3 mb2 label-small-mono label-regular"
+            "w-60 dib v-mid black pr3 ml2 nowrap label-small-mono list-ship label-regular"
           }>
           {props.ship}
         </p>

pkg/interface/chat/src/js/components/member.js

@@ -83,7 +83,7 @@ export class MemberScreen extends Component {
     );
 
 
-    let inviteButtonClasses = "label-regular underline black btn-font pointer";
+    let inviteButtonClasses = "label-regular black btn-font pointer";
     if (!this.state.error) {
       inviteButtonClasses = inviteButtonClasses + ' black';
     }
@@ -113,7 +113,7 @@ export class MemberScreen extends Component {
               </p>
               <textarea
                 ref={ e => { this.textarea = e; } }
-                className="w-80 db ba overflow-y-hidden gray mb2"
+                className="w-80 db ba overflow-y-hidden mono gray mb2"
                 style={{
                   resize: 'none',
                   height: 150
@@ -122,7 +122,7 @@ export class MemberScreen extends Component {
               <button
                 onClick={this.inviteMembers.bind(this)}
                 className={inviteButtonClasses}>
-                Invite
+                -> Invite
               </button>
               {errorElem}
               {successElem}

pkg/interface/chat/src/js/components/new.js

@@ -185,7 +185,7 @@ export class NewScreen extends Component {
           </p>
           <textarea
             ref={ e => { this.textarea = e; } }
-            className="body-regular fw-normal ba pa2 mb2 db w-100"
+            className="body-regular mono fw-normal ba pa2 mb2 db w-100"
             placeholder="~zod, ~bus"
             style={{
               resize: 'none',