fix: squad post content

dailydotdev · Mar 27, 2024 · fd02e6c · fd02e6c
1 parent 4eb328b
commit fd02e6c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/packages/shared/src/components/post/BasePostContent.tsx b/packages/shared/src/components/post/BasePostContent.tsx
@@ -39,6 +39,7 @@ export function BasePostContent({
       {isPostPage ? (
         <PostContentHeaderMobile
           post={post}
+          className={className.header}
           onReadArticle={navigationProps.onReadArticle}
         />
       ) : (

diff --git a/packages/shared/src/components/post/PostContentHeaderMobile.tsx b/packages/shared/src/components/post/PostContentHeaderMobile.tsx
@@ -1,15 +1,19 @@
 import React, { ReactElement } from 'react';
 import { useRouter } from 'next/router';
+import classNames from 'classnames';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { ArrowIcon } from '../icons';
 import { PostHeaderActions } from './PostHeaderActions';
 import { PostNavigationProps } from './common';
 import { isNullOrUndefined } from '../../lib/func';
+import { WithClassNameProps } from '../utilities';
 
 export function PostContentHeaderMobile({
   post,
+  className,
   onReadArticle,
-}: Pick<PostNavigationProps, 'onReadArticle' | 'post'>): ReactElement {
+}: Pick<PostNavigationProps, 'onReadArticle' | 'post'> &
+  WithClassNameProps): ReactElement {
   const router = useRouter();
   const canGoBack =
     !!globalThis?.history?.length &&
@@ -18,7 +22,12 @@ export function PostContentHeaderMobile({
     !globalThis?.document?.referrer; // empty referrer means you are from the same site
 
   return (
-    <span className="-mx-4 flex flex-row items-center border-b border-border-subtlest-tertiary px-4 py-2 tablet:hidden">
+    <span
+      className={classNames(
+        '-mx-4 flex flex-row items-center border-b border-border-subtlest-tertiary px-4 py-2 tablet:hidden',
+        className,
+      )}
+    >
       <Button
         icon={<ArrowIcon className="-rotate-90" />}
         size={ButtonSize.Small}

diff --git a/packages/shared/src/components/post/SquadPostContent.tsx b/packages/shared/src/components/post/SquadPostContent.tsx
@@ -86,7 +86,6 @@ function SquadPostContent({
         className={classNames(
           'relative flex-1 flex-col tablet:flex-row tablet:pb-0',
           className?.container,
-          isPostPage && 'pt-6 tablet:pt-0',
         )}
         hasNavigation={hasNavigation}
       >
@@ -100,6 +99,7 @@ function SquadPostContent({
             className={{
               ...className,
               onboarding: classNames('mb-6', className?.onboarding),
+              header: 'mb-6',
               navigation: {
                 actions: 'ml-auto tablet:hidden',
                 container: 'mb-6 pt-6',

diff --git a/packages/shared/src/components/post/common.tsx b/packages/shared/src/components/post/common.tsx
@@ -20,6 +20,7 @@ export interface PostContentClassName {
   onboarding?: string;
   navigation?: PostNavigationClassName;
   fixedNavigation?: PostNavigationClassName;
+  header?: string;
 }
 
 type PostActions = Pick<