From 241482ca7db2fe1df13f7b484feeaf042ba498ba Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 18 Jul 2020 07:57:24 -0500
Subject: [PATCH] feat: add button

---
 src/client/chat--leftFriends.jsx  | 25 +++++++++++++++++++------
 src/client/chat--leftFriends.scss | 20 ++++++++++++++++++++
 src/client/chat--leftRooms.scss   |  2 ++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/client/chat--leftFriends.jsx b/src/client/chat--leftFriends.jsx
index af3407b..3b329df 100644
--- a/src/client/chat--leftFriends.jsx
+++ b/src/client/chat--leftFriends.jsx
@@ -35,12 +35,25 @@ export default function ChatLeftFriends() {
     <div
       className="chat--leftFriends"
     >
-      <label className="friends__add">
-        Add
-        <span className="friends__addTextWrapper">
-          <input className="friends__addText" placeholder="cha0s" type="text" />
-        </span>
-      </label>
+      <form>
+        <label className="friends__add">
+          Add
+          <span className="friends__addTextWrapper">
+            <input className="friends__addText" placeholder="cha0s" type="text" />
+          </span>
+          <button className="bar__button" type="submit">
+            <span
+              className="bar__buttonIcon"
+              role="img"
+              aria-label="Add friend"
+              title="Add friend"
+            >
+              👌
+            </span>
+          </button>
+        </label>
+      </form>
+
       <h2 className="friends__chatsTitle">Favorites</h2>
       <ul className="friends__chatsList">
         {favorites.map((channel) => (
diff --git a/src/client/chat--leftFriends.scss b/src/client/chat--leftFriends.scss
index 70b8988..8a9ab4f 100644
--- a/src/client/chat--leftFriends.scss
+++ b/src/client/chat--leftFriends.scss
@@ -1,11 +1,19 @@
 @import '~/client/scss/colors.scss';
 
 .friends__add[class] {
+  align-items: center;
   background-color: #272727;
+  flex-direction: row;
   flex-wrap: nowrap;
   white-space: nowrap;
 }
 
+.friends__joinTextWrapper {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+}
+
 .friends__addTextWrapper::before {
   content: '/u/';
   font-size: 0.8em;
@@ -49,3 +57,15 @@
     }
   }
 }
+
+.friends__add .bar__button {
+  background: none;
+  border: none;
+  margin: 0 0 0 0.45em;
+  padding: 0;
+  width: 2em;
+  height: 2em;
+  &:hover {
+    background-color: #444;
+  }
+}
diff --git a/src/client/chat--leftRooms.scss b/src/client/chat--leftRooms.scss
index 4bc45cd..45289c7 100644
--- a/src/client/chat--leftRooms.scss
+++ b/src/client/chat--leftRooms.scss
@@ -1,7 +1,9 @@
 @import '~/client/scss/colors.scss';
 
 .channels__join[class] {
+  align-items: center;
   background-color: #272727;
+  flex-direction: row;
   flex-wrap: nowrap;
   white-space: nowrap;
 }