bugfix, styling fix, refactoring

Author: Artem

packages/atlas/src/assets/images/Channels_flow_1.png

@@ -58,6 +58,6 @@ export const StyledLimitedWidthWrapper = styled(FlexBox)`
   text-align: center;
   width: fit-content;
   margin: auto;
-  padding-top: ${sizes(14)};
+  padding-top: ${sizes(8)};
   max-width: 1368px;
 `

packages/atlas/src/assets/images/img.png

@@ -67,7 +67,7 @@ export const ReferralSteps = () => {
     }
   }, [minStep, selectedStep, shouldSwitch, steps.length])
 
-  const [titleVariant, _, __] = useSectionTextVariants()
+  const [titleVariant] = useSectionTextVariants()
 
   useEffect(() => {
     videoRef?.current?.load()

packages/atlas/src/assets/images/img_1.png

@@ -18,8 +18,6 @@ import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/u
 
 export const ReferralsVideo = () => {
   const [_, subtitleVariant, mainTitleVariant] = useSectionTextVariants()
-  const mdMatch = useMediaMatch('md')
-  const xsMatch = useMediaMatch('xs')
 
   const videoRef = useRef<HTMLVideoElement | null>(null)
   const smMatch = useMediaMatch('sm')
@@ -30,7 +28,7 @@ export const ReferralsVideo = () => {
     }
   }, [])
   return (
-    <FlexBox flow="column" marginTop={mdMatch ? 24 : xsMatch ? 16 : 14} gap={smMatch ? 14 : 12}>
+    <FlexBox flow="column" gap={smMatch ? 14 : 12}>
       <LayoutGrid as="header">
         <GridItem colSpan={{ base: 12, lg: 8 }} colStart={{ lg: 3 }}>
           <LogosContainer>

packages/atlas/src/views/global/ReferralsView/ReferralsView.styles.ts

@@ -24,21 +24,22 @@ type TopReferrerDTO = {
 }
 
 export const TopReferrals = () => {
-  const [titleVariant, _, __] = useSectionTextVariants()
+  const [titleVariant] = useSectionTextVariants()
 
   const { data, isLoading: isLoadingTopReferrers } = useQuery('top-referrals-fetch', () =>
     axiosInstance
       .get<TopReferrerDTO[]>(`${atlasConfig.features.ypp.youtubeSyncApiUrl}/referrers/top-referrers`)
       .then((res) => res.data)
       .catch((e) => SentryLogger.error('Top referrals fetch failed', 'TopReferralsLanding', e))
   )
+  const topChannels = data?.slice(0, 5)
 
   const xsMatch = useMediaMatch('xs')
   const mdMatch = useMediaMatch('md')
 
   const { extendedChannels: topReferrersChannels } = useBasicChannels(
     {
-      where: { channel: { id_in: data?.slice(0, 5).map((channel) => channel.referrerChannelId.toString()) || [] } },
+      where: { channel: { id_in: topChannels?.map((channel) => channel.referrerChannelId.toString()) || [] } },
       limit: 5,
     },
     {
@@ -63,7 +64,7 @@ export const TopReferrals = () => {
       </Text>
 
       <StyledTopReferrersGrid>
-        {data?.slice(0, 5).map(({ referrerChannelId, totalReferredChannels, referredByTier, totalEarnings }, idx) => {
+        {topChannels?.map(({ referrerChannelId, totalReferredChannels, referredByTier, totalEarnings }, idx) => {
           const channel = channelById(referrerChannelId.toString())
           return (
             <TopReferrer

packages/atlas/src/views/global/ReferralsView/ReferralsView.types.ts

@@ -23,7 +23,7 @@ export const YppDashboard: FC = () => {
   const headTags = useHeadTags('YouTube Partner Program')
   const mdMatch = useMediaMatch('md')
   const xsMatch = useMediaMatch('xs')
-  const [searchParams, _] = useSearchParams()
+  const [searchParams] = useSearchParams()
   const tab = searchParams.get('tab') as Tab | null
   const [currentVideosTab, setCurrentVideosTab] = useState(TABS.indexOf(tab || 'Dashboard'))
   const { trackPageView } = useSegmentAnalytics()