diff --git a/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.styles.ts b/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.styles.ts index cce5da0407..6a9b208915 100644 --- a/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.styles.ts +++ b/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.styles.ts @@ -30,10 +30,22 @@ export const Header = styled.header` export const LogoLink = styled(Link)` display: flex; + gap: ${sizes(2)}; + width: fit-content; align-items: center; text-decoration: none; /* increase the clickable area */ padding: 16px; margin: -16px; + + h4 { + white-space: nowrap; + } +` + +export const LogoDivider = styled.div` + background-color: ${cVar('colorBackgroundStrongAlpha')}; + width: 1px; + height: 24px; ` diff --git a/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.tsx b/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.tsx index d3e30e9c8e..593fd804cf 100644 --- a/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.tsx +++ b/packages/atlas/src/components/_navigation/TopbarBase/TopbarBase.tsx @@ -1,9 +1,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react' import { AppLogo } from '@/components/AppLogo' +import { Text } from '@/components/Text' import { useMediaMatch } from '@/hooks/useMediaMatch' -import { Header, LogoLink } from './TopbarBase.styles' +import { Header, LogoDivider, LogoLink } from './TopbarBase.styles' export type TopbarBaseProps = PropsWithChildren<{ fullLogoNode: ReactNode @@ -14,12 +15,20 @@ export type TopbarBaseProps = PropsWithChildren<{ export const TopbarBase: FC = ({ children, fullLogoNode, logoLinkUrl, noLogo, className }) => { const mdMatch = useMediaMatch('md') + const smMatch = useMediaMatch('sm') + const xsMatch = useMediaMatch('xs') return (
{!noLogo && ( {mdMatch ? fullLogoNode : } + {xsMatch && } + {xsMatch && ( + + {smMatch ? 'Powered' : ''} by Joystream + + )} )} {children}