Prepare for release with old ypp approach

WRadoslaw · May 13, 2024 · 9f04253 · 9f04253
1 parent f8d8ff2
commit 9f04253
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 102 deletions.
diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -9,7 +9,7 @@ general:
   appOgImgPath: '/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML
   pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details
   joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links
-  joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
+  joystreamDiscordUrl: 'https://discord.gg/joystream' # URL for Joystream Discord - used for support when errors occur
   appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
   crtMaintenanceMode: false
 storage:

diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-card-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-card-hero.webp
diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-dashboard-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-dashboard-hero.webp
diff --git a/packages/atlas/src/assets/images/ypp-hero/crt-payments-hero.webp b/packages/atlas/src/assets/images/ypp-hero/crt-payments-hero.webp
diff --git a/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts b/packages/atlas/src/views/global/YppLandingView/YppLandingView.styles.ts
@@ -65,8 +65,10 @@ export const StyledLimitedWidthContainerHero = styled.div<{ centerText?: boolean
   overflow: hidden;
   border-radius: 24px;
   padding: ${sizes(4)};
+  margin-top: ${sizes(6)};
 
   ${media.md} {
+    margin-top: 0;
     padding: ${sizes(8)};
     border-radius: 32px;
   }

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/CreatorOpportunities.tsx
@@ -8,7 +8,7 @@ import earning_yt from '@/assets/images/earnings/earning-yt.webp'
 import { FlexBox } from '@/components/FlexBox'
 import { FlexGridItem, GridItem } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
-import { Button, TextButton } from '@/components/_buttons/Button'
+import { TextButton } from '@/components/_buttons/Button'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { cVar, media, sizes } from '@/styles'
@@ -44,7 +44,7 @@ const earningsOptions = [
 ]
 
 export const CreatorOpportunities = () => {
-  const xsMatch = useMediaMatch('xs')
+  // const xsMatch = useMediaMatch('xs')
   const mdMatch = useMediaMatch('md')
   const smMatch = useMediaMatch('sm')
   const [titleVariant, subtitleVariant] = useSectionTextVariants()
@@ -107,15 +107,20 @@ export const CreatorOpportunities = () => {
             colSpan={{ base: 12 }}
             colStart={{ base: 1 }}
           >
-            <FlexBox width="100%" flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center" gap={4}>
-              <Button fullWidth={!xsMatch} size="large">
-                Create New Channel
-              </Button>
-              <Button fullWidth={!xsMatch} size="large" variant="secondary">
-                Sync from YouTube
-              </Button>
-            </FlexBox>
-            <TextButton size="large" icon={<SvgLogoDiscordMonochrome />} iconPlacement="right">
+            {/*<FlexBox width="100%" flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center" gap={4}>*/}
+            {/*  <Button fullWidth={!xsMatch} size="large">*/}
+            {/*    Create New Channel*/}
+            {/*  </Button>*/}
+            {/*  <Button fullWidth={!xsMatch} size="large" variant="secondary">*/}
+            {/*    Sync from YouTube*/}
+            {/*  </Button>*/}
+            {/*</FlexBox>*/}
+            <TextButton
+              to={atlasConfig.general.joystreamDiscordUrl}
+              size="large"
+              icon={<SvgLogoDiscordMonochrome />}
+              iconPlacement="right"
+            >
               Connect with us on Discord.
             </TextButton>
           </FlexGridItem>

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx b/packages/atlas/src/views/global/YppLandingView/sections/ViewerOpportunities.tsx
@@ -40,7 +40,7 @@ const viewerEarningsOptions = [
     title: 'Trade NFTs',
     subtitle: (
       <>
-        Own and trade collectibles from wide variety of channels. <TextButton size="large">Learn more</TextButton>
+        Own and trade collectibles from wide variety of channels. {/*<TextButton size="large">Learn more</TextButton>*/}
       </>
     ),
     image: viewer_earnings_nft,
@@ -110,7 +110,12 @@ export const ViewerOpportunities = () => {
             colSpan={{ base: 12, sm: 10 }}
             colStart={{ base: 1, sm: 2 }}
           >
-            <TextButton size="large" icon={<SvgLogoDiscordMonochrome />} iconPlacement="right">
+            <TextButton
+              to={atlasConfig.general.joystreamDiscordUrl}
+              size="large"
+              icon={<SvgLogoDiscordMonochrome />}
+              iconPlacement="right"
+            >
               Connect with us on Discord.
             </TextButton>
           </FlexGridItem>

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.styles.ts
@@ -36,32 +36,54 @@ export const WidgetsContainer = styled(FlexBox)`
 
 export const ImagesContainer = styled(FlexBox)`
   position: relative;
+  margin: 40px 0;
+
+  ${media.sm} {
+    margin: 80px 0;
+  }
 `
 
 export const RightImage = styled.img`
   position: absolute;
   width: 60%;
-  max-width: 60%;
+  max-height: 420px;
   height: auto;
+  object-fit: contain;
   display: block;
-  left: 5%;
-  top: 25%;
+  left: 10%;
+  top: 10%;
   z-index: 10;
   border-radius: ${cVar('radiusMedium')};
 `
 
 export const LeftImage = styled.img`
   position: absolute;
   width: 60%;
-  max-width: 60%;
+  max-height: 420px;
   height: auto;
+  object-fit: contain;
   display: block;
-  right: 5%;
-  top: 25%;
+  right: 10%;
+  top: 10%;
   z-index: 10;
   border-radius: ${cVar('radiusMedium')};
 `
 
+export const FrontImage = styled.img`
+  max-height: 520px;
+  width: 90%;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  border-radius: ${cVar('radiusMedium')};
+  z-index: 20;
+  ${imageShadow}
+
+  ${media.xs} {
+    width: 70%;
+  }
+`
+
 export const LogosContainer = styled.div`
   display: flex;
   align-items: center;
@@ -85,17 +107,6 @@ export const SelectDifferentChannelButton = styled.button`
   }
 `
 
-export const FrontImage = styled.img`
-  width: 70%;
-  max-width: 70%;
-  height: auto;
-  display: block;
-  border-radius: ${cVar('radiusMedium')};
-  margin-top: 10%;
-  z-index: 20;
-  ${imageShadow}
-`
-
 export const BackImage = styled.img`
   position: absolute;
   width: 80%;

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
@@ -3,14 +3,15 @@ import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import useResizeObserver from 'use-resize-observer'
 
 import { useMostPaidChannels } from '@/api/hooks/channel'
-import { SvgActionChevronR, SvgActionNewTab } from '@/assets/icons'
-import yt from '@/assets/images/ypp-hero/yt.webp'
+import { SvgActionChevronR } from '@/assets/icons'
+import crt_card from '@/assets/images/ypp-hero/crt-card-hero.webp'
+import crt_dashboard from '@/assets/images/ypp-hero/crt-dashboard-hero.webp'
+import payments from '@/assets/images/ypp-hero/crt-payments-hero.webp'
 import { AppLogo } from '@/components/AppLogo'
-import { FlexBox } from '@/components/FlexBox'
-import { GlassDetailsWidget } from '@/components/GlassDetailsWidget'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
-import { Button, TextButton } from '@/components/_buttons/Button'
+import { Button } from '@/components/_buttons/Button'
+import { GoogleButton } from '@/components/_buttons/GoogleButton'
 import { PaidChannelCard } from '@/components/_channel/ChannelCard'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { atlasConfig } from '@/config'
@@ -25,8 +26,8 @@ import {
   LeftImage,
   LogosContainer,
   RightImage,
+  SelectDifferentChannelButton,
   StyledInfiniteCarousel,
-  WidgetsContainer,
 } from './YppHero.styles'
 
 import {
@@ -131,14 +132,15 @@ export const YppHero: FC<YppHeroProps> = ({
                         Go to dashboard
                       </Button>
                     ) : (
-                      <FlexBox gap={4} flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center">
-                        <Button fullWidth={!xsMatch} size="large">
-                          Sync from YouTube
-                        </Button>
-                        <Button fullWidth={!xsMatch} size="large" variant="secondary">
-                          Create New Channel
-                        </Button>
-                      </FlexBox>
+                      // <FlexBox gap={4} flow={xsMatch ? 'row' : 'column'} alignItems="center" justifyContent="center">
+                      //   <Button fullWidth={!xsMatch} size="large">
+                      //     Sync from YouTube
+                      //   </Button>
+                      //   <Button fullWidth={!xsMatch} size="large" variant="secondary">
+                      //     Create New Channel
+                      //   </Button>
+                      // </FlexBox>
+                      <GoogleButton onClick={onSignUpClick} />
                     )
                   ) : (
                     <SkeletonLoader width={190} height={48} />
@@ -150,65 +152,84 @@ export const YppHero: FC<YppHeroProps> = ({
         </LayoutGrid>
         <LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
           <GridItem
-            margin={{ top: 6 }}
+            margin={{ top: 1 }}
             colStart={{ base: 1, sm: 3, md: 4, lg: 5 }}
             colSpan={{ base: 12, sm: 8, md: 6, lg: 4 }}
           >
-            <TextButton iconPlacement="right" size="large" icon={<SvgActionNewTab />}>
-              Earn as viewer
-            </TextButton>
+            {/*<TextButton iconPlacement="right" size="large" icon={<SvgActionNewTab />}>*/}
+            {/*  Earn as viewer*/}
+            {/*</TextButton>*/}
+            <Text
+              as="p"
+              variant="t100"
+              color="colorTextMuted"
+              margin={{ top: hasAnotherUnsyncedChannel && selectedChannelTitle ? 4 : 2 }}
+            >
+              {hasAnotherUnsyncedChannel && selectedChannelTitle && (
+                <>
+                  Your channel "{selectedChannelTitle}" is already part of the YouTube Partner Program.{' '}
+                  <SelectDifferentChannelButton onClick={onSelectChannel} color="colorTextPrimary">
+                    Select a different channel
+                  </SelectDifferentChannelButton>{' '}
+                  to apply again.
+                </>
+              )}
+              {yppAtlasStatus !== 'ypp-signed' && 'It takes under 1 minute and is 100% free.'}
+            </Text>
           </GridItem>
         </LayoutGrid>
 
-        <LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
-          <GridItem margin={{ top: 6 }} colStart={{ base: 1, lg: 2 }} colSpan={{ base: 12, lg: 10 }}>
-            <WidgetsContainer>
-              <Text margin={{ bottom: 6 }} variant="h500" as="h5">
-                Creator Earnings
-              </Text>
-            </WidgetsContainer>
-            <WidgetsContainer justifyContent="space-between" gap={4} width="100%">
-              <GlassDetailsWidget
-                title="Total Rewards Paid"
-                titleVariant="h300"
-                tooltip={{ text: 'xd' }}
-                customNode={
-                  <Text variant={widgetContentTextVariant} as="h2">
-                    204M
-                  </Text>
-                }
-              />
-              <GlassDetailsWidget
-                title="NFTs sold"
-                titleVariant="h300"
-                tooltip={{ text: 'xd' }}
-                customNode={
-                  <Text variant={widgetContentTextVariant} as="h2">
-                    204M
-                  </Text>
-                }
-              />
-              <GlassDetailsWidget
-                title="Creator Tokens Sold"
-                titleVariant="h300"
-                tooltip={{ text: 'xd' }}
-                customNode={
-                  <Text variant={widgetContentTextVariant} as="h2">
-                    204M
-                  </Text>
-                }
-              />
-            </WidgetsContainer>
-          </GridItem>
-        </LayoutGrid>
+        {/*<LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">*/}
+        {/*  <GridItem margin={{ top: 6 }} colStart={{ base: 1, lg: 2 }} colSpan={{ base: 12, lg: 10 }}>*/}
+        {/*    <WidgetsContainer>*/}
+        {/*      <Text margin={{ bottom: 6 }} variant="h500" as="h5">*/}
+        {/*        Creator Earnings*/}
+        {/*      </Text>*/}
+        {/*    </WidgetsContainer>*/}
+        {/*    <WidgetsContainer justifyContent="space-between" gap={4} width="100%">*/}
+        {/*      <GlassDetailsWidget*/}
+        {/*        title="Total Rewards Paid"*/}
+        {/*        titleVariant="h300"*/}
+        {/*        tooltip={{ text: 'xd' }}*/}
+        {/*        customNode={*/}
+        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
+        {/*            204M*/}
+        {/*          </Text>*/}
+        {/*        }*/}
+        {/*      />*/}
+        {/*      <GlassDetailsWidget*/}
+        {/*        title="NFTs sold"*/}
+        {/*        titleVariant="h300"*/}
+        {/*        tooltip={{ text: 'xd' }}*/}
+        {/*        customNode={*/}
+        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
+        {/*            204M*/}
+        {/*          </Text>*/}
+        {/*        }*/}
+        {/*      />*/}
+        {/*      <GlassDetailsWidget*/}
+        {/*        title="Creator Tokens Sold"*/}
+        {/*        titleVariant="h300"*/}
+        {/*        tooltip={{ text: 'xd' }}*/}
+        {/*        customNode={*/}
+        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
+        {/*            204M*/}
+        {/*          </Text>*/}
+        {/*        }*/}
+        {/*      />*/}
+        {/*    </WidgetsContainer>*/}
+        {/*  </GridItem>*/}
+        {/*</LayoutGrid>*/}
 
-        {xsMatch && (
-          <ImagesContainer width="100%" justifyContent="center">
-            <FrontImage src={yt} alt="Hero back" width="1152" height="824" />
-            <RightImage src={yt} alt="Hero back" width="1152" height="824" />
-            <LeftImage src={yt} alt="Hero back" width="1152" height="824" />
-          </ImagesContainer>
-        )}
+        <ImagesContainer width="100%" justifyContent="center">
+          <FrontImage src={crt_dashboard} alt="Hero back" width="1152" height="824" />
+          {xsMatch && (
+            <>
+              <RightImage src={crt_card} alt="Hero back" width="1152" height="824" />
+              <LeftImage src={payments} alt="Hero back" width="1152" height="824" />
+            </>
+          )}
+        </ImagesContainer>
       </StyledLimitedWidthContainerHero>
       {items && items.length >= 7 && (
         <StyledInfiniteCarousel

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppRewardSection.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppRewardSection.tsx
@@ -1,12 +1,10 @@
 import { FC, useRef } from 'react'
 
-import { SvgActionArrowRight } from '@/assets/icons'
 import { FlexBox } from '@/components/FlexBox'
 import { Information } from '@/components/Information'
 import { FlexGridItem, GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
 import { TooltipText } from '@/components/Tooltip/Tooltip.styles'
-import { TextButton } from '@/components/_buttons/Button'
 import { TierCard } from '@/components/_ypp/TierCard'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
@@ -119,9 +117,10 @@ export const YppRewardSection: FC = () => {
             justifyContent="end"
           >
             <FlexBox width="100%" alignItems="center" justifyContent="space-between">
-              <TextButton icon={<SvgActionArrowRight />} iconPlacement="right">
-                Learn more
-              </TextButton>
+              {/*<TextButton icon={<SvgActionArrowRight />} iconPlacement="right">*/}
+              {/*  Learn more*/}
+              {/*</TextButton>*/}
+              <div />
               <FlexBox alignItems="center" width="fit-content" gap={2}>
                 <Text variant="t200" as="p" color="colorText">
                   Payments are made in {atlasConfig.joystream.tokenTicker} tokens