Started styling of chatbox to match rest of JupyterLab

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "/Users/cameronoelsen/Documents/jupyterlab/packages/jupyterlab-google-drive"]
+	path = /Users/cameronoelsen/Documents/jupyterlab/packages/jupyterlab-google-drive
+	url = https://github.com/jupyterlab/jupyterlab-google-drive.git

packages/chatbox/src/entry.ts

@@ -28,6 +28,16 @@ const CHAT_ENTRY_CLASS = 'jp-ChatEntry';
  */
 const CHAT_BADGE_CLASS = 'jp-ChatEntry-badge';
 
+/**
+ * The class name added to other user's chatbox entries
+ */
+const CHAT_ENTRY_RECEIVED_CLASS = 'jp-ChatEntry-receieved';
+
+/**
+ * The class name added to other user's chatbox badges
+ */
+const CHAT_BADGE_RECEIVED_CLASS = 'jp-ChatEntry-received-badge';
+
 
 /**
  * A chat entry widget, which hosts a user badge and a markdown cell.
@@ -59,13 +69,20 @@ class ChatEntry extends Widget {
     this.cell = options.cell;
 
     if (!options.isMe) {
-      this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
-      this.cell.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
+      this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
+      this.cell.node.style.border = "1px solid " + `rgba(${r}, ${g}, ${b}, 1)`;
+      this._badge.addClass(CHAT_BADGE_RECEIVED_CLASS);
+      this.cell.addClass(CHAT_ENTRY_RECEIVED_CLASS);
     }
 
     let layout = this.layout as PanelLayout;
-    layout.addWidget(this._badge);
-    layout.addWidget(this.cell);
+    if (options.isMe) {
+      layout.addWidget(this.cell);
+      layout.addWidget(this._badge);
+    } else {
+      layout.addWidget(this._badge);
+      layout.addWidget(this.cell);
+    }
   }
 
   /**

packages/chatbox/style/index.css

@@ -19,7 +19,9 @@
 
 .jp-ChatboxPanel .jp-ChatboxDocumentInfo {
   display: flex;
-  padding: 5px;
+  padding: 8px;
+  background: var(--md-grey-100);
+  border-bottom: 1px solid VAR(--jp-border-color1);
 }
 
 .jp-ChatboxPanel .jp-ChatboxDocumentInfo-name {
@@ -35,7 +37,7 @@
 }
 
 .jp-Chatbox-content {
-  background-color: var(--jp-layout-color2);
+  background-color: var(--jp-layout-color0);
   flex: 1 1 auto;
   overflow: auto;
 }
@@ -63,20 +65,32 @@
 
 .jp-Chatbox .jp-ChatEntry .p-Widget {
   cursor: move;
+  border: 1px solid var(--md-grey-400);
 }
 
 .jp-Chatbox .jp-ChatEntry {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: 2px;
+  align-items: baseline;
+  padding: 4px 8px;
 }
 
 .jp-Chatbox .jp-ChatEntry-badge {
   background-color: var(--jp-layout-color1);
-  border-radius: 10px;
-  padding: 2px;
-  min-width: 22px;
+  border-radius: 16px;
+  height: 28px;
+  width: 28px;
+  text-align: center;
+  line-height: 1.8;
+}
+
+.jp-ChatEntry-receieved {
+  background-color: var(--md-grey-100);
+}
+
+.p-Widget.jp-ChatEntry-badge.jp-ChatEntry-received-badge {
+  color: var(--jp-layout-color1);
+  margin-right: 4px;
 }
 
 .jp-Chatbox-content .jp-InputArea {

packages/jupyterlab-google-drive

@@ -0,0 +1 @@
+Subproject commit 946507dbb97db56680c8ebc1f48236e11c88a912