flow: icons & small tweaks

src/client/chat--channels.jsx

@@ -43,7 +43,13 @@ export default function ChatChannels() {
                   }}
                   type="button"
                 >
-                  <span role="img" aria-label={label}>{emoji}</span>
+                  <span
+                    className="channels__buttonIcon"
+                    role="img"
+                    aria-label={label}
+                  >
+                    {emoji}
+                  </span>
                   <span className="channels__buttonText">{label}</span>
                 </button>
               </li>

src/client/chat--channels.scss

@@ -53,6 +53,10 @@
   }
 }
 
+.channels__buttonIcon {
+  display: flow-root;
+}
+
 .channels__buttonText {
   font-size: 0.7em;
 }
@@ -65,8 +69,10 @@
 
 .channel__joinTextWrapper::before {
   content: '/r/';
-  font-size: 0.9em;
-  padding-right: 0.25em;
+  font-size: 0.8em;
+  padding: 0 0.25em 0 0.5em;
+  position: relative;
+  top: 1px;
 }
 
 .channel__joinText {

src/client/chat--users.jsx

@@ -38,7 +38,13 @@ export default function ChatUsers() {
                   }}
                   type="button"
                 >
-                  <span role="img" aria-label={label}>{emoji}</span>
+                  <span
+                    className="users__buttonIcon"
+                    role="img"
+                    aria-label={label}
+                  >
+                    {emoji}
+                  </span>
                   <span className="users__buttonText">{label}</span>
                 </button>
               </li>

src/client/chat--users.scss

@@ -43,6 +43,10 @@
   }
 }
 
+.users__buttonIcon {
+  display: flow-root;
+}
+
 .users__buttonText {
   font-size: 0.7em;
 }