ui: tweaks

src/client/bar.scss

@@ -25,15 +25,16 @@
 }
 
 .bar__brandItem {
+  align-items: center;
   color: $color-muted;
   display: flex;
-  flex-direction: column;
   justify-content: space-around;
   font-family: var(--thick-title-font-family);
   font-size: 0.95em;
   padding: 1em;
   user-select: none;
   .closed & {
+    flex-direction: column;
     font-size: 0.9em;
     text-align: center;
     padding: 1em 0 0.5em;

src/client/chat--left.jsx

@@ -29,7 +29,19 @@ export default function ChatLeft() {
       className={classnames('left', 'flexed', showsAsOpen ? 'open' : 'closed')}
     >
       <Bar
-        branding={<li className="bar__brandItem">reddichat</li>}
+        branding={(
+          <li className="bar__brandItem">
+            <div>
+              reddi
+              <span className="muted">?</span>
+            </div>
+            {' '}
+            <div>
+              chat
+              <span className="muted">!</span>
+            </div>
+          </li>
+        )}
         buttons={buttons}
         isHorizontal={showsAsOpen}
         onActive={(active, i) => {

src/client/chat--left.scss

@@ -13,3 +13,7 @@
 .left.open {
   width: 18em;
 }
+
+.bar__brandItem .muted {
+  opacity: 0.5;
+}

src/client/chat--right.scss

@@ -10,10 +10,6 @@
   }
 }
 
-.right .bar--vertical {
-  float: left;
-}
-
 .right.open {
   width: 18em;
 }