From a2d1a5ad8b6b866e92d21129e8d7f589655846f6 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Mon, 13 Jul 2020 04:07:47 -0500
Subject: [PATCH] flow: buildin

---
 src/client/chat--channels.jsx  | 15 +++++++++++
 src/client/chat--channels.scss | 46 +++++++++++++++++++++++++++++++++-
 src/client/chat--users.scss    |  7 +++++-
 src/client/chat.scss           |  3 ++-
 src/client/index.scss          |  2 +-
 5 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/client/chat--channels.jsx b/src/client/chat--channels.jsx
index 7216aa0..861bfaa 100644
--- a/src/client/chat--channels.jsx
+++ b/src/client/chat--channels.jsx
@@ -51,6 +51,21 @@ export default function ChatChannels() {
           }
         </ul>
       </Bar>
+      <label className="channel__join">
+        Join
+        <span className="channel__joinTextWrapper">
+          <input className="channel__joinText" placeholder="reddichat" type="text" />
+        </span>
+      </label>
+      <h2 className="channel__chatsTitle">Chats</h2>
+      <ul className="channel__chatsList">
+        <li>
+          <a href="/chat/u/cha0s">cha0s</a>
+        </li>
+        <li>
+          <a href="/chat/u/BabeHasHiccups">BabeHasHiccups</a>
+        </li>
+      </ul>
     </div>
   );
 }
diff --git a/src/client/chat--channels.scss b/src/client/chat--channels.scss
index 185d353..1feebf3 100644
--- a/src/client/chat--channels.scss
+++ b/src/client/chat--channels.scss
@@ -1,9 +1,10 @@
 .channels {
   background-color: #373737;
+  transition: 0.2s width;
 }
 
 .channels--open {
-  flex-basis: 18em;
+  width: 18em;
 }
 
 .channels__buttons {
@@ -56,3 +57,46 @@
   font-size: 0.7em;
 }
 
+.channel__join[class] {
+  background-color: #272727;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.channel__joinTextWrapper::before {
+  content: '/r/';
+  font-size: 0.9em;
+  padding-right: 0.25em;
+}
+
+.channel__joinText {
+  padding-left: 0.25em;
+}
+
+.channel__chatsTitle {
+  font-family: var(--title-font-family);
+  font-size: 0.8em;
+  padding: 1.5em 1em 1.25em;
+  text-transform: uppercase;
+}
+
+.channel__chatsList li {
+  &:nth-of-type(even) {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  &:nth-of-type(odd) {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.channel__chatsList a {
+  color: #dddddd;
+  display: block;
+  font-family: var(--thick-title-font-family);
+  padding: 1em;
+  text-decoration: none;
+  &:hover {
+    background-color: #444;
+    color: #ffffff;
+  }
+}
diff --git a/src/client/chat--users.scss b/src/client/chat--users.scss
index 99a8268..2fe5944 100644
--- a/src/client/chat--users.scss
+++ b/src/client/chat--users.scss
@@ -1,9 +1,14 @@
 .users {
   background-color: #373737;
+  transition: 0.2s width;
+}
+
+.users .bar--vertical {
+  float: right;
 }
 
 .users--open {
-  flex-basis: 18em;
+  width: 18em;
 }
 
 .users__buttons {
diff --git a/src/client/chat.scss b/src/client/chat.scss
index fa5be99..3548a25 100644
--- a/src/client/chat.scss
+++ b/src/client/chat.scss
@@ -6,7 +6,8 @@
 
 .chat--flexed {
   height: 100%;
-  flex-basis: 4em;
+  width: 4em;
+  overflow: hidden;
 }
 
 .chat__messages {
diff --git a/src/client/index.scss b/src/client/index.scss
index 0193d90..76c57c3 100644
--- a/src/client/index.scss
+++ b/src/client/index.scss
@@ -81,7 +81,7 @@ label {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  font-family: "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+  font-family: var(--thick-title-font-family);
   font-size: 1em;
   min-height: 3em;
   padding: 0.5em 0.5em 0.5em 1em;