From 1c7cddfcc6848f14ee7d5a3eaec5dd65dc8e0934 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Sun, 19 Apr 2026 13:56:23 +0300
Subject: [PATCH] feat: compact auth banner alongside post signup widget

Show the post page auth banner in a compact variant when the
post_signup_widget experiment is on, so users see both the sidebar
signup widget and a slimmer bottom banner.
---
 .../components/auth/AuthenticationBanner.tsx  | 50 ++++++++++++++-----
 .../src/components/auth/PostAuthBanner.tsx    | 16 ++++--
 .../personalized/GeoPersonalizedBanner.tsx    | 22 ++++++--
 .../personalized/SocialPersonalizedBanner.tsx | 16 ++++--
 .../personalized/UserPersonalizedBanner.tsx   | 10 ++--
 packages/webapp/pages/posts/[id]/index.tsx    |  4 +-
 6 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/packages/shared/src/components/auth/AuthenticationBanner.tsx b/packages/shared/src/components/auth/AuthenticationBanner.tsx
index e0daedef18d..e0211d0f77f 100644
--- a/packages/shared/src/components/auth/AuthenticationBanner.tsx
+++ b/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>
diff --git a/packages/shared/src/components/auth/PostAuthBanner.tsx b/packages/shared/src/components/auth/PostAuthBanner.tsx
index bde665146e1..61c54858e93 100644
--- a/packages/shared/src/components/auth/PostAuthBanner.tsx
+++ b/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} />;
 };
diff --git a/packages/shared/src/components/banners/personalized/GeoPersonalizedBanner.tsx b/packages/shared/src/components/banners/personalized/GeoPersonalizedBanner.tsx
index 4781f9856b8..34c72c79a84 100644
--- a/packages/shared/src/components/banners/personalized/GeoPersonalizedBanner.tsx
+++ b/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 ;)"
diff --git a/packages/shared/src/components/banners/personalized/SocialPersonalizedBanner.tsx b/packages/shared/src/components/banners/personalized/SocialPersonalizedBanner.tsx
index e2f5b129e43..ef6c5e850d0 100644
--- a/packages/shared/src/components/banners/personalized/SocialPersonalizedBanner.tsx
+++ b/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]}
diff --git a/packages/shared/src/components/banners/personalized/UserPersonalizedBanner.tsx b/packages/shared/src/components/banners/personalized/UserPersonalizedBanner.tsx
index ea307bde76c..b38fed48b8e 100644
--- a/packages/shared/src/components/banners/personalized/UserPersonalizedBanner.tsx
+++ b/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."
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index 340a03e0806..dbbbcaa6962 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/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>