feat: add button

src/client/chat--leftFriends.jsx

@@ -35,12 +35,25 @@ export default function ChatLeftFriends() {
     <div
       className="chat--leftFriends"
     >
-      <label className="friends__add">
+      <form>
-        Add
+        <label className="friends__add">
-        <span className="friends__addTextWrapper">
+          Add
-          <input className="friends__addText" placeholder="cha0s" type="text" />
+          <span className="friends__addTextWrapper">
-        </span>
+            <input className="friends__addText" placeholder="cha0s" type="text" />
-      </label>
+          </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) => (

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;
+  }
+}

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;
 }