From 0d7a926fa57810e51d14e62ecb529ab3f3a4a8d6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Aug 2020 17:07:07 -0500
Subject: [PATCH] Chats: Style the chat boxes

---
 .../features/chats/components/chat_panes.js   | Bin 2362 -> 2848 bytes
 app/styles/chats.scss                         |  39 +++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index a6b8bd36bf142acd56f3c33ed506afb56265d2fc..d99a6b371c5763ec19556be5a6a56b27429872d1 100644
GIT binary patch
delta 707
zcmbVKL2DC16lM)wOHQStr&3-ZWp-`MCN0vKG{qJX41$Mvu#}RFv(sc?GqdbWO49A1
zKS1bV=-r<n<R<<D58l0a^y)v*$vPr<P;d^z%zWSX-uvF0_v>%(yj$~1Q3Phq`(QqK
z)ghatB2#d9jup<}EE5wzQsDHZm_<ZbkW;Q?gbN&X%8s7{CPY1+CJE?2R8z$gD<DKn
zt#a|r>v<+E-8N54)mKDtsUXFi%11UKbPH{-ALM1Qs{q<?Qd|IXAY-fsEN%mOFz*Z2
z>h00z$Bo%u>)8=OHIND`YC(}wjzHJ`r91v#;a_#9Ht*tV>B@8VoONq%>8C!T>In}{
z(9(;o895l8hMl5bb_PLZ3Bu(iR2&*YM%6Uqz-@~=<%0OLc^Mmxm5m+jwC=-Q2pDWb
zGYsv%<2B5im0hrHnJ2WH=TLClFs$aqNvE?RXl*J!m@g~0w)WlBUCwUq4jLr8umPGa
z4UzeNb7MPZGEMOO9>)_p82oZ@@NlUpenH^gLTx_!8z%H?mHn8V|1KrPam@J04y)Nn
xXLeZnz`U@`t5syK{czKUCv+^5m}Xtnr#uD>6DlPh(R#gZUaxL0KKsKPKL8Do<l6uM

delta 236
zcmZ1=wo7P(0OMp~#y!mX`U;cJGpcM3V{&Jlynxxv2q=)8pI2O>P>`6HTI`ZolBi&-
zkXDqR>lLg~&846KlvjYrSt&$=`IG-MiyCB9hL;<-rzWQuhkJN?tLrEfmn4>?S}CaK
z7o_H?E7a=1w8lbMo7b`QGm2%VDQGArXC#(rDio!blosVF<dx>+Oy0|8JXwI<Sg9H$
zrI(&s;+dxrt)7^ioL`z(0yG=MEK!futmT?~kV|6nId)C3KO{J0CRcMQPLAf#oV<ri
KbMsk_U?u>HO-AGZ

diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 8994bfe27a..8cfe065327 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -1,24 +1,61 @@
 .pane {
+  @include standard-panel-shadow;
   position: fixed;
   bottom: 0;
   right: 20px;
   width: 265px;
+  height: 265px;
+  max-height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
   z-index: 99999;
 
+  &--main {
+    height: calc(100vh - 70px);
+  }
+
   &__header {
     background: var(--brand-color);
     color: #fff;
     padding: 6px 10px;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: bold;
     border-radius: 6px 6px 0 0;
+    display: flex;
+    align-items: center;
+
+    .account__avatar {
+      margin-right: 7px;
+    }
+
+    .display-name__account {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   &__content {
+    height: 100%;
     background: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
   }
 
   &__actions {
     background: var(--foreground-color);
+    margin-top: auto;
+
+    input {
+      width: 100%;
+      margin: 0;
+      box-sizing: border-box;
+      padding: 6px;
+      background: var(--background-color);
+      border: 6px solid var(--foreground-color);
+      border-radius: 10px;
+      color: var(--primary-text-color);
+      font-size: 16px;
+    }
   }
 }