Powered by Joystream

WRadoslaw · Mar 20, 2024 · a6f2936 · a6f2936
1 parent f9e6643
commit a6f2936
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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<TopbarBaseProps> = ({ children, fullLogoNode, logoLinkUrl, noLogo, className }) => {
   const mdMatch = useMediaMatch('md')
+  const smMatch = useMediaMatch('sm')
+  const xsMatch = useMediaMatch('xs')
 
   return (
     <Header className={className} data-scroll-lock-fill-gap>
       {!noLogo && (
         <LogoLink to={logoLinkUrl}>
           {mdMatch ? fullLogoNode : <AppLogo variant="short" height={32} width={undefined} />}
+          {xsMatch && <LogoDivider />}
+          {xsMatch && (
+            <Text variant="h200" as="h4" color="colorTextMuted" margin={{ right: 2 }}>
+              {smMatch ? 'Powered' : ''} by Joystream
+            </Text>
+          )}
         </LogoLink>
       )}
       {children}