♐ YPP simplified (#4680)

* Hide topbar on ypp * Restyle and add logo to ypp
Joystream · Aug 17, 2023 · 9723eec · 9723eec
1 parent 47720b7
commit 9723eec
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx b/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx
@@ -102,6 +102,10 @@ export const TopbarViewer: FC = () => {
 
   const topbarButtonLoading = isAuthenticating || membershipsLoading
 
+  if (pathname === absoluteRoutes.viewer.ypp()) {
+    return null
+  }
+
   return (
     <>
       <StyledTopbarBase

diff --git a/packages/atlas/src/views/global/YppLandingView/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/YppHero.tsx
@@ -12,6 +12,7 @@ import yt576 from '@/assets/images/ypp-hero/yt-576.webp'
 import yt864 from '@/assets/images/ypp-hero/yt-864.webp'
 import yt1152 from '@/assets/images/ypp-hero/yt-1152.webp'
 import yt2304 from '@/assets/images/ypp-hero/yt-2304.webp'
+import { AppLogo } from '@/components/AppLogo'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
@@ -76,6 +77,17 @@ export const YppHero: FC<YppHeroProps> = ({
       <StyledLimitedWidthContainer centerText>
         <LayoutGrid as="header">
           <GridItem colSpan={{ base: 12, sm: 8, lg: 6 }} colStart={{ sm: 3, lg: 4 }}>
+            <LogosContainer>
+              <AppLogo
+                variant="full"
+                height={32}
+                width={undefined}
+                data-aos="fade-up"
+                data-aos-delay="150"
+                data-aos-offset="120"
+                data-aos-easing="atlas-easing"
+              />
+            </LogosContainer>
             <Text
               as="h1"
               variant={mdMatch ? 'h800' : 'h600'}

diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts
@@ -19,6 +19,8 @@ export const imageShadow = css`
 `
 
 export const Wrapper = styled.div`
+  margin-top: -80px;
+
   [data-aos] {
     &[data-aos][data-aos-easing='atlas-easing'] {
       transition-timing-function: cubic-bezier(0.09, 0.43, 0.3, 0.99);