feat: card ui revamp

packages/shared/src/components/buttons/BookmarkButton.tsx

@@ -8,8 +8,10 @@ import { BookmarkReminderIcon } from '../icons/Bookmark/Reminder';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { LazyModal } from '../modals/common/types';
 import { useBookmarkReminder } from '../../hooks/notifications';
-import { ButtonColor, ButtonVariant } from './Button';
+import { ButtonColor, ButtonIconPosition, ButtonVariant } from './Button';
+import type { TooltipProps } from '../tooltip/Tooltip';
 import { Tooltip } from '../tooltip/Tooltip';
+import type { IconSize } from '../Icon';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,15 +20,20 @@ import {
 } from '../dropdown/DropdownMenu';
 
 interface BookmarkButtonProps {
-  buttonProps?: QuaternaryButtonProps<'button'>;
+  buttonProps?: Omit<QuaternaryButtonProps<'button'>, 'icon'>;
+  contextMenuId?: string;
   post: Post;
   children?: ReactNode;
+  iconSize?: IconSize;
+  tooltipSide?: TooltipProps['side'];
 }
 
 export function BookmarkButton({
   buttonProps = {},
   post,
   children,
+  iconSize,
+  tooltipSide,
 }: BookmarkButtonProps): ReactElement {
   const hasReminder = !!post.bookmark?.remindAt;
   const { openModal } = useLazyModal();
@@ -65,8 +72,9 @@ export function BookmarkButton({
             variant={ButtonVariant.Tertiary}
             {...buttonPropsWithoutOnClick}
             type="button"
+            iconPosition={ButtonIconPosition.Left}
             pressed={post.bookmarked}
-            icon={<Icon secondary={post.bookmarked} />}
+            icon={<Icon secondary={post.bookmarked} size={iconSize} />}
           >
             {children}
           </QuaternaryButton>
@@ -83,15 +91,19 @@ export function BookmarkButton({
   }
 
   return (
-    <Tooltip content={post.bookmarked ? 'Remove bookmark' : 'Bookmark'}>
+    <Tooltip
+      content={post.bookmarked ? 'Remove bookmark' : 'Bookmark'}
+      side={tooltipSide}
+    >
       <QuaternaryButton
         color={ButtonColor.Bun}
         variant={ButtonVariant.Tertiary}
         {...buttonProps}
         type="button"
         pressed={post.bookmarked}
+        iconPosition={ButtonIconPosition.Top}
         onClick={(e) => buttonProps.onClick?.(e)}
-        icon={<Icon secondary={post.bookmarked} />}
+        icon={<Icon secondary={post.bookmarked} size={iconSize} />}
       >
         {children}
       </QuaternaryButton>

packages/shared/src/components/buttons/QuaternaryButton.tsx

@@ -13,6 +13,7 @@ export type QuaternaryButtonProps<TagName extends AllowedTags> =
   ButtonProps<TagName> & {
     reverse?: boolean;
     labelClassName?: string;
+    buttonClassName?: string;
   };
 
 function QuaternaryButtonComponent<TagName extends AllowedTags>(
@@ -24,6 +25,7 @@ function QuaternaryButtonComponent<TagName extends AllowedTags>(
     reverse,
     tag = 'button',
     labelClassName,
+    buttonClassName,
     ...props
   }: QuaternaryButtonProps<TagName>,
   ref?: Ref<ButtonElementType<TagName>>,
@@ -62,7 +64,10 @@ function QuaternaryButtonComponent<TagName extends AllowedTags>(
         id={id}
         tag={tag}
         ref={anchorRef}
-        className={classNames(tag === 'a' && isHovered && 'hover')}
+        className={classNames(
+          tag === 'a' && isHovered && 'hover',
+          buttonClassName,
+        )}
       />
       {children && (
         <label

packages/shared/src/components/cards/ActionsButtons/ActionButtons.tsx

@@ -7,7 +7,6 @@ import InteractionCounter from '../../InteractionCounter';
 import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import {
   DiscussIcon as CommentIcon,
-  BookmarkIcon,
   LinkIcon,
   DownvoteIcon,
 } from '../../icons';
@@ -24,6 +23,9 @@ import { IconSize } from '../../Icon';
 import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
 import { usePostActions } from '../../../hooks/post/usePostActions';
 import { Tooltip } from '../../tooltip/Tooltip';
+import PostAwardAction from '../../post/PostAwardAction';
+import { useFeature } from '../../GrowthBookProvider';
+import { featurePostUiImprovements } from '../../../lib/featureManagement';
 
 export interface ActionButtonsProps {
   post: Post;
@@ -51,6 +53,7 @@ const ActionButtons = ({
   const isUpvoteActive = post.userState?.vote === UserVote.Up;
   const isDownvoteActive = post.userState?.vote === UserVote.Down;
   const { onShowPanel, onClose } = useBlockPostPanel(post);
+  const postUiExp = useFeature(featurePostUiImprovements);
 
   if (isFeedPreview) {
     return null;
@@ -92,6 +95,118 @@ const ActionButtons = ({
     onCopyLinkClick?.(e, post);
   };
 
+  if (postUiExp) {
+    return (
+      <div
+        className={classNames(
+          'flex flex-row items-center justify-between px-1 pb-1',
+          className,
+        )}
+      >
+        <div className="flex flex-1 items-center justify-between">
+          <Tooltip
+            content={isUpvoteActive ? 'Remove upvote' : 'Upvote'}
+            side="bottom"
+          >
+            <QuaternaryButton
+              labelClassName="!pl-[1px]"
+              className="btn-tertiary-avocado pointer-events-auto"
+              id={`post-${post.id}-upvote-btn`}
+              color={ButtonColor.Avocado}
+              pressed={isUpvoteActive}
+              onClick={onToggleUpvote}
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.Small}
+              icon={
+                <UpvoteButtonIcon
+                  secondary={isUpvoteActive}
+                  size={IconSize.XSmall}
+                />
+              }
+            >
+              {post?.numUpvotes > 0 && (
+                <InteractionCounter
+                  className={classNames(
+                    'tabular-nums typo-footnote',
+                    !post.numUpvotes && 'invisible',
+                  )}
+                  value={post.numUpvotes}
+                />
+              )}
+            </QuaternaryButton>
+          </Tooltip>
+          <Tooltip
+            content={isDownvoteActive ? 'Remove downvote' : 'Downvote'}
+            side="bottom"
+          >
+            <QuaternaryButton
+              className="pointer-events-auto"
+              id={`post-${post.id}-downvote-btn`}
+              color={ButtonColor.Ketchup}
+              icon={
+                <DownvoteIcon
+                  secondary={isDownvoteActive}
+                  size={IconSize.XSmall}
+                />
+              }
+              pressed={isDownvoteActive}
+              onClick={onToggleDownvote}
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.Small}
+            />
+          </Tooltip>
+          <Tooltip content="Comments" side="bottom">
+            <QuaternaryButton
+              labelClassName="!pl-[1px]"
+              id={`post-${post.id}-comment-btn`}
+              icon={
+                <CommentIcon
+                  secondary={post.commented}
+                  size={IconSize.XSmall}
+                />
+              }
+              pressed={post.commented}
+              onClick={() => onCommentClick?.(post)}
+              size={ButtonSize.Small}
+              className="btn-tertiary-blueCheese"
+            >
+              {post?.numComments > 0 && (
+                <InteractionCounter
+                  className={classNames(
+                    'tabular-nums !typo-footnote',
+                    !post.numComments && 'invisible',
+                  )}
+                  value={post.numComments}
+                />
+              )}
+            </QuaternaryButton>
+          </Tooltip>
+          <PostAwardAction post={post} iconSize={IconSize.XSmall} />
+          <BookmarkButton
+            tooltipSide="bottom"
+            post={post}
+            buttonProps={{
+              id: `post-${post.id}-bookmark-btn`,
+              onClick: onToggleBookmark,
+              size: ButtonSize.Small,
+            }}
+            iconSize={IconSize.XSmall}
+          />
+          <Tooltip content="Copy link" side="bottom">
+            <QuaternaryButton
+              size={ButtonSize.Small}
+              icon={<LinkIcon size={IconSize.XSmall} />}
+              onClick={onCopyLink}
+              variant={ButtonVariant.Tertiary}
+              color={ButtonColor.Water}
+              buttonClassName="hover:text-text-link"
+            />
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={classNames(
@@ -154,7 +269,6 @@ const ActionButtons = ({
         post={post}
         buttonProps={{
           id: `post-${post.id}-bookmark-btn`,
-          icon: <BookmarkIcon secondary={post.bookmarked} />,
           onClick: onToggleBookmark,
           size: ButtonSize.Small,
         }}

packages/shared/src/components/cards/Freeform/FreeformGrid.tsx

@@ -18,6 +18,8 @@ import { WelcomePostCardFooter } from '../common/WelcomePostCardFooter';
 import ActionButtons from '../ActionsButtons/ActionButtons';
 import { ClickbaitShield } from '../common/ClickbaitShield';
 import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+import { useFeature } from '../../GrowthBookProvider';
+import { featurePostUiImprovements } from '../../../lib/featureManagement';
 
 export const FreeformGrid = forwardRef(function SharePostCard(
   {
@@ -41,6 +43,7 @@ export const FreeformGrid = forwardRef(function SharePostCard(
   const containerRef = useRef<HTMLDivElement>();
   const image = usePostImage(post);
   const { title } = useSmartTitle(post);
+  const postUiExp = useFeature(featurePostUiImprovements);
 
   return (
     <FeedItemContainer
@@ -61,7 +64,7 @@ export const FreeformGrid = forwardRef(function SharePostCard(
         post={post}
         enableSourceHeader={enableSourceHeader}
       />
-      <CardTextContainer>
+      <CardTextContainer className={classNames(postUiExp && 'mx-4')}>
         <FreeformCardTitle
           className={classNames(
             generateTitleClamp({

packages/shared/src/components/cards/article/ArticleGrid.tsx

@@ -28,6 +28,8 @@ import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
 import useInteractiveFeed from '../../../hooks/feed/useInteractiveFeed';
 import RelevancyTag from '../../tags/RelevancyTag';
 import InteractiveFeedTagOverlay from '../../post/tags/InteractiveFeedTagOverlay';
+import { useFeature } from '../../GrowthBookProvider';
+import { featurePostUiImprovements } from '../../../lib/featureManagement';
 
 export const ArticleGrid = forwardRef(function ArticleGrid(
   {
@@ -48,6 +50,7 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
   }: PostCardProps,
   ref: Ref<HTMLElement>,
 ): ReactElement {
+  const postUiExp = useFeature(featurePostUiImprovements);
   const { className, style } = domProps;
   const { data } = useBlockPostPanel(post);
   const onPostCardClick = () => onPostClick(post);
@@ -95,7 +98,7 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
           post,
           classNames(
             className,
-            showFeedback && '!p-0',
+            (showFeedback || postUiExp) && '!p-0',
             postRelevant &&
               '!border-status-success !bg-action-upvote-float text-action-upvote-default',
             postIrrelevant &&
@@ -135,7 +138,7 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
           showFeedback && styles.read,
         )}
       >
-        <CardTextContainer>
+        <CardTextContainer className={classNames(postUiExp && 'mx-4')}>
           <PostCardHeader
             post={post}
             className={showFeedback ? '!hidden' : 'flex'}
@@ -155,7 +158,12 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
         {!showFeedback && (
           <Container>
             <CardSpace />
-            <div className="mx-2 flex items-center">
+            <div
+              className={classNames(
+                'flex items-center',
+                postUiExp ? 'mx-4 ' : 'mx-2',
+              )}
+            >
               {post.clickbaitTitleDetected && <ClickbaitShield post={post} />}
               <PostTags post={post} />
             </div>
@@ -177,6 +185,7 @@ export const ArticleGrid = forwardRef(function ArticleGrid(
             isHoveringCard={isHovering}
             className={{
               image: classNames(
+                postUiExp && 'px-1',
                 showFeedback && 'mb-0',
                 smallCard && ' !my-0 !h-26',
               ),

packages/shared/src/components/cards/collection/CollectionCardHeader.tsx

@@ -9,6 +9,8 @@ import {
 import { useBookmarkProvider } from '../../../hooks';
 import { PostOptionButton } from '../../../features/posts/PostOptionButton';
 import type { Post } from '../../../graphql/posts';
+import { useFeature } from '../../GrowthBookProvider';
+import { featurePostUiImprovements } from '../../../lib/featureManagement';
 
 interface CollectionCardHeaderProps {
   post: Post;
@@ -17,6 +19,7 @@ interface CollectionCardHeaderProps {
 export const CollectionCardHeader = ({
   post,
 }: CollectionCardHeaderProps): ReactElement => {
+  const postUiExp = useFeature(featurePostUiImprovements);
   const {
     collectionSources: sources,
     numCollectionSources: totalSources,
@@ -37,7 +40,7 @@ export const CollectionCardHeader = ({
       <CollectionPillSources
         className={{
           main: classNames(
-            'm-2 mb-1',
+            postUiExp ? 'mb-1 mt-3' : 'm-2 mb-1',
             highlightBookmarkedPost && headerHiddenClassName,
           ),
         }}