refactor: branding

app/src/react/components/branding/index.scss

@@ -4,18 +4,13 @@
 .branding {
   align-items: center;
   color: $color-muted;
-  display: none;
   font-family: var(--thick-title-font-family);
-  font-size: 0.95em;
+  font-size: 0.75em;
   justify-content: space-around;
-  left: 3em;
+  padding: 1.5em 1em;
-  padding: 1em;
   position: absolute;
   text-decoration: none;
   user-select: none;
-  @include breakpoint(tablet) {
-    display: inline-block;
-  }
   .closed & {
     flex-direction: column;
     font-size: 0.9em;
@@ -28,5 +23,8 @@
   div {
     display: inline-block;
   }
+  button + & {
+    left: 3em;
+  }
 }
 

app/src/react/components/channel/index.jsx

@@ -42,8 +42,10 @@ export default function Channel(props) {
     >
       <div className="channel">
         {React.cloneElement(
-          href ? <Link to={href} /> : <div />,
+          href
-          {className: 'channel__link dismiss-side', title: name},
+            ? <Link className="channel__link dismiss-side" to={href} />
+            : <div className="channel__link" />,
+          {title: name},
           [React.cloneElement(content, {key: name})],
         )}
         <Actions actions={actions} />

app/src/react/components/header/index.jsx

@@ -13,12 +13,14 @@ import {
   unreadUserSelector,
 } from '@reddichat/user/client';
 
+import useBreakpoints from 'hooks/useBreakpoints';
 import useChannel from 'hooks/useChannel';
 
 import Branding from 'components/branding';
 
 export default function Header(props) {
   const {onButton} = props;
+  const {tablet} = useBreakpoints();
   const channel = useChannel();
   const id = useSelector(idSelector);
   const isUserAnonymous = 0 === id;
@@ -45,7 +47,9 @@ export default function Header(props) {
           {unread ? <span className="unread">{unread}</span> : null}
         </button>
       )}
-      <Branding />
+      {(isUserAnonymous || tablet) && (
+        <Branding />
+      )}
       <div className="header__channel">
         <Switch>
           <Route