From 06d94a07e7b60c889e153fd4164443d5f1cc1eb4 Mon Sep 17 00:00:00 2001 From: WRadoslaw Date: Fri, 3 May 2024 09:59:25 +0200 Subject: [PATCH] Review fixes v2 --- packages/atlas/atlas.config.yml | 2 +- .../YppDashboard/tabs/YppDashboardMainTab.tsx | 73 ++++++++++++++----- 2 files changed, 56 insertions(+), 19 deletions(-) diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index 4b00af0faf..79dae56dd4 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -117,7 +117,7 @@ features: actionButtonAction: copyReferral widgets: # Widgets on Ypp landing page - title: Creators Wiki - link: https://discord.com/channels/811216481340751934/1224709788592767136 + link: https://www.notion.so/joystream/79e2c624887a4183afa6de8c3dbaf905?v=0b160770d22b4426aaf1f85a1a28f75e&pvs=4 linkText: Go to Notion # Used only on YPP Dashboard - if empty defaults to "Go to {title}" label: Notion # Used for YPP Dashboard to inform user which vendor given feature uses - if empty defaults to title icon: info # Optional icon to be displayed. Possible icons: message, info, tokenStack diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx index 9cf4d2299e..1914cd9f98 100644 --- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx +++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx @@ -21,14 +21,15 @@ import { Button, TextButton } from '@/components/_buttons/Button' import { BenefitCard } from '@/components/_ypp/BenefitCard' import { ReferralLinkButton } from '@/components/_ypp/ReferralLinkButton' import { ServiceStatusWidget } from '@/components/_ypp/ServiceStatusWidget/ServiceStatusWidget' -import { YppDashboardTier } from '@/components/_ypp/YppDashboardTier' +import { YppDashboardTier, getTierIcon } from '@/components/_ypp/YppDashboardTier' +import { TierWrapper } from '@/components/_ypp/YppDashboardTier/YppDashboardTier.styles' import { atlasConfig } from '@/config' import { absoluteRoutes } from '@/config/routes' import { useMediaMatch } from '@/hooks/useMediaMatch' import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' import { useYppAuthorizeHandler } from '@/hooks/useYppAuthorizeHandler' import { useUser } from '@/providers/user/user.hooks' -import { cVar, sizes, transitions } from '@/styles' +import { cVar, sizes, square, transitions } from '@/styles' import { formatDate, getNextWeekday } from '@/utils/time' import { BOOST_TIMESTAMP, getTierRewards, yppBackendTierToConfig } from '@/utils/ypp' import { YppAuthorizationModal } from '@/views/global/YppLandingView/YppAuthorizationModal' @@ -42,7 +43,7 @@ const benefitsMetadata = { title: 'Discord Community', description: 'Connect with other creators on Discord and participate in building the platform with us. Each week 5 new active participants selected by community are rewarded with new joiner bonus.', - reward: '20 USD', + reward: '10 USD', actionLink: 'https://discord.com/channels/811216481340751934/1224709788592767136', tooltipLink: 'https://www.notion.so/joystream/Creators-Discord-bc8df1d87b58435a9ea325b073bea4d6?pvs=4', }, @@ -63,7 +64,7 @@ const benefitsMetadata = { }, originalCreatorsContent: { title: `${atlasConfig.general.appName} Original Content`, - description: `Earn more by publishing content to ${atlasConfig.general.appName} at least 24 hours ahead of YouTube. Make sure to add hashtag "#JoystreamOriginal" and hyperlink to the video uploaded to ${atlasConfig.general.appName}. Text of the link should be "#watchOn${atlasConfig.general.appName}".`, + description: `Earn more by publishing content to ${atlasConfig.general.appName} at least 24 hours ahead of YouTube. Make sure to add hashtag #JoystreamOriginal and hyperlink to the video uploaded to ${atlasConfig.general.appName}. Text of the link should be #watchOn${atlasConfig.general.appName}.`, reward: 'x5 per video', actionLink: 'https://athd8d2ml5u.typeform.com/to/jvKcRyCP', tooltipLink: 'https://www.notion.so/joystream/Original-Content-Rewards-de1acdc52ef549119b700df106675ce4?pvs=4', @@ -84,7 +85,8 @@ const benefitsMetadata = { shareToken: { title: 'Share Token', reward: '50 USD', - tooltipLink: 'https://www.notion.so/joystream/Social-Promotions-15a5e2ca49734b2094a7356e49e07b9f?pvs=4', + tooltipLink: + 'https://www.notion.so/joystream/Social-Promotions-15a5e2ca49734b2094a7356e49e07b9f?pvs=4#8f39e46460e84f74a3dabffa516505f2', }, ambassadorProgram: { title: 'Ambassador Program', @@ -234,7 +236,9 @@ export const YppDashboardMainTab: FC = () => { Connected channels undergo verification from the DAO content team and assigned tiers based on production quality. Sign up bonus, sync rewards and access to more earning opportunities are based on the tier. {'\n'} - Learn more + + Learn more + } actionNode={ @@ -264,7 +268,9 @@ export const YppDashboardMainTab: FC = () => { The limit of historical videos and rewards for synced videos are based on the channel rewards tier and paid for weekly basis. {'\n'} - Learn more + + Learn more + } actionNode={ @@ -302,7 +308,9 @@ export const YppDashboardMainTab: FC = () => { Referrals is the easiest way to ramp up rewards. Top referrers are published to the regularly updated leaderboard. {'\n'} - Learn more + + Learn more + } actionNode={ @@ -378,6 +386,7 @@ export const YppDashboardMainTab: FC = () => { + {silverTierGroup} { + {silverTierGroup} { ) } -const HelpContainer = styled(FlexBox)`` +const HelpContainer = styled(FlexBox)` + padding: ${sizes(4)} 0; +` + +const SilverTierWrapper = styled(TierWrapper)` + padding: ${sizes(2)}; + width: fit-content; + border: 1px solid #cbe0f145; + + svg { + ${square(20)}; + } +` + +const silverTierGroup = ( + + {getTierIcon('Verified::Silver')} + + Offers are valid for silver tiers and above{' '} + + +) export const BenefitsContainer = ({ children, title }: { children: ReactNode[] | ReactNode; title: string }) => { const drawer = useRef(null) @@ -530,17 +561,17 @@ export const BenefitsContainer = ({ children, title }: { children: ReactNode[] | return ( - + setDrawerActive((prev) => !prev)} + alignItems="start" + justifyContent="space-between" + width="100%" + > {title} -