flow: sexier

src/client/channel.jsx

@@ -22,8 +22,8 @@ export default function Channel(props) {
             <Link
               className={classnames(
                 'channel__link',
-                {long: name.length >= 12},
-                {superlong: name.length >= 16},
+                {long: name && name.length >= 12},
+                {superlong: name && name.length >= 16},
               )}
               to={href}
             >

src/client/chat--leftFriends.jsx

@@ -37,20 +37,10 @@ export default function ChatLeftFriends() {
     >
       <form>
         <label className="friends__add">
-          Add
+          Make friends with
           <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>
 

src/client/chat--leftFriends.scss

@@ -8,7 +8,7 @@
   white-space: nowrap;
 }
 
-.friends__joinTextWrapper {
+.friends__addTextWrapper {
   align-items: center;
   display: flex;
   flex-grow: 1;
@@ -23,7 +23,9 @@
 }
 
 .friends__addText {
+  flex-grow: 1;
   padding-left: 0.25em;
+  width: 0%;
 }
 
 .friends__chatsTitle {
@@ -57,15 +59,3 @@
     }
   }
 }
-
-.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.jsx

@@ -32,13 +32,10 @@ export default function ChatLeftRooms() {
     >
       <form>
         <label className="channels__join">
-          Join
+          Start chatting at
           <span className="channels__joinTextWrapper">
             <input className="channels__joinText" placeholder="reddichat" type="text" />
           </span>
-          <button className="bar__button" type="submit">
-            <span className="bar__buttonIcon" role="img" aria-label="Join" title="Join">🚪</span>
-          </button>
         </label>
       </form>
       <h2 className="channels__chatsTitle">Favorites</h2>

src/client/chat--leftRooms.scss

@@ -25,6 +25,7 @@
 .channels__joinText {
   flex-grow: 1;
   padding-left: 0.25em;
+  width: 0%;
 }
 
 .channels__chatsTitle {
@@ -58,15 +59,3 @@
     }
   }
 }
-
-.channels__join .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--message.scss

@@ -30,7 +30,7 @@
 }
 
 .chat--message:hover {
-  background-color: #1c1c1c;
+  background-color: rgba(28, 28, 28, 0.7);
 }
 
 header {

src/client/chat--messages.scss

@@ -1,4 +1,5 @@
 .chat--messages {
+  background-image: url('./dark.png');
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/client/chat--rightUsers.jsx

@@ -36,7 +36,7 @@ export default function ChatRightUsers() {
     <div
       className="chat--rightUsers"
     >
-      <h2 className="users__chatsTitle">Users</h2>
+      <h2 className="users__chatsTitle">Users present</h2>
       <ul className="users__chatsList">
         {list.map((username) => (
           <li