diff --git a/app/src/react/components/branding/index.scss b/app/src/react/components/branding/index.scss index da61154..4bd12a2 100644 --- a/app/src/react/components/branding/index.scss +++ b/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: 1em; + padding: 1.5em 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; + } } diff --git a/app/src/react/components/channel/index.jsx b/app/src/react/components/channel/index.jsx index 68fd4a6..65086f5 100644 --- a/app/src/react/components/channel/index.jsx +++ b/app/src/react/components/channel/index.jsx @@ -42,8 +42,10 @@ export default function Channel(props) { >
{React.cloneElement( - href ? :
, - {className: 'channel__link dismiss-side', title: name}, + href + ? + :
, + {title: name}, [React.cloneElement(content, {key: name})], )} diff --git a/app/src/react/components/header/index.jsx b/app/src/react/components/header/index.jsx index ff29fb0..4407f72 100644 --- a/app/src/react/components/header/index.jsx +++ b/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 ? {unread} : null} )} - + {(isUserAnonymous || tablet) && ( + + )}