feat: compact auth banner alongside post signup widget (#5886)

Author: idoshamun

packages/shared/src/components/auth/AuthenticationBanner.tsx

@@ -18,34 +18,58 @@ import { AuthDisplay } from './common';
 
 const Section = classed('div', 'flex flex-col');
 
+interface AuthenticationBannerProps extends PropsWithChildren {
+  compact?: boolean;
+}
+
 export function AuthenticationBanner({
   children,
-}: PropsWithChildren): ReactElement {
+  compact,
+}: AuthenticationBannerProps): ReactElement {
   const { showLogin } = useAuthContext();
 
   return (
     <BottomBannerContainer
       className={classNames(
-        'border-t border-accent-cabbage-default py-10 shadow-3',
+        'border-t border-accent-cabbage-default shadow-3',
+        compact ? 'py-4' : 'py-10',
         authGradientBg,
       )}
     >
-      <div className="flex max-w-[63.75rem] flex-row  justify-center gap-10">
+      <div
+        className={classNames(
+          'flex max-w-[63.75rem] flex-row justify-center gap-10',
+          compact && 'items-center',
+        )}
+      >
         <Image
           className="absolute left-0 top-0 -z-1 h-full w-full"
           src={bg}
           srcSet={`${laptopBg} 1440w, ${desktopBg} 1920w, ${bg} 2880w`}
           sizes="(max-width: 1440px) 100vw, (max-width: 1920px) 1920px, 100vw"
         />
-        <Section className="max-w-full flex-grow basis-0 gap-4">
-          {children || (
-            <OnboardingHeadline
-              className={{
-                title: 'typo-mega3',
-                description: 'mb-8 typo-title3',
-              }}
-            />
+        <Section
+          className={classNames(
+            'max-w-full flex-grow basis-0',
+            compact ? 'justify-center gap-2' : 'gap-4',
           )}
+        >
+          {children ||
+            (compact ? (
+              <OnboardingHeadline
+                className={{
+                  title: 'typo-large-title',
+                  description: 'typo-body',
+                }}
+              />
+            ) : (
+              <OnboardingHeadline
+                className={{
+                  title: 'typo-mega3',
+                  description: 'mb-8 typo-title3',
+                }}
+              />
+            ))}
         </Section>
         <Section className="w-[23.25rem]">
           <AuthOptions
@@ -56,7 +80,7 @@ export function AuthenticationBanner({
             defaultDisplay={AuthDisplay.OnboardingSignup}
             forceDefaultDisplay
             className={{
-              onboardingSignup: '!gap-4',
+              onboardingSignup: compact ? '!gap-3' : '!gap-4',
             }}
             onAuthStateUpdate={(props) => {
               showLogin({
@@ -67,6 +91,8 @@ export function AuthenticationBanner({
             onboardingSignupButton={{
               variant: ButtonVariant.Primary,
             }}
+            hideLoginLink={compact}
+            compact={compact}
           />
         </Section>
       </div>

packages/shared/src/components/auth/PostAuthBanner.tsx

@@ -23,24 +23,30 @@ const GeoPersonalizedBanner = dynamic(
   () => import('../banners/personalized/GeoPersonalizedBanner'),
 );
 
-export const PostAuthBanner = (): ReactElement => {
+interface PostAuthBannerProps {
+  compact?: boolean;
+}
+
+export const PostAuthBanner = ({
+  compact,
+}: PostAuthBannerProps = {}): ReactElement => {
   const searchParams = useSearchParams();
   const { geo } = useAuthContext();
 
   const userId = searchParams?.get('userid');
 
   if (userId) {
-    return <UserPersonalizedBanner userId={userId} />;
+    return <UserPersonalizedBanner userId={userId} compact={compact} />;
   }
 
   const social = getSocialReferrer();
   if (social) {
-    return <SocialPersonalizedBanner site={social} />;
+    return <SocialPersonalizedBanner site={social} compact={compact} />;
   }
 
   if (geo?.region) {
-    return <GeoPersonalizedBanner geo={geo.region} />;
+    return <GeoPersonalizedBanner geo={geo.region} compact={compact} />;
   }
 
-  return <AuthenticationBanner />;
+  return <AuthenticationBanner compact={compact} />;
 };

packages/shared/src/components/banners/personalized/GeoPersonalizedBanner.tsx

@@ -3,17 +3,29 @@ import React from 'react';
 import { geoToCountry, geoToEmoji } from '../../../lib/geo';
 import { AuthenticationBanner, OnboardingHeadline } from '../../auth';
 
-const GeoPersonalizedBanner = ({ geo }: { geo: string }): ReactElement => {
+const GeoPersonalizedBanner = ({
+  geo,
+  compact,
+}: {
+  geo: string;
+  compact?: boolean;
+}): ReactElement => {
   const emoji = geoToEmoji(geo);
   const country = geoToCountry(geo);
 
   return (
-    <AuthenticationBanner>
-      <span className="text-[3.5rem] leading-none">{emoji}</span>
+    <AuthenticationBanner compact={compact}>
+      <span
+        className={
+          compact ? 'text-[2.5rem] leading-none' : 'text-[3.5rem] leading-none'
+        }
+      >
+        {emoji}
+      </span>
       <OnboardingHeadline
         className={{
-          title: `typo-mega3`,
-          description: 'mb-8 typo-title3',
+          title: compact ? 'typo-large-title' : 'typo-mega3',
+          description: compact ? 'typo-body' : 'mb-8 typo-title3',
         }}
         title={`daily.dev is the fastest growing developer platform in ${country}!`}
         description="We know how hard it is to be a developer. It doesn't have to be. Personalized news feed, dev community and search, much better than what's out there. Maybe ;)"

packages/shared/src/components/banners/personalized/SocialPersonalizedBanner.tsx

@@ -14,19 +14,27 @@ import { IconSize } from '../../Icon';
 
 const SocialPersonalizedBanner = ({
   site,
+  compact,
 }: {
   site: SupportedSocialReferrer;
+  compact?: boolean;
 }): ReactElement => {
   const Icon = socialIcon[site];
   const gradient = socialGradient[site];
 
   return (
-    <AuthenticationBanner>
-      <Icon size={IconSize.Size48} secondary={site === SocialIconType.Reddit} />
+    <AuthenticationBanner compact={compact}>
+      <Icon
+        size={compact ? IconSize.Large : IconSize.Size48}
+        secondary={site === SocialIconType.Reddit}
+      />
       <OnboardingHeadline
         className={{
-          title: classNames('typo-mega3', gradient),
-          description: classNames('mb-8 typo-title3'),
+          title: classNames(
+            compact ? 'typo-large-title' : 'typo-mega3',
+            gradient,
+          ),
+          description: compact ? 'typo-body' : 'mb-8 typo-title3',
         }}
         pretitle={`Coming from ${capitalize(site)}?`}
         {...socialCTA[site]}

packages/shared/src/components/banners/personalized/UserPersonalizedBanner.tsx

@@ -8,8 +8,10 @@ import { generateQueryKey, RequestKey } from '../../../lib/query';
 
 const UserPersonalizedBanner = ({
   userId,
+  compact,
 }: {
   userId: string;
+  compact?: boolean;
 }): ReactElement => {
   const key = generateQueryKey(RequestKey.ReferringUser);
   const { data: user, isError } = useQuery({
@@ -18,18 +20,18 @@ const UserPersonalizedBanner = ({
   });
 
   if (isError) {
-    return <AuthenticationBanner />;
+    return <AuthenticationBanner compact={compact} />;
   }
 
   const name = user?.name ? user?.name.split(' ')[0] : user?.username;
 
   return (
-    <AuthenticationBanner>
+    <AuthenticationBanner compact={compact}>
       {user?.image && <ProfilePicture user={user} />}
       <OnboardingHeadline
         className={{
-          title: 'typo-mega3',
-          description: 'mb-8 typo-title3',
+          title: compact ? 'typo-large-title' : 'typo-mega3',
+          description: compact ? 'typo-body' : 'mb-8 typo-title3',
         }}
         pretitle={user?.username}
         title="shared it, so it's probably a good one."

packages/webapp/pages/posts/[id]/index.tsx

@@ -288,8 +288,8 @@ export const PostPage = ({
               },
             }}
           />
-          {shouldShowAuthBanner && isLaptop && !isPostSignupWidget && (
-            <PostAuthBanner />
+          {shouldShowAuthBanner && isLaptop && (
+            <PostAuthBanner compact={isPostSignupWidget} />
           )}
         </FooterNavBarLayout>
       </LogExtraContextProvider>