diff --git a/packages/shared/src/components/BookmarkEmptyScreen.tsx b/packages/shared/src/components/BookmarkEmptyScreen.tsx index 3d6d5e0c7ed..493c5048e06 100644 --- a/packages/shared/src/components/BookmarkEmptyScreen.tsx +++ b/packages/shared/src/components/BookmarkEmptyScreen.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { BookmarkIcon } from './icons'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import Link from './utilities/Link'; import type { IconProps } from './Icon'; import { IconSize } from './Icon'; @@ -41,9 +41,13 @@ export default function BookmarkEmptyScreen({ {description}

- + ); diff --git a/packages/shared/src/components/BookmarkFeedLayout.tsx b/packages/shared/src/components/BookmarkFeedLayout.tsx index ef12cf9a813..4a3edf99b31 100644 --- a/packages/shared/src/components/BookmarkFeedLayout.tsx +++ b/packages/shared/src/components/BookmarkFeedLayout.tsx @@ -21,8 +21,8 @@ import SearchEmptyScreen from './SearchEmptyScreen'; import type { FeedProps } from './Feed'; import Feed from './Feed'; import BookmarkEmptyScreen from './BookmarkEmptyScreen'; -import type { ButtonProps } from './buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import type { ButtonV2Props } from './buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import { ShareIcon, SortIcon } from './icons'; import { generateQueryKey, OtherFeedPage, RequestKey } from '../lib/query'; import { useFeedLayout, useViewSize, ViewSize } from '../hooks'; @@ -64,11 +64,11 @@ const ShareBookmarksButton = ({ children, ...props }: PropsWithChildren< - Pick, 'className' | 'onClick' | 'icon'> + Pick, 'className' | 'onClick' | 'icon'> >) => ( - + ); const bookmarkSortOptions = [ diff --git a/packages/shared/src/components/CloseButton.tsx b/packages/shared/src/components/CloseButton.tsx index c3df27e2404..37b45ba9186 100644 --- a/packages/shared/src/components/CloseButton.tsx +++ b/packages/shared/src/components/CloseButton.tsx @@ -1,7 +1,7 @@ import type { ReactElement, Ref } from 'react'; import React, { forwardRef } from 'react'; -import type { ButtonProps } from './buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import type { ButtonV2Props } from './buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import { MiniCloseIcon as CloseIcon } from './icons'; function CloseButtonComponent( @@ -9,11 +9,11 @@ function CloseButtonComponent( size = ButtonSize.Medium, variant = ButtonVariant.Tertiary, ...props - }: ButtonProps<'button'>, + }: ButtonV2Props<'button'>, ref: Ref, ): ReactElement { return ( - + ); diff --git a/packages/shared/src/components/Custom404.tsx b/packages/shared/src/components/Custom404.tsx index 9108f1fb367..8b9bc4ba01e 100644 --- a/packages/shared/src/components/Custom404.tsx +++ b/packages/shared/src/components/Custom404.tsx @@ -2,7 +2,7 @@ import type { ReactElement, ReactNode } from 'react'; import React from 'react'; import Link from './utilities/Link'; import { PageContainer } from './utilities'; -import { Button, ButtonVariant } from './buttons/Button'; +import { ButtonV2, ButtonVariant } from './buttons/ButtonV2'; import { useThemedAsset } from '../hooks/utils'; interface Custom404Props { @@ -25,9 +25,9 @@ export default function Custom404({ children }: Custom404Props): ReactElement { You’re not supposed to be here.

- + diff --git a/packages/shared/src/components/CustomFeedEmptyScreen.tsx b/packages/shared/src/components/CustomFeedEmptyScreen.tsx index 4454b51e8e9..9c5381b33b1 100644 --- a/packages/shared/src/components/CustomFeedEmptyScreen.tsx +++ b/packages/shared/src/components/CustomFeedEmptyScreen.tsx @@ -18,7 +18,7 @@ import { TypographyType, } from './typography/Typography'; import { LogEvent, TargetId } from '../lib/log'; -import { Button } from './buttons/Button'; +import { ButtonV2 } from './buttons/ButtonV2'; import { useConditionalFeature, usePlusSubscription } from '../hooks'; import { IconSize } from './Icon'; import { featurePlusApiLanding } from '../lib/featureManagement'; @@ -87,7 +87,7 @@ export const CustomFeedEmptyScreen = (): ReactElement => { tailoring your content.`} - + ) : ( diff --git a/packages/shared/src/components/CustomFeedOptionsMenu.tsx b/packages/shared/src/components/CustomFeedOptionsMenu.tsx index f4bc4b9bd64..7508b5538f5 100644 --- a/packages/shared/src/components/CustomFeedOptionsMenu.tsx +++ b/packages/shared/src/components/CustomFeedOptionsMenu.tsx @@ -3,7 +3,7 @@ import React from 'react'; import classNames from 'classnames'; import { HashtagIcon, MenuIcon as DotsIcon, ShareIcon } from './icons'; import { MenuIcon } from './MenuIcon'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import type { UseShareOrCopyLinkProps } from '../hooks/useShareOrCopyLink'; import { useShareOrCopyLink } from '../hooks/useShareOrCopyLink'; import { useFeeds } from '../hooks'; @@ -76,7 +76,7 @@ const CustomFeedOptionsMenu = ({ return ( - - + ); export const EmptyScreenIcon = { diff --git a/packages/shared/src/components/ExpandableContent.tsx b/packages/shared/src/components/ExpandableContent.tsx index 518a7385e24..7867368440a 100644 --- a/packages/shared/src/components/ExpandableContent.tsx +++ b/packages/shared/src/components/ExpandableContent.tsx @@ -2,11 +2,11 @@ import type { ReactElement, ReactNode } from 'react'; import React, { useState, useRef, useEffect } from 'react'; import classNames from 'classnames'; import { - Button, + ButtonV2, ButtonIconPosition, ButtonSize, ButtonVariant, -} from './buttons/Button'; +} from './buttons/ButtonV2'; import { MoveToIcon } from './icons'; import { IconSize } from './Icon'; @@ -84,7 +84,7 @@ export function ExpandableContent({ {showSeeMore && !isExpanded && (
- +
)} diff --git a/packages/shared/src/components/ExtensionOnboarding.tsx b/packages/shared/src/components/ExtensionOnboarding.tsx index 266d827c224..940414699d2 100644 --- a/packages/shared/src/components/ExtensionOnboarding.tsx +++ b/packages/shared/src/components/ExtensionOnboarding.tsx @@ -4,7 +4,7 @@ import Link from './utilities/Link'; import Logo, { LogoPosition } from './Logo'; import { OnboardingTitleGradient } from './onboarding/common'; import { onboardingUrl } from '../lib/constants'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import { cloudinaryOnboardingGlow } from '../lib/image'; import { useExtensionContext } from '../contexts/ExtensionContext'; @@ -45,14 +45,14 @@ const ExtensionOnboarding = (): ReactElement => {

- + { here

- +
- +
); diff --git a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx index 999fb22e13b..6acab38334a 100644 --- a/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx +++ b/packages/shared/src/components/HorizontalScroll/HorizontalScrollHeader.tsx @@ -2,7 +2,7 @@ import type { MouseEventHandler, ReactElement, ReactNode } from 'react'; import React from 'react'; import classNames from 'classnames'; import Link from '../utilities/Link'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ButtonSize, ButtonVariant } from '../buttons/common'; import ConditionalWrapper from '../ConditionalWrapper'; import { ArrowIcon } from '../icons'; @@ -74,7 +74,7 @@ export function HorizontalScrollHeader({ )} {canScroll && (
- + )}
diff --git a/packages/shared/src/components/InteractionCounter.tsx b/packages/shared/src/components/InteractionCounter.tsx index 84831e54f02..23a9ca74d8a 100644 --- a/packages/shared/src/components/InteractionCounter.tsx +++ b/packages/shared/src/components/InteractionCounter.tsx @@ -6,7 +6,7 @@ import { largeNumberFormat } from '../lib'; export type InteractionCounterProps = { className?: string; - value: number | null; + value: number; }; export default function InteractionCounter({ @@ -31,14 +31,18 @@ export default function InteractionCounter({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); - const elementClassName = classNames( - 'flex h-5 min-w-[1ch] flex-col overflow-hidden', - className, - ); - + // Static (non-animating) render uses inline-flex + items-center so the + // text vertically centers inside the 20 px box. The animated render + // keeps flex-col so the two stacked numbers can slide on the y-axis. if (shownValue === value) { return ( - + {largeNumberFormat(shownValue)} ); @@ -50,10 +54,16 @@ export default function InteractionCounter({ }; const childClassName = - 'h-5 inline-block transition-[opacity,transform] ease-in-out duration-300 will-change-[opacity,transform]'; + 'h-5 inline-flex items-center leading-none transition-[opacity,transform] ease-in-out duration-300 will-change-[opacity,transform]'; return ( - + - - + ); } diff --git a/packages/shared/src/components/NoSidebarLayout.tsx b/packages/shared/src/components/NoSidebarLayout.tsx index d878b2f62b4..18ae6db1702 100644 --- a/packages/shared/src/components/NoSidebarLayout.tsx +++ b/packages/shared/src/components/NoSidebarLayout.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren, ReactNode } from 'react'; import React from 'react'; import { webappUrl } from '../lib/constants'; import Link from './utilities/Link'; -import { Button } from './buttons/Button'; +import { ButtonV2 } from './buttons/ButtonV2'; import { ButtonSize, ButtonVariant } from './buttons/common'; import { ArrowIcon } from './icons'; @@ -27,14 +27,14 @@ export function NoSidebarLayout({ {!hideBackButton && (
- +
)} diff --git a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx index 96b6ccc3cb2..c2db23a8aaf 100644 --- a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx +++ b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx @@ -7,7 +7,7 @@ import { ExitIcon } from '../icons'; import InteractivePopup, { InteractivePopupPosition, } from '../tooltips/InteractivePopup'; -import { ButtonSize } from '../buttons/Button'; +import { ButtonSize } from '../buttons/ButtonV2'; import { checkIsExtension } from '../../lib/func'; import { LogoutReason } from '../../lib/user'; import { TargetId } from '../../lib/log'; diff --git a/packages/shared/src/components/ProfileMenu/sections/ThemeSection.tsx b/packages/shared/src/components/ProfileMenu/sections/ThemeSection.tsx index f8188c90cf0..c1eeb6fb585 100644 --- a/packages/shared/src/components/ProfileMenu/sections/ThemeSection.tsx +++ b/packages/shared/src/components/ProfileMenu/sections/ThemeSection.tsx @@ -7,11 +7,11 @@ import { TypographyType, } from '../../typography/Typography'; import { - Button, - ButtonGroup, + ButtonV2, + ButtonV2Group, ButtonSize, ButtonVariant, -} from '../../buttons/Button'; +} from '../../buttons/ButtonV2'; import { MoonIcon, SunIcon } from '../../icons'; import { ThemeAutoIcon } from '../../icons/ThemeAuto'; import { @@ -58,13 +58,13 @@ export const ThemeSection = ({ Theme - + {themes.map((theme) => { const isActiveTheme = theme.value === themeMode; const Icon = ThemeIconMap[theme.value]; return ( - + ) : ( - + )}
- +
) : undefined} diff --git a/packages/shared/src/components/ScrollToTopButton.tsx b/packages/shared/src/components/ScrollToTopButton.tsx index 989fb8ca8c7..ef3e64b98cf 100644 --- a/packages/shared/src/components/ScrollToTopButton.tsx +++ b/packages/shared/src/components/ScrollToTopButton.tsx @@ -1,8 +1,8 @@ import type { CSSProperties, ReactElement } from 'react'; import React, { useEffect, useState } from 'react'; import classNames from 'classnames'; -import type { ButtonProps } from './buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import type { ButtonV2Props } from './buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import { ArrowIcon } from './icons'; import { useViewSize, ViewSize } from '../hooks'; import { useSettingsContext } from '../contexts/SettingsContext'; @@ -44,7 +44,7 @@ export default function ScrollToTopButton(): ReactElement | null { return null; } - const props: ButtonProps<'button'> = { + const props: ButtonV2Props<'button'> = { icon: , onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }), }; @@ -57,7 +57,7 @@ export default function ScrollToTopButton(): ReactElement | null { }; return ( - + )} ); diff --git a/packages/shared/src/components/ShareMobile.tsx b/packages/shared/src/components/ShareMobile.tsx index c5eef681837..54f1f047909 100644 --- a/packages/shared/src/components/ShareMobile.tsx +++ b/packages/shared/src/components/ShareMobile.tsx @@ -3,11 +3,11 @@ import React, { useContext } from 'react'; import { LinkIcon, ShareIcon } from './icons'; import { useCopyPostLink } from '../hooks/useCopyPostLink'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from './buttons/Button'; +} from './buttons/ButtonV2'; import { WidgetContainer } from './widgets/common'; import { postLogEvent } from '../lib/feed'; import { ActiveFeedContext } from '../contexts'; @@ -47,7 +47,7 @@ export function ShareMobile({ return ( - - + ); } diff --git a/packages/shared/src/components/TagLinks.tsx b/packages/shared/src/components/TagLinks.tsx index 4e03eed7ee1..586d38b542c 100644 --- a/packages/shared/src/components/TagLinks.tsx +++ b/packages/shared/src/components/TagLinks.tsx @@ -2,8 +2,8 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import Link from './utilities/Link'; -import type { ButtonProps } from './buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import type { ButtonV2Props } from './buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from './buttons/ButtonV2'; import { AlertDot, AlertColor } from './AlertDot'; import { getTagPageLink } from '../lib/links'; @@ -11,7 +11,7 @@ interface TagLinkProps { tag: string; className?: string; isSelected?: boolean; - buttonProps?: ButtonProps<'a'>; + buttonProps?: ButtonV2Props<'a'>; } export function TagLink({ @@ -22,7 +22,7 @@ export function TagLink({ }: TagLinkProps): ReactElement { return ( - + ); } diff --git a/packages/shared/src/components/UpgradeToPlus.tsx b/packages/shared/src/components/UpgradeToPlus.tsx index 047bb7146e6..74573c9d7f4 100644 --- a/packages/shared/src/components/UpgradeToPlus.tsx +++ b/packages/shared/src/components/UpgradeToPlus.tsx @@ -1,8 +1,8 @@ import React, { useCallback } from 'react'; import type { ReactElement } from 'react'; import classNames from 'classnames'; -import type { ButtonSize } from './buttons/Button'; -import { ButtonColor, Button, ButtonVariant } from './buttons/Button'; +import type { ButtonSize } from './buttons/ButtonV2'; +import { ButtonColor, ButtonV2, ButtonVariant } from './buttons/ButtonV2'; import { DevPlusIcon } from './icons'; import Link from './utilities/Link'; import { plusUrl } from '../lib/constants'; @@ -69,7 +69,7 @@ export const UpgradeToPlus = ({ return ( - + ); }; diff --git a/packages/shared/src/components/accordion/index.tsx b/packages/shared/src/components/accordion/index.tsx index 30399f322ac..3e806c4be88 100644 --- a/packages/shared/src/components/accordion/index.tsx +++ b/packages/shared/src/components/accordion/index.tsx @@ -9,7 +9,7 @@ import { AccordionHeader, } from '@radix-ui/react-accordion'; import styles from './style.module.css'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; interface AccordionProps { @@ -106,7 +106,7 @@ export function Accordion({ return (
- +
  1. - + ))}
{renderOrDivider && } diff --git a/packages/shared/src/components/auth/AuthHeader.tsx b/packages/shared/src/components/auth/AuthHeader.tsx index dc6d5f28eab..991d3b3ff18 100644 --- a/packages/shared/src/components/auth/AuthHeader.tsx +++ b/packages/shared/src/components/auth/AuthHeader.tsx @@ -6,7 +6,7 @@ import type { ComponentProps, } from 'react'; import React from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; import { Modal } from '../modals/common/Modal'; import { ModalHeaderKind } from '../modals/common/types'; @@ -42,7 +42,7 @@ function AuthHeader({ title={title} > {onBack && ( - + ); diff --git a/packages/shared/src/components/auth/EmailCodeVerification.tsx b/packages/shared/src/components/auth/EmailCodeVerification.tsx index 8ccd6d96c92..caf6148819b 100644 --- a/packages/shared/src/components/auth/EmailCodeVerification.tsx +++ b/packages/shared/src/components/auth/EmailCodeVerification.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React, { useRef, useState } from 'react'; import classNames from 'classnames'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import type { AuthFormProps } from './common'; import AuthForm from './AuthForm'; import { AuthEventNames } from '../../lib/auth'; @@ -163,14 +163,14 @@ function EmailCodeVerification({
- + ); } diff --git a/packages/shared/src/components/auth/EmailSignupForm.tsx b/packages/shared/src/components/auth/EmailSignupForm.tsx index 9ce1c0c65b6..3500c8b60d5 100644 --- a/packages/shared/src/components/auth/EmailSignupForm.tsx +++ b/packages/shared/src/components/auth/EmailSignupForm.tsx @@ -5,7 +5,7 @@ import AuthForm from './AuthForm'; import { TextField } from '../fields/TextField'; import { MailIcon, ArrowIcon } from '../icons'; import { IconSize } from '../Icon'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; interface EmailSignupFormProps { onSubmit: (e: React.FormEvent) => unknown; @@ -30,7 +30,7 @@ function EmailSignupForm({ > - + {simplified && onBack && ( } autoFocus /> - + {simplified && onBack && ( )} - + {hint && hint === labels.auth.error.invalidEmailOrPassword && ( diff --git a/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx b/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx index 44cf1a32661..be9789380e0 100644 --- a/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx +++ b/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx @@ -6,8 +6,8 @@ import OrDivider from './OrDivider'; import { useLogContext } from '../../contexts/LogContext'; import type { AuthTriggersType } from '../../lib/auth'; import { AuthEventNames, AuthTriggers } from '../../lib/auth'; -import type { ButtonProps } from '../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import type { ButtonV2Props } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { isIOSNative } from '../../lib/func'; import { MemberAlready } from '../onboarding/MemberAlready'; @@ -35,7 +35,7 @@ interface OnboardingRegistrationFormProps extends AuthFormProps { isReady: boolean; isSocialAuthLoading?: boolean; className?: ClassName; - onboardingSignupButton?: ButtonProps<'button'>; + onboardingSignupButton?: ButtonV2Props<'button'>; hideLoginLink?: boolean; compact?: boolean; } @@ -141,7 +141,7 @@ export const OnboardingRegistrationForm = ({
    {getSignupProviders().map((provider) => (
  • - +
    • ))}
@@ -177,7 +177,7 @@ export const OnboardingRegistrationForm = ({ /> )} - + ); diff --git a/packages/shared/src/components/auth/RegistrationFieldsForm.tsx b/packages/shared/src/components/auth/RegistrationFieldsForm.tsx index e5a971c7e22..5ec3db5938a 100644 --- a/packages/shared/src/components/auth/RegistrationFieldsForm.tsx +++ b/packages/shared/src/components/auth/RegistrationFieldsForm.tsx @@ -4,7 +4,7 @@ import { PasswordField } from '../fields/PasswordField'; import { Checkbox } from '../fields/Checkbox'; import ExperienceLevelDropdown from '../profile/ExperienceLevelDropdown'; import type { UserExperienceLevel } from '../../lib/user'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import ImageInput from '../fields/ImageInput'; import { useGenerateUsername } from '../../hooks'; import { labels } from '../../lib'; @@ -218,14 +218,14 @@ const RegistrationFieldsForm: React.FC = ({ > I don't want to receive updates and promotions via email - + ); }; diff --git a/packages/shared/src/components/auth/RegistrationForm.tsx b/packages/shared/src/components/auth/RegistrationForm.tsx index d713f00fda9..d6734ff0a43 100644 --- a/packages/shared/src/components/auth/RegistrationForm.tsx +++ b/packages/shared/src/components/auth/RegistrationForm.tsx @@ -13,7 +13,7 @@ import { AuthEventNames, AuthTriggers } from '../../lib/auth'; import { useConditionalFeature } from '../../hooks/useConditionalFeature'; import { featureOnboardingV2 } from '../../lib/featureManagement'; import { formToJson } from '../../lib/form'; -import { Button, ButtonVariant, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonVariant, ButtonSize } from '../buttons/ButtonV2'; import { PasswordField } from '../fields/PasswordField'; import { TextField } from '../fields/TextField'; import { MailIcon, UserIcon, VIcon, AtIcon, ArrowIcon } from '../icons'; @@ -272,7 +272,7 @@ const RegistrationForm = ({ <> {!isAuthenticating && (
- + diff --git a/packages/shared/src/components/auth/SocialRegistrationForm.tsx b/packages/shared/src/components/auth/SocialRegistrationForm.tsx index 17073e111f5..fe01a05e014 100644 --- a/packages/shared/src/components/auth/SocialRegistrationForm.tsx +++ b/packages/shared/src/components/auth/SocialRegistrationForm.tsx @@ -9,7 +9,7 @@ import { AuthEventNames, AuthTriggers } from '../../lib/auth'; import { useConditionalFeature } from '../../hooks/useConditionalFeature'; import { featureOnboardingV2 } from '../../lib/featureManagement'; import { formToJson } from '../../lib/form'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import ImageInput from '../fields/ImageInput'; import { TextField } from '../fields/TextField'; import { MailIcon, UserIcon, LockIcon, AtIcon } from '../icons'; @@ -265,7 +265,7 @@ export const SocialRegistrationForm = ({ )} > - + diff --git a/packages/shared/src/components/auth/common.tsx b/packages/shared/src/components/auth/common.tsx index 8ac4a945b6f..af20c868b13 100644 --- a/packages/shared/src/components/auth/common.tsx +++ b/packages/shared/src/components/auth/common.tsx @@ -2,7 +2,7 @@ import type { MutableRefObject } from 'react'; import React from 'react'; import { FacebookIcon, GoogleIcon, GitHubIcon, AppleIcon } from '../icons'; import classed from '../../lib/classed'; -import type { IconType, ButtonProps } from '../buttons/Button'; +import type { IconType, ButtonV2Props } from '../buttons/ButtonV2'; import type { CloseAuthModalFunc } from '../../hooks/useAuthForms'; import type { AnonymousUser, LoggedUser } from '../../lib/user'; import type { AuthTriggersType } from '../../lib/auth'; @@ -129,7 +129,7 @@ export interface AuthOptionsProps { initialEmail?: string; targetId?: string; ignoreMessages?: boolean; - onboardingSignupButton?: ButtonProps<'button'>; + onboardingSignupButton?: ButtonV2Props<'button'>; hideLoginLink?: boolean; compact?: boolean; autoTriggerProvider?: string; diff --git a/packages/shared/src/components/award/AwardButton.tsx b/packages/shared/src/components/award/AwardButton.tsx index f2af4e36e2d..f39097899f4 100644 --- a/packages/shared/src/components/award/AwardButton.tsx +++ b/packages/shared/src/components/award/AwardButton.tsx @@ -1,13 +1,13 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import type { ButtonProps } from '../buttons/Button'; +import type { ButtonV2Props } from '../buttons/ButtonV2'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { MedalBadgeIcon } from '../icons'; import { AuthTriggers } from '../../lib/auth'; import { LazyModal } from '../modals/common/types'; @@ -27,7 +27,7 @@ type AwardButtonProps = { flags?: Record; post?: Post; copy?: string; -} & Pick, 'pressed' | 'variant'>; +} & Pick, 'pressed' | 'variant'>; export const AwardButton = ({ type, className, @@ -70,17 +70,17 @@ export const AwardButton = ({ } >
- +
); diff --git a/packages/shared/src/components/banners/HeroBottomBanner.tsx b/packages/shared/src/components/banners/HeroBottomBanner.tsx index 015c9681f04..d4a53576850 100644 --- a/packages/shared/src/components/banners/HeroBottomBanner.tsx +++ b/packages/shared/src/components/banners/HeroBottomBanner.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { MiniCloseIcon } from '../icons'; import feedStyles from '../Feed.module.css'; import ReadingReminderCatLaptop from './ReadingReminderCatLaptop'; @@ -31,7 +31,7 @@ export const TopHero = ({
- +
diff --git a/packages/shared/src/components/banners/PlusMobileEntryBanner.tsx b/packages/shared/src/components/banners/PlusMobileEntryBanner.tsx index f04d87a6f21..01247197a24 100644 --- a/packages/shared/src/components/banners/PlusMobileEntryBanner.tsx +++ b/packages/shared/src/components/banners/PlusMobileEntryBanner.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ReactElement } from 'react'; import React from 'react'; -import { ButtonColor, ButtonVariant, Button } from '../buttons/Button'; +import { ButtonColor, ButtonVariant, ButtonV2 } from '../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -85,7 +85,7 @@ const PlusMobileEntryBanner = ({
- - +
diff --git a/packages/shared/src/components/banners/ReadingReminderHero.tsx b/packages/shared/src/components/banners/ReadingReminderHero.tsx index f81619da8d1..c5c1b2cc75d 100644 --- a/packages/shared/src/components/banners/ReadingReminderHero.tsx +++ b/packages/shared/src/components/banners/ReadingReminderHero.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import CloseButton from '../CloseButton'; import { Typography, @@ -47,13 +47,13 @@ const ReadingReminderHero = ({ {subtitle}
- +
diff --git a/packages/shared/src/components/banners/ShortcutsExtensionPromo.tsx b/packages/shared/src/components/banners/ShortcutsExtensionPromo.tsx index 168c4827beb..b4700d3585e 100644 --- a/packages/shared/src/components/banners/ShortcutsExtensionPromo.tsx +++ b/packages/shared/src/components/banners/ShortcutsExtensionPromo.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { PropsWithChildren, ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ChromeIcon, EdgeIcon, PlusIcon } from '../icons'; import { Typography, @@ -102,10 +102,14 @@ const ShortcutsExtensionPromo = ({
- - +
); diff --git a/packages/shared/src/components/bookmark/BookmarkFolderContextMenu.tsx b/packages/shared/src/components/bookmark/BookmarkFolderContextMenu.tsx index ed12993f232..de932086cca 100644 --- a/packages/shared/src/components/bookmark/BookmarkFolderContextMenu.tsx +++ b/packages/shared/src/components/bookmark/BookmarkFolderContextMenu.tsx @@ -13,7 +13,7 @@ import { DropdownMenuOptions, DropdownMenuTrigger, } from '../dropdown/DropdownMenu'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import type { MenuItemProps } from '../dropdown/common'; interface BookmarkFolderContextMenuProps { @@ -67,7 +67,7 @@ export const BookmarkFolderContextMenu = ({ return ( - + )} diff --git a/packages/shared/src/components/brand/SponsoredTooltip.tsx b/packages/shared/src/components/brand/SponsoredTooltip.tsx index eb13b583172..ffe3d87edbc 100644 --- a/packages/shared/src/components/brand/SponsoredTooltip.tsx +++ b/packages/shared/src/components/brand/SponsoredTooltip.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import type { BrandColors, HighlightedWordConfig } from '../../lib/brand'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; interface SponsoredTooltipProps { config: HighlightedWordConfig; @@ -62,16 +62,16 @@ export const SponsoredTooltip = ({ {config.tooltipDescription}

- {/* CTA Button */} + {/* CTA ButtonV2 */} {config.ctaText && config.ctaUrl && ( - + )} ); diff --git a/packages/shared/src/components/buttons/BookmarkButton.tsx b/packages/shared/src/components/buttons/BookmarkButton.tsx index 7536a8fa8c8..2e1c46da652 100644 --- a/packages/shared/src/components/buttons/BookmarkButton.tsx +++ b/packages/shared/src/components/buttons/BookmarkButton.tsx @@ -1,17 +1,17 @@ -import type { ReactElement, ReactNode } from 'react'; +import type { MouseEventHandler, ReactElement } from 'react'; import React from 'react'; import type { Post } from '../../graphql/posts'; -import type { QuaternaryButtonProps } from './QuaternaryButton'; -import { QuaternaryButton } from './QuaternaryButton'; +import type { CardActionDensity } from './CardAction'; +import { CardAction } from './CardAction'; import { BookmarkIcon } from '../icons'; import { BookmarkReminderIcon } from '../icons/Bookmark/Reminder'; import { useLazyModal } from '../../hooks/useLazyModal'; import { LazyModal } from '../modals/common/types'; import { useBookmarkReminder } from '../../hooks/notifications'; -import { ButtonColor, ButtonIconPosition, ButtonVariant } from './Button'; +import type { ColorName } from '../../styles/colors'; +import { ColorName as ButtonColor } from '../../styles/colors'; import type { TooltipProps } from '../tooltip/Tooltip'; import { Tooltip } from '../tooltip/Tooltip'; -import type { IconSize } from '../Icon'; import { DropdownMenu, DropdownMenuContent, @@ -20,29 +20,100 @@ import { } from '../dropdown/DropdownMenu'; import type { MenuItemProps } from '../dropdown/common'; -interface BookmarkButtonProps { - buttonProps?: Omit, 'icon'>; - contextMenuId?: string; +/** + * `BookmarkButton` — engagement-bar bookmark affordance. + * + * Built on `CardAction` so it inherits the v2 engagement-bar contract + * (icon-to-button ratio, pressed-icon swap, density-aware sizing, + * counter slot inside the click target). When the post has an active + * reminder, the button becomes a `DropdownMenu` trigger that opens + * Edit reminder / Remove reminder / Remove bookmark — the reminder + * variant of the icon (`BookmarkReminderIcon`) replaces the default + * one so the surface communicates state at a glance. + */ +export interface BookmarkButtonProps { post: Post; - children?: ReactNode; - iconSize?: IconSize; + /** + * Density passes through to `CardAction`. Default `compact` matches + * the feed-grid card width contract; `comfortable` is for post-detail + * strip + sticky bottom bar. + */ + density?: CardActionDensity; + /** Render the "Bookmark" label inline next to the icon. */ + labelVisible?: boolean; + /** a11y label + inline label when `labelVisible`. */ + label?: string; + /** Optional engagement counter (rare on bookmark, exposed for parity). */ + count?: number | null; + /** Tertiary tint. Defaults to `Bun` (the bookmark color). */ + color?: ColorName; + pressed?: boolean; + onClick?: MouseEventHandler; + className?: string; + buttonClassName?: string; + id?: string; tooltipSide?: TooltipProps['side']; } export function BookmarkButton({ - buttonProps = {}, post, - children, - iconSize, + density, + labelVisible, + label, + count, + color = ButtonColor.Bun, + pressed, + onClick, + className, + buttonClassName, + id, tooltipSide, }: BookmarkButtonProps): ReactElement { + const isBookmarked = pressed ?? post.bookmarked; const hasReminder = !!post.bookmark?.remindAt; const { openModal } = useLazyModal(); const { onRemoveReminder } = useBookmarkReminder({ post }); - const Icon = hasReminder ? BookmarkReminderIcon : BookmarkIcon; - const buttonIconPosition = children - ? ButtonIconPosition.Top - : ButtonIconPosition.Left; + + const baseIcon = hasReminder ? : ; + const pressedIcon = hasReminder ? ( + + ) : ( + + ); + + // State-aware accessible name matches the v1 tooltip text contract, + // so screen readers + RTL `findByLabelText('Remove bookmark')` keep + // working without changing the aria surface area. + const resolvedLabel = + label ?? (isBookmarked ? 'Remove bookmark' : 'Bookmark'); + + const cardAction = ( + + ); + + if (!hasReminder) { + return ( + + {cardAction} + + ); + } const dropdownOptions: MenuItemProps[] = [ { @@ -57,59 +128,35 @@ export function BookmarkButton({ { label: 'Remove bookmark', action: (...args: unknown[]) => - buttonProps.onClick?.(args[0] as React.MouseEvent), + onClick?.(args[0] as React.MouseEvent), }, ]; - if (hasReminder) { - const { onClick, ...buttonPropsWithoutOnClick } = buttonProps; - - return ( - - - } - > - {children} - - - - - - - ); - } - return ( - - ) => - buttonProps.onClick?.(e) - } - icon={} + + - {children} - - + + + + + + ); } diff --git a/packages/shared/src/components/buttons/ButtonV2.tsx b/packages/shared/src/components/buttons/ButtonV2.tsx index ba880b6e0d5..e3691a09c76 100644 --- a/packages/shared/src/components/buttons/ButtonV2.tsx +++ b/packages/shared/src/components/buttons/ButtonV2.tsx @@ -70,25 +70,37 @@ const IconOnlySizeToClassNameV2: Record = { }; /** - * Icon-to-label spacing per size. Replaces the v1 negative-margin - * trick (`-ml-2 mr-1`) that was hardcoded to negate `px-2` and gave - * Medium / Large / XLarge visibly asymmetric internal padding. + * Icon-to-label spacing per size. * - * Spacing scales with the button — same convention as Linear, Notion, - * Vercel, ChatGPT, Claude. Roughly ¼–⅓ of the side padding so the - * icon-text pair reads as a unit, not as two separate siblings: + * v2 first-pass scaled the gap with button size (gap-1 → gap-2.5) + * following Linear / Notion's "modern, breathable" convention. On + * migration this read as visibly looser than v1 across every size: + * v1's `mr-1` (4 px) on the icon — combined with the now-retired + * `-ml-2` negative-margin trick — produced an *effective* 4 px gap + * between icon and label regardless of size. v2's 6 – 10 px gaps on + * Small / Medium / Large / XLarge made every icon+label button read + * as wider than its v1 sibling, with the worst case (XLarge) ~22 px + * wider. Toolbars and header strips that pack 3-5 buttons in a row + * (header rail, MyFeedHeading, FeedSettings strip) felt visibly + * looser than the v1 surfaces all the call sites were tuned for. * - * XSmall px-2 + gap-1 (8 + 4 px) — chip-tight - * Small px-3 + gap-1.5 (12 + 6 px) - * Medium px-4 + gap-2 (16 + 8 px) — Linear / Notion default - * Large px-6 + gap-2 (24 + 8 px) - * XLarge px-7 + gap-2.5 (28 + 10 px) — hero CTA + * Restoring v1's flat 4 px gap (`gap-1`) on the most-common sizes + * (Small / Medium / XSmall) and a single-step bump on the largest + * sizes (Large / XLarge) keeps icon+label buttons visually identical + * to v1 on every toolbar surface while preserving a touch of extra + * breathing room on hero / emphasis CTAs. + * + * XSmall gap-1 (4 px) — matches v1 + * Small gap-1 (4 px) — matches v1 + * Medium gap-1 (4 px) — matches v1 + * Large gap-1.5 (6 px) — slight bump for emphasis CTA + * XLarge gap-2 (8 px) — slight bump for hero CTA */ const SizeToGapV2: Record = { - [ButtonSize.XLarge]: 'gap-2.5', - [ButtonSize.Large]: 'gap-2', - [ButtonSize.Medium]: 'gap-2', - [ButtonSize.Small]: 'gap-1.5', + [ButtonSize.XLarge]: 'gap-2', + [ButtonSize.Large]: 'gap-1.5', + [ButtonSize.Medium]: 'gap-1', + [ButtonSize.Small]: 'gap-1', [ButtonSize.XSmall]: 'gap-1', }; diff --git a/packages/shared/src/components/buttons/CardAction.tsx b/packages/shared/src/components/buttons/CardAction.tsx index d5c99010fb0..b116e971ab7 100644 --- a/packages/shared/src/components/buttons/CardAction.tsx +++ b/packages/shared/src/components/buttons/CardAction.tsx @@ -1,4 +1,9 @@ -import type { ReactElement, Ref, MouseEventHandler } from 'react'; +import type { + HTMLAttributes, + ReactElement, + Ref, + MouseEventHandler, +} from 'react'; import React, { forwardRef } from 'react'; import classNames from 'classnames'; import type { IconProps } from '../Icon'; @@ -113,7 +118,22 @@ const densityToIconSize: Record = { type IconElement = React.ReactElement; -type CardActionBaseProps = { +// Pass-through HTML attributes (id, role, aria-*, data-*, type, etc.) +// for the underlying button / anchor element. Excludes the few props +// we own explicitly (icon, label, onClick, etc.) so the public API +// stays unambiguous. +type CardActionPassthroughProps = Omit< + HTMLAttributes, + | 'children' + | 'className' + | 'onClick' + | 'aria-label' + | 'aria-pressed' + | 'aria-busy' + | 'aria-disabled' +>; + +type CardActionBaseProps = CardActionPassthroughProps & { /** Icon shown in the default (idle) state. */ icon: IconElement; /** diff --git a/packages/shared/src/components/buttons/CardActionBar.tsx b/packages/shared/src/components/buttons/CardActionBar.tsx index 239fd7167bb..5edfd402ef4 100644 --- a/packages/shared/src/components/buttons/CardActionBar.tsx +++ b/packages/shared/src/components/buttons/CardActionBar.tsx @@ -1,5 +1,5 @@ -import type { HTMLAttributes, ReactElement, ReactNode } from 'react'; -import React from 'react'; +import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'; +import React, { forwardRef } from 'react'; import classNames from 'classnames'; /** @@ -70,15 +70,14 @@ export type CardActionBarProps = HTMLAttributes & { children: ReactNode; }; -export function CardActionBar({ - layout = 'default', - className, - children, - ...rest -}: CardActionBarProps): ReactElement { +function CardActionBarComponent( + { layout = 'default', className, children, ...rest }: CardActionBarProps, + ref?: Ref, +): ReactElement { return (
); } + +export const CardActionBar = forwardRef(CardActionBarComponent); diff --git a/packages/shared/src/components/buttons/OptionsButton.tsx b/packages/shared/src/components/buttons/OptionsButton.tsx index 97a4b66a3d0..cc52b8d8738 100644 --- a/packages/shared/src/components/buttons/OptionsButton.tsx +++ b/packages/shared/src/components/buttons/OptionsButton.tsx @@ -2,12 +2,12 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import type { TooltipContentProps } from '@radix-ui/react-tooltip'; -import type { AllowedTags, ButtonProps } from './Button'; -import { Button, ButtonSize, ButtonVariant } from './Button'; +import type { AllowedTags, ButtonV2Props } from './ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from './ButtonV2'; import { MenuIcon } from '../icons'; import { Tooltip } from '../tooltip/Tooltip'; -type OptionsButtonProps = ButtonProps & +type OptionsButtonProps = ButtonV2Props & Pick; const OptionsButton = ({ @@ -18,7 +18,7 @@ const OptionsButton = ({ ...props }: OptionsButtonProps): ReactElement => ( - + ); } @@ -89,7 +89,7 @@ export const ToggleClickbaitShield = ({ isClickbaitShieldEnabled ? 'off' : 'on' }`} > - + ); }; diff --git a/packages/shared/src/components/cards/Leaderboard/RankBadge.tsx b/packages/shared/src/components/cards/Leaderboard/RankBadge.tsx index b7a32100253..3222080c684 100644 --- a/packages/shared/src/components/cards/Leaderboard/RankBadge.tsx +++ b/packages/shared/src/components/cards/Leaderboard/RankBadge.tsx @@ -102,11 +102,7 @@ export function RankBadge({ rank, className }: RankBadgeProps): ReactElement { style={{ backgroundColor: style.glowColor }} />
- +
{Array.from({ length: SPARK_COUNT }, (_, i) => (
- + {Array.from({ length: SPARK_COUNT }, (_, i) => (
- +
); diff --git a/packages/shared/src/components/cards/ad/AdGrid.tsx b/packages/shared/src/components/cards/ad/AdGrid.tsx index a841a454250..5a064739f83 100644 --- a/packages/shared/src/components/cards/ad/AdGrid.tsx +++ b/packages/shared/src/components/cards/ad/AdGrid.tsx @@ -18,7 +18,7 @@ import { RemoveAd } from './common/RemoveAd'; import { usePlusSubscription } from '../../../hooks/usePlusSubscription'; import type { InViewRef } from '../../../hooks/feed/useAutoRotatingAds'; import { useAutoRotatingAds } from '../../../hooks/feed/useAutoRotatingAds'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; import { AdFavicon } from './common/AdFavicon'; import PostTags from '../common/PostTags'; @@ -60,7 +60,7 @@ export const AdGrid = forwardRef(function AdGrid(
{!!ad.callToAction && ( - + )} (function AdCard(
{!!ad.callToAction && ( - + )} - +
)}
diff --git a/packages/shared/src/components/cards/ad/common/AdRefresh.tsx b/packages/shared/src/components/cards/ad/common/AdRefresh.tsx index ac45699e28f..d792de507c4 100644 --- a/packages/shared/src/components/cards/ad/common/AdRefresh.tsx +++ b/packages/shared/src/components/cards/ad/common/AdRefresh.tsx @@ -1,17 +1,17 @@ import type { ReactElement } from 'react'; import React from 'react'; import { ButtonSize, ButtonVariant } from '../../../buttons/common'; -import type { AllowedTags, ButtonProps } from '../../../buttons/Button'; -import { Button } from '../../../buttons/Button'; +import type { AllowedTags, ButtonV2Props } from '../../../buttons/ButtonV2'; +import { ButtonV2 } from '../../../buttons/ButtonV2'; import { RefreshIcon } from '../../../icons'; export const AdRefresh = ({ onClick, size = ButtonSize.Medium, ...props -}: ButtonProps): ReactElement => { +}: ButtonV2Props): ReactElement => { return ( - + ); } diff --git a/packages/shared/src/components/cards/ad/common/RemoveAd.tsx b/packages/shared/src/components/cards/ad/common/RemoveAd.tsx index a6b8aad01a4..9a4d5f14fd0 100644 --- a/packages/shared/src/components/cards/ad/common/RemoveAd.tsx +++ b/packages/shared/src/components/cards/ad/common/RemoveAd.tsx @@ -1,19 +1,19 @@ import React from 'react'; import classNames from 'classnames'; import type { ReactElement } from 'react'; -import type { AllowedTags, ButtonProps } from '../../../buttons/Button'; +import type { AllowedTags, ButtonV2Props } from '../../../buttons/ButtonV2'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../../../buttons/Button'; +} from '../../../buttons/ButtonV2'; import { plusUrl } from '../../../../lib/constants'; import Link from '../../../utilities/Link'; import { LogEvent, TargetId } from '../../../../lib/log'; import { usePlusSubscription } from '../../../../hooks'; -type Props = { iconOnly?: boolean } & ButtonProps; +type Props = { iconOnly?: boolean } & ButtonV2Props; export const RemoveAd = ({ className, @@ -24,7 +24,7 @@ export const RemoveAd = ({ const { logSubscriptionEvent } = usePlusSubscription(); return ( - + ); }; diff --git a/packages/shared/src/components/cards/ad/squad/SquadAdAction.tsx b/packages/shared/src/components/cards/ad/squad/SquadAdAction.tsx index 61e50d829fb..656973d0e4b 100644 --- a/packages/shared/src/components/cards/ad/squad/SquadAdAction.tsx +++ b/packages/shared/src/components/cards/ad/squad/SquadAdAction.tsx @@ -5,7 +5,7 @@ import { SquadActionButton } from '../../../squads/SquadActionButton'; import { Origin } from '../../../../lib/log'; import { ButtonVariant } from '../../../buttons/common'; import Link from '../../../utilities/Link'; -import { Button } from '../../../buttons/Button'; +import { ButtonV2 } from '../../../buttons/ButtonV2'; import type { Squad } from '../../../../graphql/sources'; interface SquadAdActionProps { @@ -36,14 +36,14 @@ export function SquadAdAction({ return ( - + ); } diff --git a/packages/shared/src/components/cards/article/feedback/common/FeedbackButtons.tsx b/packages/shared/src/components/cards/article/feedback/common/FeedbackButtons.tsx index c433fe59b42..f59b5d7b897 100644 --- a/packages/shared/src/components/cards/article/feedback/common/FeedbackButtons.tsx +++ b/packages/shared/src/components/cards/article/feedback/common/FeedbackButtons.tsx @@ -1,6 +1,10 @@ import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonColor, ButtonVariant } from '../../../../buttons/Button'; +import { + ButtonV2, + ButtonColor, + ButtonVariant, +} from '../../../../buttons/ButtonV2'; import { UserVote } from '../../../../../graphql/posts'; import { DownvoteIcon, UpvoteIcon } from '../../../../icons'; import type { FeedbackProps } from './common'; @@ -12,7 +16,7 @@ export const FeedbackButtons = ({ }: FeedbackProps): ReactElement => { return (
-
{time}
- +
); }; diff --git a/packages/shared/src/components/cards/brief/BriefCard/BriefCardDefault.tsx b/packages/shared/src/components/cards/brief/BriefCard/BriefCardDefault.tsx index d87c57cf27a..3089325d5a1 100644 --- a/packages/shared/src/components/cards/brief/BriefCard/BriefCardDefault.tsx +++ b/packages/shared/src/components/cards/brief/BriefCard/BriefCardDefault.tsx @@ -15,7 +15,7 @@ import { import type { BriefCardProps } from './BriefCard'; import { BriefGradientIcon } from '../../../icons'; import { IconSize } from '../../../Icon'; -import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../../buttons/ButtonV2'; import { BriefingType, getGenerateBriefingMutationOptions, @@ -119,7 +119,7 @@ export const BriefCardDefault = ({ {title} {children} - + ); }; diff --git a/packages/shared/src/components/cards/common/ActionButtons.tsx b/packages/shared/src/components/cards/common/ActionButtons.tsx index 20a909c5be0..dde51ffc52d 100644 --- a/packages/shared/src/components/cards/common/ActionButtons.tsx +++ b/packages/shared/src/components/cards/common/ActionButtons.tsx @@ -2,18 +2,17 @@ import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import classNames from 'classnames'; import type { Post } from '../../../graphql/posts'; -import InteractionCounter from '../../InteractionCounter'; -import { QuaternaryButton } from '../../buttons/QuaternaryButton'; +import { CardAction } from '../../buttons/CardAction'; +import { CardActionBar } from '../../buttons/CardActionBar'; import { DiscussIcon as CommentIcon, LinkIcon, DownvoteIcon, } from '../../icons'; -import { ButtonColor, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonColor } from '../../buttons/ButtonV2'; import { useFeedPreviewMode } from '../../../hooks'; import { UpvoteButtonIcon } from './UpvoteButtonIcon'; import { BookmarkButton } from '../../buttons'; -import { IconSize } from '../../Icon'; import { Tooltip } from '../../tooltip/Tooltip'; import PostAwardAction from '../../post/PostAwardAction'; import ConditionalWrapper from '../../ConditionalWrapper'; @@ -38,24 +37,24 @@ export interface ActionButtonsProps { showAwardAction?: boolean; } +// All three feed-card variants (grid, list, signal) ship at the +// `compact` density per the CardAction width contract — the card +// body lives inside the production 272-340 px clamp and 5+ actions +// at the comfortable 40 px size overflow narrow grid cards. +const FEED_CARD_DENSITY = 'compact'; + const variantConfig = { grid: { - buttonSize: ButtonSize.Small, - iconSize: IconSize.XSmall, containerClassName: 'px-1 pb-1', showTagsPanel: false, useCommentLink: false, }, list: { - buttonSize: ButtonSize.Small, - iconSize: IconSize.XSmall, containerClassName: '', showTagsPanel: true, useCommentLink: true, }, signal: { - buttonSize: ButtonSize.Small, - iconSize: IconSize.XSmall, containerClassName: '', showTagsPanel: false, useCommentLink: true, @@ -124,48 +123,33 @@ const ActionButtons = ({ tooltip={{ content: 'Comment' }} href={post.commentsPermalink} > - } + density={FEED_CARD_DENSITY} + icon={} + iconPressed={} + label="Comment" + count={commentCount} + color={ButtonColor.BlueCheese} onClick={() => onCommentClick?.(post)} - > - {commentCount > 0 && ( - - )} - + buttonClassName="pointer-events-auto" + /> ) : ( - } + density={FEED_CARD_DENSITY} + icon={} + iconPressed={} + label="Comments" + count={commentCount} pressed={post.commented} onClick={() => onCommentClick?.(post)} - size={config.buttonSize} - className="btn-tertiary-blueCheese" - > - {commentCount > 0 && ( - - )} - + color={ButtonColor.BlueCheese} + /> ); @@ -177,97 +161,75 @@ const ActionButtons = ({ className, )} > -
+ - + icon={} + iconPressed={ + } - > - {upvoteCount > 0 && ( - - )} - + label={isUpvoteActive ? 'Remove upvote' : 'More like this'} + count={upvoteCount} + buttonClassName="pointer-events-auto" + /> {showDownvoteAction && ( - - } + icon={} + iconPressed={} + label={isDownvoteActive ? 'Remove downvote' : 'Less like this'} pressed={isDownvoteActive} onClick={onToggleDownvote} - variant={ButtonVariant.Tertiary} - size={config.buttonSize} + buttonClassName="pointer-events-auto" /> )} {commentButton} {showAwardAction && ( - + )} - } + density={FEED_CARD_DENSITY} + icon={} + label="Copy link" onClick={onCopyLink} - variant={ButtonVariant.Tertiary} color={ButtonColor.Cabbage} - className={variant === 'list' ? 'pointer-events-auto' : undefined} + buttonClassName={classNames( + variant === 'list' && 'pointer-events-auto', + )} /> -
+ ); diff --git a/packages/shared/src/components/cards/common/CardCoverShare.tsx b/packages/shared/src/components/cards/common/CardCoverShare.tsx index 9fe6b75c6c0..219a9e7400c 100644 --- a/packages/shared/src/components/cards/common/CardCoverShare.tsx +++ b/packages/shared/src/components/cards/common/CardCoverShare.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { ShareIcon } from '../../icons'; import { useLoggedCopyPostLink } from '../../../hooks/post'; import type { Post } from '../../../graphql/posts'; @@ -28,14 +28,14 @@ export function CardCoverShare({ return ( - - + ); diff --git a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx index 23e2cc32b2c..62099821945 100644 --- a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx +++ b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx @@ -15,7 +15,7 @@ import { ShareIcon, TrendingIcon, } from '../../icons'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import type { Squad } from '../../../graphql/sources'; import { useCampaignById } from '../../../graphql/campaigns'; import { useAuthContext } from '../../../contexts/AuthContext'; @@ -106,7 +106,7 @@ export function SquadOptionsButton({ return ( - + ); diff --git a/packages/shared/src/components/cards/socialTwitter/SocialTwitterGrid.tsx b/packages/shared/src/components/cards/socialTwitter/SocialTwitterGrid.tsx index 8fd589b002d..93e704cdd21 100644 --- a/packages/shared/src/components/cards/socialTwitter/SocialTwitterGrid.tsx +++ b/packages/shared/src/components/cards/socialTwitter/SocialTwitterGrid.tsx @@ -25,7 +25,7 @@ import { import { ProfileImageSize } from '../../ProfilePicture'; import { ProfileImageLink } from '../../profile/ProfileImageLink'; import { PostOptionButton } from '../../../features/posts/PostOptionButton'; -import { ButtonVariant } from '../../buttons/Button'; +import { ButtonVariant } from '../../buttons/ButtonV2'; import { getReadPostButtonText } from '../../../graphql/posts'; import { useFeedPreviewMode } from '../../../hooks'; import { isSourceUserSource } from '../../../graphql/sources'; diff --git a/packages/shared/src/components/cards/socials/SocialIconButton.tsx b/packages/shared/src/components/cards/socials/SocialIconButton.tsx index 9934570e499..7a455e0a023 100644 --- a/packages/shared/src/components/cards/socials/SocialIconButton.tsx +++ b/packages/shared/src/components/cards/socials/SocialIconButton.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React, { useContext } from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import type { Post } from '../../../graphql/posts'; import { LinkedInIcon, @@ -93,7 +93,7 @@ const SocialIconButton = ({ const linkData = queryClient.getQueryData(linkKey); return ( - + {flatSources?.map(({ node }, index) => { diff --git a/packages/shared/src/components/comments/CommentActionButtons.tsx b/packages/shared/src/components/comments/CommentActionButtons.tsx index e8025d28fb6..ddb6e3e530f 100644 --- a/packages/shared/src/components/comments/CommentActionButtons.tsx +++ b/packages/shared/src/components/comments/CommentActionButtons.tsx @@ -20,11 +20,13 @@ import type { Comment } from '../../graphql/comments'; import type { UserShortProfile } from '../../lib/user'; import { Roles } from '../../lib/user'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; +import { CardAction } from '../buttons/CardAction'; +import { CardActionBar } from '../buttons/CardActionBar'; import { ClickableText } from '../buttons/ClickableText'; import { LogEvent, Origin, TargetId } from '../../lib/log'; import type { Post } from '../../graphql/posts'; @@ -310,6 +312,9 @@ export default function CommentActionButtons({ }); } + const isUpvoted = voteState.userState?.vote === UserVote.Up; + const isDownvoted = voteState.userState?.vote === UserVote.Down; + return (
)} - - + ); }; diff --git a/packages/shared/src/components/contentPreference/FollowButton.tsx b/packages/shared/src/components/contentPreference/FollowButton.tsx index 3a1fa786591..a4b6ec34c44 100644 --- a/packages/shared/src/components/contentPreference/FollowButton.tsx +++ b/packages/shared/src/components/contentPreference/FollowButton.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { useMutation } from '@tanstack/react-query'; import type { ContentPreferenceType } from '../../graphql/contentPreference'; import { ContentPreferenceStatus } from '../../graphql/contentPreference'; -import { ButtonVariant } from '../buttons/Button'; +import { ButtonVariant } from '../buttons/ButtonV2'; import { useContentPreference } from '../../hooks/contentPreference/useContentPreference'; import SourceActionsNotify from '../sources/SourceActions/SourceActionsNotify'; import type { CopyType } from '../sources/SourceActions/SourceActionsFollow'; diff --git a/packages/shared/src/components/cores/CoreOptionButton.tsx b/packages/shared/src/components/cores/CoreOptionButton.tsx index 7d8329646a1..417f02b9aac 100644 --- a/packages/shared/src/components/cores/CoreOptionButton.tsx +++ b/packages/shared/src/components/cores/CoreOptionButton.tsx @@ -3,7 +3,7 @@ import React, { useCallback } from 'react'; import classNames from 'classnames'; import { useViewSize, ViewSize } from '../../hooks'; import { useBuyCoresContext } from '../../contexts/BuyCoresContext/types'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -61,7 +61,7 @@ export const CoreOptionButton = ({ selectedProduct, ]); return ( - + ); }; export const CoreOptionButtonPlaceholder = (): ReactElement => { return ( - + ); }; diff --git a/packages/shared/src/components/cores/FeaturedCoresWidget.tsx b/packages/shared/src/components/cores/FeaturedCoresWidget.tsx index 74bd73fcfe0..e23113c8ffe 100644 --- a/packages/shared/src/components/cores/FeaturedCoresWidget.tsx +++ b/packages/shared/src/components/cores/FeaturedCoresWidget.tsx @@ -3,7 +3,7 @@ import React from 'react'; import classNames from 'classnames'; import { useQuery } from '@tanstack/react-query'; import { webappUrl } from '../../lib/constants'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ButtonVariant } from '../buttons/common'; import { Typography, @@ -81,7 +81,7 @@ export const FeaturedCoresWidget = ({ ); })}
- + ); }; diff --git a/packages/shared/src/components/credit/BuyCreditsButton.tsx b/packages/shared/src/components/credit/BuyCreditsButton.tsx index 2b80a7cc57b..c3d3b047f8f 100644 --- a/packages/shared/src/components/credit/BuyCreditsButton.tsx +++ b/packages/shared/src/components/credit/BuyCreditsButton.tsx @@ -3,7 +3,7 @@ import type { ReactElement } from 'react'; import classNames from 'classnames'; import { CoreIcon, PlusIcon } from '../icons'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import Link from '../utilities/Link'; import { walletUrl } from '../../lib/constants'; import { anchorDefaultRel } from '../../lib/strings'; @@ -50,7 +50,7 @@ export const BuyCreditsButton = ({ )} > - + {renderBuyButton ? ( <>
- +
)} diff --git a/packages/shared/src/components/drawers/NavDrawer.tsx b/packages/shared/src/components/drawers/NavDrawer.tsx index 60c87146d9a..c311794b333 100644 --- a/packages/shared/src/components/drawers/NavDrawer.tsx +++ b/packages/shared/src/components/drawers/NavDrawer.tsx @@ -3,7 +3,7 @@ import type { PropsWithChildren, ReactElement } from 'react'; import { useRouter } from 'next/router'; import type { DrawerRef, DrawerWrapperProps } from './Drawer'; import { Drawer, DrawerPosition } from './Drawer'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; import { Typography, @@ -57,7 +57,7 @@ export function NavDrawer({ > {header && (
- + )} - +
); } diff --git a/packages/shared/src/components/errors/RecruiterErrorFallback.tsx b/packages/shared/src/components/errors/RecruiterErrorFallback.tsx index b3fe75c5ab5..e829866cbb1 100644 --- a/packages/shared/src/components/errors/RecruiterErrorFallback.tsx +++ b/packages/shared/src/components/errors/RecruiterErrorFallback.tsx @@ -5,7 +5,7 @@ import { TypographyColor, TypographyType, } from '../typography/Typography'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { CalendarIcon, MailIcon, WarningIcon } from '../icons'; import { anchorDefaultRel } from '../../lib/strings'; import { recruiterScheduleUrl } from '../../lib/constants'; @@ -44,7 +44,7 @@ function RecruiterErrorFallback(): ReactElement {
- + {hasIntercom && ( - + )}
diff --git a/packages/shared/src/components/errors/ServerError.tsx b/packages/shared/src/components/errors/ServerError.tsx index 1ce3f4126b6..76dac1375f6 100644 --- a/packages/shared/src/components/errors/ServerError.tsx +++ b/packages/shared/src/components/errors/ServerError.tsx @@ -5,7 +5,7 @@ import { TypographyColor, TypographyType, } from '../typography/Typography'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { TerminalIcon, TwitterIcon } from '../icons'; import { statusPage, twitter } from '../../lib/constants'; import { anchorDefaultRel } from '../../lib/strings'; @@ -42,7 +42,7 @@ function ServerError({ Our team's on it! Try refreshing the page and cross your fingers, or send our engineers some good vibes on X (Twitter). - - + ); } diff --git a/packages/shared/src/components/errors/Unauthorized.tsx b/packages/shared/src/components/errors/Unauthorized.tsx index 619933f4697..061b7c831a3 100644 --- a/packages/shared/src/components/errors/Unauthorized.tsx +++ b/packages/shared/src/components/errors/Unauthorized.tsx @@ -1,6 +1,6 @@ import type { ReactElement, ReactNode } from 'react'; import React from 'react'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { LockIcon } from '../icons'; import { PageContainerCentered } from '../utilities'; import { IconSize } from '../Icon'; @@ -32,7 +32,7 @@ function Unauthorized({

{description}

{children} - + ); } diff --git a/packages/shared/src/components/feedback/FeedbackCard.tsx b/packages/shared/src/components/feedback/FeedbackCard.tsx index ede64bad8ba..f47ccd915b8 100644 --- a/packages/shared/src/components/feedback/FeedbackCard.tsx +++ b/packages/shared/src/components/feedback/FeedbackCard.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { format } from 'date-fns'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { OpenLinkIcon } from '../icons'; import { Typography, @@ -63,17 +63,17 @@ export const FeedbackCard = ({ {isLongDescription && ( - + )} {item.linearIssueUrl && ( - + )} {item.screenshotUrl && ( diff --git a/packages/shared/src/components/feedback/FeedbackWidget.tsx b/packages/shared/src/components/feedback/FeedbackWidget.tsx index 21a691f3c91..dac75d7bc42 100644 --- a/packages/shared/src/components/feedback/FeedbackWidget.tsx +++ b/packages/shared/src/components/feedback/FeedbackWidget.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React, { useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; import { getDayOfYear } from 'date-fns'; -import { Button, ButtonVariant, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonVariant, ButtonSize } from '../buttons/ButtonV2'; import { useAuthContext } from '../../contexts/AuthContext'; import { useSettingsContext } from '../../contexts/SettingsContext'; import { useViewSize, ViewSize } from '../../hooks/useViewSize'; @@ -101,7 +101,7 @@ export function FeedbackWidget(): ReactElement | null { } return ( - + ); } diff --git a/packages/shared/src/components/feeds/FeedPreviewControls.tsx b/packages/shared/src/components/feeds/FeedPreviewControls.tsx index 75ae4e7f478..3d7da944551 100644 --- a/packages/shared/src/components/feeds/FeedPreviewControls.tsx +++ b/packages/shared/src/components/feeds/FeedPreviewControls.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import type { ReactElement } from 'react-markdown/lib/react-markdown'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ButtonVariant, ButtonIconPosition } from '../buttons/common'; import { ArrowIcon } from '../icons'; import type { Origin } from '../../lib/log'; @@ -28,7 +28,7 @@ export const FeedPreviewControls = ({ return (
- +
); diff --git a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx index 533686ff05d..b0a80f3ffcb 100644 --- a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsCreate.tsx @@ -7,7 +7,7 @@ import { Modal } from '../../modals/common/Modal'; import type { CreateFeedProps } from '../../../hooks'; import { useActions, useFeeds, useToastNotification } from '../../../hooks'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { EmojiPicker } from '../../fields/EmojiPicker'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; import { TextField } from '../../fields/TextField'; @@ -184,15 +184,15 @@ export const FeedSettingsCreate = (): ReactElement => {
- - +
@@ -235,7 +235,7 @@ export const FeedSettingsCreate = (): ReactElement => { } label="Icon (optional)" /> - + diff --git a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsEditHeader.tsx b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsEditHeader.tsx index 187a8a29ccf..c2217a259c8 100644 --- a/packages/shared/src/components/feeds/FeedSettings/FeedSettingsEditHeader.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/FeedSettingsEditHeader.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React, { useContext } from 'react'; import { FeedSettingsEditContext } from './FeedSettingsEditContext'; import { useViewSizeClient, ViewSize } from '../../../hooks/useViewSize'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; import { Modal } from '../../modals/common/Modal'; import { ModalPropsContext } from '../../modals/common/types'; @@ -34,7 +34,7 @@ const SaveButton = ({ activeView }: { activeView: string }): ReactElement => { if (isNewFeed) { return ( - + ); } if (activeView !== 'General' && activeView !== 'Filters') { return ( - + ); } return ( - + ); }; @@ -111,7 +111,7 @@ export const FeedSettingsEditHeader = (): ReactElement => { >
- + {!isPlus && feed?.type === FeedType.Custom ? ( - + ) : ( )} diff --git a/packages/shared/src/components/feeds/FeedSettings/TagElement.tsx b/packages/shared/src/components/feeds/FeedSettings/TagElement.tsx index ec33a6b26bb..24cf79b1e55 100644 --- a/packages/shared/src/components/feeds/FeedSettings/TagElement.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/TagElement.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import type { ReactElement } from 'react'; import React from 'react'; import { AlertDot, AlertColor } from '../../AlertDot'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ButtonIconPosition, ButtonSize, @@ -26,7 +26,7 @@ export const TagElement = ({ isHighlighted = false, }: OnboardingTagProps): ReactElement => { return ( - + ); }; diff --git a/packages/shared/src/components/feeds/FeedSettings/components/FollowingUserList.tsx b/packages/shared/src/components/feeds/FeedSettings/components/FollowingUserList.tsx index bc4f9879547..847bf7baf54 100644 --- a/packages/shared/src/components/feeds/FeedSettings/components/FollowingUserList.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/components/FollowingUserList.tsx @@ -11,7 +11,7 @@ import { CopyType } from '../../../sources/SourceActions/SourceActionsFollow'; import { anchorDefaultRel } from '../../../../lib/strings'; import { FollowButton } from '../../../contentPreference/FollowButton'; import type { UserShortProfile } from '../../../../lib/user'; -import { ButtonVariant } from '../../../buttons/Button'; +import { ButtonVariant } from '../../../buttons/ButtonV2'; export const FollowingUserList = (): ReactElement | null => { const { user } = useAuthContext(); diff --git a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsAISection.tsx b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsAISection.tsx index a72891a5e20..e490a6d5e8e 100644 --- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsAISection.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsAISection.tsx @@ -14,7 +14,7 @@ import useFeedSettings from '../../../../hooks/useFeedSettings'; import { useLanguage } from '../../../../hooks/useLanguage'; import { plusUrl } from '../../../../lib/constants'; import { LogEvent, TargetId, Origin } from '../../../../lib/log'; -import { Button } from '../../../buttons/Button'; +import { ButtonV2 } from '../../../buttons/ButtonV2'; import { ButtonVariant, ButtonSize } from '../../../buttons/common'; import ConditionalWrapper from '../../../ConditionalWrapper'; import { DevPlusIcon, ShieldPlusIcon } from '../../../icons'; @@ -60,7 +60,7 @@ export const FeedSettingsAISection = (): ReactElement => { Upgrade and use daily.dev's AI Superpowers! - +
@@ -162,7 +162,7 @@ export const FeedSettingsAISection = (): ReactElement => { > {!isPlus ? ( - + ) : undefined} {
{isCustomFeed && ( - + )} {isMainFeed && ( { side="bottom" >
- +
)} @@ -183,7 +183,7 @@ export const FeedSettingsGeneralSection = (): ReactElement => { cannot be undone. - + )} diff --git a/packages/shared/src/components/feeds/FeedSettings/useFeedSettingsEdit.tsx b/packages/shared/src/components/feeds/FeedSettings/useFeedSettingsEdit.tsx index 0adeddee495..04d5bb8ea5d 100644 --- a/packages/shared/src/components/feeds/FeedSettings/useFeedSettingsEdit.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/useFeedSettingsEdit.tsx @@ -27,7 +27,7 @@ import type { PromptOptions } from '../../../hooks/usePrompt'; import { usePrompt } from '../../../hooks/usePrompt'; import { labels } from '../../../lib'; import { generateQueryKey } from '../../../lib/query'; -import { ButtonColor } from '../../buttons/Button'; +import { ButtonColor } from '../../buttons/ButtonV2'; import { SharedFeedPage } from '../../utilities'; import type { FeedSettingsEditContextValue, diff --git a/packages/shared/src/components/feeds/FeedSettingsButton.tsx b/packages/shared/src/components/feeds/FeedSettingsButton.tsx index 62709bb21ff..ebdc41f9499 100644 --- a/packages/shared/src/components/feeds/FeedSettingsButton.tsx +++ b/packages/shared/src/components/feeds/FeedSettingsButton.tsx @@ -1,8 +1,8 @@ import type { ReactElement } from 'react'; import React from 'react'; import { useRouter } from 'next/router'; -import type { ButtonProps } from '../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import type { ButtonV2Props } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { useLogContext } from '../../contexts/LogContext'; import { LogEvent } from '../../lib/log'; import { FilterIcon } from '../icons'; @@ -34,7 +34,7 @@ export function FeedSettingsButton({ onClick, children = 'Feed settings', ...props -}: ButtonProps<'button'>): ReactElement { +}: ButtonV2Props<'button'>): ReactElement { const { logEvent } = useLogContext(); const { isPlus } = usePlusSubscription(); const { feeds, deleteFeed } = useFeeds(); @@ -86,7 +86,7 @@ export function FeedSettingsButton({ }; return ( - + ); } diff --git a/packages/shared/src/components/feeds/MobileFeedActions.tsx b/packages/shared/src/components/feeds/MobileFeedActions.tsx index 8b34003e655..628ef670732 100644 --- a/packages/shared/src/components/feeds/MobileFeedActions.tsx +++ b/packages/shared/src/components/feeds/MobileFeedActions.tsx @@ -12,7 +12,7 @@ import { ProfilePictureWithIndicator } from '../profile/ProfilePictureWithIndica import HeaderLogo from '../layout/HeaderLogo'; import { LogoPosition } from '../Logo'; import { webappUrl } from '../../lib/constants'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { SettingsIcon } from '../icons'; import { RootPortal } from '../tooltips/Portal'; import { QuestHeaderButton } from '../header/QuestHeaderButton'; @@ -50,7 +50,7 @@ export function MobileFeedActions(): ReactElement { {user && ( <> - + ); return ( @@ -253,7 +253,7 @@ function DragDropComponent({ {dragDropDescription} {renderCta?.(openFileInput) ?? ( - + )} ); diff --git a/packages/shared/src/components/fields/Dropdown.tsx b/packages/shared/src/components/fields/Dropdown.tsx index 5d556808261..bb35da5169d 100644 --- a/packages/shared/src/components/fields/Dropdown.tsx +++ b/packages/shared/src/components/fields/Dropdown.tsx @@ -21,7 +21,7 @@ import { ListDrawer } from '../drawers/ListDrawer'; import type { SelectParams } from '../drawers/common'; import { RootPortal } from '../tooltips/Portal'; import type { DrawerProps } from '../drawers'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import type { IconProps } from '../Icon'; import { Loader } from '../Loader'; @@ -135,7 +135,7 @@ export function Dropdown({ }, [isVisible, wasVisible]); const renderButton = () => ( - + ); return ( @@ -209,7 +209,7 @@ export function Dropdown({ onClose: () => setVisibility(false), title: drawerProps?.title ? ( <> - + )} {value && ( @@ -229,7 +229,7 @@ export const EmojiPicker = ({ )} - {uploadButton && !viewOnly && ( - + )} {image && closeable && ( {!!onUploadCommand && ( - + )} {!!onLinkCommand && ( - + )} )} diff --git a/packages/shared/src/components/fields/RichTextEditor/LinkModal.tsx b/packages/shared/src/components/fields/RichTextEditor/LinkModal.tsx index e733bd86b90..fa4f4c8ce48 100644 --- a/packages/shared/src/components/fields/RichTextEditor/LinkModal.tsx +++ b/packages/shared/src/components/fields/RichTextEditor/LinkModal.tsx @@ -3,7 +3,7 @@ import React, { useState, useCallback, useEffect } from 'react'; import { Modal } from '../../modals/common/Modal'; import { ModalKind, ModalSize } from '../../modals/common/types'; import { TextField } from '../TextField'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; export interface LinkModalProps { isOpen: boolean; @@ -80,20 +80,20 @@ export const LinkModal = ({ onChange={(e) => setLabel(e.target.value)} />
- - +
diff --git a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx index c6c43ac4763..4d593d4c75a 100644 --- a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx +++ b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx @@ -8,7 +8,7 @@ import React, { import { useEditorState } from '@tiptap/react'; import type { Editor } from '@tiptap/react'; import { getMarkRange } from '@tiptap/core'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { BoldIcon, ItalicIcon, @@ -54,7 +54,7 @@ const ToolbarButton = ({ return ( - + )} )} diff --git a/packages/shared/src/components/fields/SearchField.tsx b/packages/shared/src/components/fields/SearchField.tsx index 947d88eb141..f34acd081c8 100644 --- a/packages/shared/src/components/fields/SearchField.tsx +++ b/packages/shared/src/components/fields/SearchField.tsx @@ -9,8 +9,8 @@ import classNames from 'classnames'; import { useInputField } from '../../hooks/useInputField'; import { BaseField, FieldInput } from './common'; import { SearchIcon, MiniCloseIcon as CloseIcon, ArrowIcon } from '../icons'; -import type { ButtonProps } from '../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import type { ButtonV2Props } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { getFieldFontColor } from './BaseFieldContainer'; import type { IconProps } from '../Icon'; @@ -40,7 +40,7 @@ export interface SearchFieldProps fieldSize?: 'large' | 'medium'; showIcon?: boolean; fieldType?: 'primary' | 'secondary'; - rightButtonProps?: ButtonProps<'button'> | false; + rightButtonProps?: ButtonV2Props<'button'> | false; } const ButtonIcon = ({ @@ -115,7 +115,7 @@ export const SearchField = forwardRef(function SearchField( > {!!showIcon && (isSecondary && hasInput ? ( - + ; hintIcon?: ReactElement; - actionButton?: React.ReactElement>; + actionButton?: React.ReactElement>; showMaxLength?: boolean; inputRef?: (input: HTMLInputElement) => void; } diff --git a/packages/shared/src/components/fields/form/FormWrapper.tsx b/packages/shared/src/components/fields/form/FormWrapper.tsx index 5e098067e39..ff7011d4dbc 100644 --- a/packages/shared/src/components/fields/form/FormWrapper.tsx +++ b/packages/shared/src/components/fields/form/FormWrapper.tsx @@ -1,8 +1,8 @@ import type { MutableRefObject, ReactElement, ReactNode } from 'react'; import React from 'react'; import classNames from 'classnames'; -import type { ButtonProps } from '../../buttons/Button'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import type { ButtonV2Props } from '../../buttons/ButtonV2'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { PageHeader, PageHeaderTitle } from '../../layout/common'; interface Copy { @@ -19,8 +19,8 @@ export interface FormWrapperProps { className?: ClassName; form: string; copy?: Copy; - leftButtonProps?: ButtonProps<'button'>; - rightButtonProps?: ButtonProps<'button'>; + leftButtonProps?: ButtonV2Props<'button'>; + rightButtonProps?: ButtonV2Props<'button'>; title?: string | React.ReactNode; isHeaderTitle?: boolean; headerRef?: MutableRefObject; @@ -59,18 +59,18 @@ export function FormWrapper({ )} ref={headerRef} > - + {isHeaderTitle && title && titleElement} - + {!isHeaderTitle && title && titleElement} {children} diff --git a/packages/shared/src/components/filters/AchievementTrackerButton.tsx b/packages/shared/src/components/filters/AchievementTrackerButton.tsx index c1cea894ac5..47f4cc6bfd1 100644 --- a/packages/shared/src/components/filters/AchievementTrackerButton.tsx +++ b/packages/shared/src/components/filters/AchievementTrackerButton.tsx @@ -1,8 +1,8 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import type { IconType } from '../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import type { IconType } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { MedalBadgeIcon } from '../icons'; import { AlertColor, AlertDot } from '../AlertDot'; import { useAuthContext } from '../../contexts/AuthContext'; @@ -161,7 +161,7 @@ export function AchievementTrackerButton(): ReactElement | null { const buttonContent = (
- + {showAttentionDot && ( {showToggleShortcuts && ( - + )} ); diff --git a/packages/shared/src/components/filters/TagButton.tsx b/packages/shared/src/components/filters/TagButton.tsx index e34081f1f36..943c9795c8c 100644 --- a/packages/shared/src/components/filters/TagButton.tsx +++ b/packages/shared/src/components/filters/TagButton.tsx @@ -1,8 +1,8 @@ import type { HTMLAttributes, ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import type { ButtonVariant } from '../buttons/Button'; -import { Button, ButtonIconPosition, ButtonSize } from '../buttons/Button'; +import type { ButtonVariant } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonIconPosition, ButtonSize } from '../buttons/ButtonV2'; interface GenericTagButtonProps extends Omit, 'color'> { @@ -22,7 +22,7 @@ export const GenericTagButton = ({ showHashtag = true, ...props }: GenericTagButtonProps): ReactElement => ( - + ); diff --git a/packages/shared/src/components/gear/GearCategoryNudge.tsx b/packages/shared/src/components/gear/GearCategoryNudge.tsx index 9b6a81efbd4..18aa9ab9f7b 100644 --- a/packages/shared/src/components/gear/GearCategoryNudge.tsx +++ b/packages/shared/src/components/gear/GearCategoryNudge.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import React, { useState, useCallback } from 'react'; -import { Button, ButtonVariant, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonVariant, ButtonSize } from '../buttons/ButtonV2'; import { PlusIcon } from '../icons/Plus'; import { useAuthContext } from '../../contexts/AuthContext'; import { GearModal } from '../../features/profile/components/gear/GearModal'; @@ -38,14 +38,14 @@ export function GearCategoryNudge(): ReactElement { return ( <>
- +
{isModalOpen && (
  1. -
{!acceptedJustNow && ( - + )}
- + ); diff --git a/packages/shared/src/components/integrations/UserIntegrationItem.tsx b/packages/shared/src/components/integrations/UserIntegrationItem.tsx index 0f6b151823e..6642585c9be 100644 --- a/packages/shared/src/components/integrations/UserIntegrationItem.tsx +++ b/packages/shared/src/components/integrations/UserIntegrationItem.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import dynamic from 'next/dynamic'; import { getIconForIntegration } from '../../lib/integrations'; import type { UserIntegration } from '../../graphql/integrations'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ButtonSize } from '../buttons/common'; import { IconSize } from '../Icon'; import { MenuIcon, TrashIcon, ArrowIcon } from '../icons'; @@ -57,7 +57,7 @@ export const UserIntegrationItem = ({
-
- + ); })} diff --git a/packages/shared/src/components/layout/DefaultSquadHeader.tsx b/packages/shared/src/components/layout/DefaultSquadHeader.tsx index 1a76cd02be5..a22cc678d27 100644 --- a/packages/shared/src/components/layout/DefaultSquadHeader.tsx +++ b/packages/shared/src/components/layout/DefaultSquadHeader.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { PageHeader, PageHeaderTitle } from './common'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; import { TypographyType } from '../typography/Typography'; @@ -16,7 +16,7 @@ export function DefaultSquadHeader({ }: DefaultSquadHeaderProps): ReactElement { return ( - - - + ); diff --git a/packages/shared/src/components/liveRooms/LiveRoom.tsx b/packages/shared/src/components/liveRooms/LiveRoom.tsx index 662d81fa3c7..03c208a1ad9 100644 --- a/packages/shared/src/components/liveRooms/LiveRoom.tsx +++ b/packages/shared/src/components/liveRooms/LiveRoom.tsx @@ -14,7 +14,7 @@ import { TypographyTag, TypographyType, } from '../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Loader } from '../Loader'; import { LiveRoomVideoTile } from './LiveRoomVideoTile'; import { LiveRoomControls } from './LiveRoomControls'; @@ -669,13 +669,13 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => { > {roomError?.message ?? 'This standup may no longer be available.'} - + ); } @@ -696,13 +696,13 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => { {errorMessage} ) : null} - + ); } @@ -758,7 +758,7 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => { > Page {clampedStagePage + 1} / {stagePageCount} - - + ) : null} {paginatedStageSpeakers.length > 0 ? ( @@ -908,12 +908,12 @@ const LiveRoomInner = ({ roomId }: LiveRoomProps): ReactElement => { This standup has ended - + ) : null} diff --git a/packages/shared/src/components/liveRooms/LiveRoomCard.tsx b/packages/shared/src/components/liveRooms/LiveRoomCard.tsx index 570ea1f2d59..d44c71878fb 100644 --- a/packages/shared/src/components/liveRooms/LiveRoomCard.tsx +++ b/packages/shared/src/components/liveRooms/LiveRoomCard.tsx @@ -11,7 +11,7 @@ import { TypographyColor, TypographyType, } from '../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { IconSize } from '../Icon'; import { UserIcon } from '../icons'; import { ProfilePicture, ProfileImageSize } from '../ProfilePicture'; @@ -109,14 +109,14 @@ export const LiveRoomCard = ({ - + ); diff --git a/packages/shared/src/components/liveRooms/LiveRoomChatPanel.tsx b/packages/shared/src/components/liveRooms/LiveRoomChatPanel.tsx index 4b952dbc724..a58b837396d 100644 --- a/packages/shared/src/components/liveRooms/LiveRoomChatPanel.tsx +++ b/packages/shared/src/components/liveRooms/LiveRoomChatPanel.tsx @@ -7,7 +7,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from '../dropdown/DropdownMenu'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { ProfilePicture, ProfileImageSize } from '../ProfilePicture'; import Markdown from '../Markdown'; import RichTextInput, { type RichTextInputRef } from '../fields/RichTextInput'; @@ -97,14 +97,14 @@ const LiveRoomChatComposer = ({ {disabledReason} {!isLoggedIn ? ( - + ) : null} @@ -366,7 +366,7 @@ export const LiveRoomChatPanel = ({ tooltip={{ content: 'Chat moderation options' }} asChild > - + - + ))} - + {canRaiseHand ? ( - + ) : null} {isFreeForAll && isAudience ? ( - + ) : null} {canLeaveStage ? ( @@ -618,7 +618,7 @@ export const LiveRoomControls = ({ tooltip="Leave stage" wrapDisabled={isBusy('leave-stage')} > - + ) : null} @@ -644,7 +644,7 @@ export const LiveRoomControls = ({ {showGoLive ? ( - + ) : null} {privilegeState.hasHostPrivileges ? ( - + ) : ( - + )} diff --git a/packages/shared/src/components/liveRooms/LiveRoomQueuePanel.tsx b/packages/shared/src/components/liveRooms/LiveRoomQueuePanel.tsx index 2eecd9a4d8f..48cfc5ffa37 100644 --- a/packages/shared/src/components/liveRooms/LiveRoomQueuePanel.tsx +++ b/packages/shared/src/components/liveRooms/LiveRoomQueuePanel.tsx @@ -1,6 +1,6 @@ import type { ReactElement, ReactNode } from 'react'; import React from 'react'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Tooltip } from '../tooltip/Tooltip'; import { Typography, @@ -201,7 +201,7 @@ export const LiveRoomQueuePanel = ({ displayProfile, )} from stage`} > - + ) : null} ); diff --git a/packages/shared/src/components/marketingCta/MarketingCtaBriefing.tsx b/packages/shared/src/components/marketingCta/MarketingCtaBriefing.tsx index 61bbe4187a2..9a2a708c869 100644 --- a/packages/shared/src/components/marketingCta/MarketingCtaBriefing.tsx +++ b/packages/shared/src/components/marketingCta/MarketingCtaBriefing.tsx @@ -8,7 +8,7 @@ import { TypographyTag, TypographyType, } from '../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { briefButtonBg } from '../../styles/custom'; import { ClickableCard } from '../cards/common/Card'; import { useIsLightTheme } from '../../hooks/utils'; @@ -112,7 +112,7 @@ export const MarketingCtaBriefing = ({
- + ); diff --git a/packages/shared/src/components/marketingCta/MarketingCtaModal.tsx b/packages/shared/src/components/marketingCta/MarketingCtaModal.tsx index ae10793fdcf..4435c3e7ccd 100644 --- a/packages/shared/src/components/marketingCta/MarketingCtaModal.tsx +++ b/packages/shared/src/components/marketingCta/MarketingCtaModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import type { ModalProps } from '../modals/common/Modal'; import { Modal } from '../modals/common/Modal'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { CardCover } from '../cards/common/CardCover'; import type { MarketingCta } from './common'; import { CTAButton, Description, Header, Title } from './common'; @@ -59,7 +59,7 @@ export const MarketingCtaModal = ({ buttonSize={ButtonSize.Medium} /> ) : ( - +
); diff --git a/packages/shared/src/components/marketingCta/MarketingCtaVideo.tsx b/packages/shared/src/components/marketingCta/MarketingCtaVideo.tsx index 1baede0f561..b532383ed4c 100644 --- a/packages/shared/src/components/marketingCta/MarketingCtaVideo.tsx +++ b/packages/shared/src/components/marketingCta/MarketingCtaVideo.tsx @@ -2,7 +2,7 @@ import type { MouseEvent, ReactElement } from 'react'; import React, { useCallback, useEffect, useRef } from 'react'; import classNames from 'classnames'; import type { MarketingCta } from './common'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { MiniCloseIcon, PlayIcon } from '../icons'; import { IconSize } from '../Icon'; import { ProfileImageSize, ProfilePicture } from '../ProfilePicture'; @@ -91,7 +91,7 @@ export function MarketingCtaVideo({ )}
- + ); diff --git a/packages/shared/src/components/modals/AchievementCompletionModal.tsx b/packages/shared/src/components/modals/AchievementCompletionModal.tsx index 4c4a092daff..c6081cfb406 100644 --- a/packages/shared/src/components/modals/AchievementCompletionModal.tsx +++ b/packages/shared/src/components/modals/AchievementCompletionModal.tsx @@ -1,6 +1,6 @@ import type { KeyboardEvent, MouseEvent, ReactElement } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ClickableText } from '../buttons/ClickableText'; import { LazyImage } from '../LazyImage'; import { Loader } from '../Loader'; @@ -213,12 +213,12 @@ export const AchievementCompletionModal = ({
- + Let's pick your next goal. - + - +
diff --git a/packages/shared/src/components/modals/AchievementPickerModal.tsx b/packages/shared/src/components/modals/AchievementPickerModal.tsx index ddfc5e3e94f..98262cb10a2 100644 --- a/packages/shared/src/components/modals/AchievementPickerModal.tsx +++ b/packages/shared/src/components/modals/AchievementPickerModal.tsx @@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; import { ModalClose } from './common/ModalClose'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ProgressBar } from '../fields/ProgressBar'; import { LazyImage } from '../LazyImage'; import { @@ -139,7 +139,7 @@ export const AchievementPickerModal = ({ {userAchievement.achievement.description}
- +
diff --git a/packages/shared/src/components/modals/AchievementShowcaseModal.tsx b/packages/shared/src/components/modals/AchievementShowcaseModal.tsx index 421ee640392..c057ac6cae1 100644 --- a/packages/shared/src/components/modals/AchievementShowcaseModal.tsx +++ b/packages/shared/src/components/modals/AchievementShowcaseModal.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; import { ModalClose } from './common/ModalClose'; -import { Button, ButtonVariant, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonVariant, ButtonSize } from '../buttons/ButtonV2'; import { LazyImage } from '../LazyImage'; import { Typography, @@ -187,7 +187,7 @@ export const AchievementShowcaseModal = ({
)} - + ); diff --git a/packages/shared/src/components/modals/AchievementSyncPromptModal.tsx b/packages/shared/src/components/modals/AchievementSyncPromptModal.tsx index cc839b184e4..2d232dcd30e 100644 --- a/packages/shared/src/components/modals/AchievementSyncPromptModal.tsx +++ b/packages/shared/src/components/modals/AchievementSyncPromptModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; import { ModalClose } from './common/ModalClose'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { Image } from '../image/Image'; import { Typography, @@ -89,20 +89,20 @@ export const AchievementSyncPromptModal = ({ choice!
- - +
diff --git a/packages/shared/src/components/modals/ClickbaitShieldModal.tsx b/packages/shared/src/components/modals/ClickbaitShieldModal.tsx index 8303808f620..3034dd72eec 100644 --- a/packages/shared/src/components/modals/ClickbaitShieldModal.tsx +++ b/packages/shared/src/components/modals/ClickbaitShieldModal.tsx @@ -9,7 +9,7 @@ import { TypographyType, } from '../typography/Typography'; import { PlusUser } from '../PlusUser'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { plusUrl } from '../../lib/constants'; import { DevPlusIcon } from '../icons'; import { @@ -95,7 +95,7 @@ const ClickbaitShieldModal = ({ - + diff --git a/packages/shared/src/components/modals/ContentModal.tsx b/packages/shared/src/components/modals/ContentModal.tsx index a9142273099..ec7d306d934 100644 --- a/packages/shared/src/components/modals/ContentModal.tsx +++ b/packages/shared/src/components/modals/ContentModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type ReactModal from 'react-modal'; import { Modal } from './common/Modal'; import { ModalKind, ModalSize } from './common/types'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -72,14 +72,14 @@ export default function ContentModal({ {description} - + diff --git a/packages/shared/src/components/modals/DirtyFormModal.tsx b/packages/shared/src/components/modals/DirtyFormModal.tsx index 88e9111e306..cd9f5be032e 100644 --- a/packages/shared/src/components/modals/DirtyFormModal.tsx +++ b/packages/shared/src/components/modals/DirtyFormModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import type { LazyModalCommonProps } from './common/Modal'; import { Modal } from './common/Modal'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -62,22 +62,22 @@ export default function DirtyFormModal({
- - +
diff --git a/packages/shared/src/components/modals/FeedbackModal.tsx b/packages/shared/src/components/modals/FeedbackModal.tsx index 2d7cde0d9b8..3aed4e56553 100644 --- a/packages/shared/src/components/modals/FeedbackModal.tsx +++ b/packages/shared/src/components/modals/FeedbackModal.tsx @@ -4,7 +4,7 @@ import { useMutation } from '@tanstack/react-query'; import type { LazyModalCommonProps, ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; import { ModalSize } from './common/types'; -import { Button, ButtonVariant, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonVariant, ButtonSize } from '../buttons/ButtonV2'; import Textarea from '../fields/Textarea'; import { useToastNotification } from '../../hooks/useToastNotification'; import { FeedbackCategory, submitFeedback } from '../../graphql/feedback'; @@ -256,7 +256,7 @@ const FeedbackModal = ({
{categoryOptions.map((option) => ( - + ))}
@@ -301,7 +301,7 @@ const FeedbackModal = ({ {/* Screenshot buttons */}
- - + - + ); diff --git a/packages/shared/src/components/modals/JobOpportunityModal.tsx b/packages/shared/src/components/modals/JobOpportunityModal.tsx index 2501b8dc1e4..5112ad6534b 100644 --- a/packages/shared/src/components/modals/JobOpportunityModal.tsx +++ b/packages/shared/src/components/modals/JobOpportunityModal.tsx @@ -2,7 +2,7 @@ import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { Image } from '../image/Image'; import Link from '../utilities/Link'; import { opportunityUrl } from '../../lib/constants'; @@ -65,22 +65,22 @@ export const JobOpportunityModal = ({
- + - +
diff --git a/packages/shared/src/components/modals/KeywordSynonymModal.tsx b/packages/shared/src/components/modals/KeywordSynonymModal.tsx index 553ac0c8770..c0df2503792 100644 --- a/packages/shared/src/components/modals/KeywordSynonymModal.tsx +++ b/packages/shared/src/components/modals/KeywordSynonymModal.tsx @@ -7,7 +7,7 @@ import { SEARCH_KEYWORDS_QUERY, SET_KEYWORD_AS_SYNONYM_MUTATION, } from '../../graphql/keywords'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; import { gqlClient } from '../../graphql/common'; @@ -63,21 +63,21 @@ export default function KeywordSynonymModal({
    {searchResults?.searchKeywords.hits.slice(0, 5).map((keyword) => (
  • - +
    • ))}
)} - + ); diff --git a/packages/shared/src/components/modals/NewSourceModal.tsx b/packages/shared/src/components/modals/NewSourceModal.tsx index fc933f490b5..e01693376d5 100644 --- a/packages/shared/src/components/modals/NewSourceModal.tsx +++ b/packages/shared/src/components/modals/NewSourceModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement, ReactNode } from 'react'; import React, { useContext, useRef, useState } from 'react'; import { useMutation, useQuery } from '@tanstack/react-query'; import classNames from 'classnames'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Radio } from '../fields/Radio'; import { formToJson } from '../../lib/form'; import { apiUrl } from '../../lib/config'; @@ -67,7 +67,7 @@ type ScrapeSourceResponse = const getFeedLabel = (label: string, link: string) => ( {label} - + )} )} @@ -382,7 +382,7 @@ export default function NewSourceModal(props: ModalProps): ReactElement { {isEnabled && ( {!feeds?.length && ( - + )} {!!feeds?.length && ( <> - - + )} diff --git a/packages/shared/src/components/modals/Prompt.tsx b/packages/shared/src/components/modals/Prompt.tsx index af39e6a39b1..5ba783c22c9 100644 --- a/packages/shared/src/components/modals/Prompt.tsx +++ b/packages/shared/src/components/modals/Prompt.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import { usePrompt } from '../../hooks/usePrompt'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import classed from '../../lib/classed'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; @@ -59,7 +59,7 @@ export function PromptElement(props: Partial): ReactElement | null { {content} {cancelButton !== null && ( - + )} {okButton !== null && ( - + )} diff --git a/packages/shared/src/components/modals/PushNotificationModal.tsx b/packages/shared/src/components/modals/PushNotificationModal.tsx index 4694c8d5460..d7ffda52c78 100644 --- a/packages/shared/src/components/modals/PushNotificationModal.tsx +++ b/packages/shared/src/components/modals/PushNotificationModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import { cloudinaryNotificationsBig } from '../../lib/image'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { Justify } from '../utilities'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; @@ -75,17 +75,17 @@ function PushNotificationModal(modalProps: ModalProps): ReactElement { - + - + ); diff --git a/packages/shared/src/components/modals/ReputationPrivilegesModal.tsx b/packages/shared/src/components/modals/ReputationPrivilegesModal.tsx index 144f88af1b7..1b597f55bca 100644 --- a/packages/shared/src/components/modals/ReputationPrivilegesModal.tsx +++ b/packages/shared/src/components/modals/ReputationPrivilegesModal.tsx @@ -2,7 +2,7 @@ import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; import type { ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { ModalClose } from './common/ModalClose'; import { useActions } from '../../hooks'; import { ActionType } from '../../graphql/actions'; @@ -48,7 +48,7 @@ export const ReputationPrivilegesModal = ({ privileges and superpowers. Keep up the fantastic work!

- + ); diff --git a/packages/shared/src/components/modals/SharedBookmarksModal.tsx b/packages/shared/src/components/modals/SharedBookmarksModal.tsx index 19370532634..05f2ff594e1 100644 --- a/packages/shared/src/components/modals/SharedBookmarksModal.tsx +++ b/packages/shared/src/components/modals/SharedBookmarksModal.tsx @@ -8,7 +8,7 @@ import { DiscordIcon, GitHubIcon, } from '../icons'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { Switch } from '../fields/Switch'; import type { BookmarksSharingData } from '../../graphql/bookmarksSharing'; import { @@ -85,7 +85,7 @@ export default function SharedBookmarksModal({ autoComplete="off" fieldType="tertiary" actionButton={ - +
diff --git a/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationIntroBody.tsx b/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationIntroBody.tsx index 7d4a5dcc1be..1863abf4a02 100644 --- a/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationIntroBody.tsx +++ b/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationIntroBody.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { slackIntegration } from '../../../lib/constants'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ButtonVariant, ButtonSize } from '../../buttons/common'; import { Typography, @@ -37,7 +37,7 @@ export const SlackIntegrationIntroBody = ({ {description} - - + ); }; diff --git a/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationModal.tsx b/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationModal.tsx index 01daf065824..2a9ebb27ef0 100644 --- a/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationModal.tsx +++ b/packages/shared/src/components/modals/SlackIntegrationModal/SlackIntegrationModal.tsx @@ -5,7 +5,7 @@ import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { Dropdown } from '../../fields/Dropdown'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { useViewSize, ViewSize } from '../../../hooks'; import type { Source } from '../../../graphql/sources'; import { SourceAvatar } from '../../profile/source'; @@ -256,7 +256,7 @@ const SlackIntegrationModal = ({ Read here - - + )} diff --git a/packages/shared/src/components/modals/SquadTourModal.tsx b/packages/shared/src/components/modals/SquadTourModal.tsx index 6e1a6dcac8b..513d49590f5 100644 --- a/packages/shared/src/components/modals/SquadTourModal.tsx +++ b/packages/shared/src/components/modals/SquadTourModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import SquadTour from '../squads/SquadTour'; import type { LazyModalCommonProps, ModalProps } from './common/Modal'; import { Modal } from './common/Modal'; -import { ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { useSquadTour } from '../../hooks/useSquadTour'; import { ModalClose } from './common/ModalClose'; diff --git a/packages/shared/src/components/modals/VerifyExperienceModal.tsx b/packages/shared/src/components/modals/VerifyExperienceModal.tsx index 717d8f56744..5127659a916 100644 --- a/packages/shared/src/components/modals/VerifyExperienceModal.tsx +++ b/packages/shared/src/components/modals/VerifyExperienceModal.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { MailIcon } from '../icons'; import { TextField } from '../fields/TextField'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import useTimer from '../../hooks/useTimer'; import { gqlClient } from '../../graphql/common'; import { @@ -182,7 +182,7 @@ function VerifyExperienceModal({ value={workEmail} valueChanged={setWorkEmail} actionButton={ - + } /> {codeSent && ( @@ -208,7 +208,7 @@ function VerifyExperienceModal({ onChange={() => hint && setHint('')} /> )} - + diff --git a/packages/shared/src/components/modals/VideoModal.tsx b/packages/shared/src/components/modals/VideoModal.tsx index 4b9f3eed030..f3ec7e1004c 100644 --- a/packages/shared/src/components/modals/VideoModal.tsx +++ b/packages/shared/src/components/modals/VideoModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type ReactModal from 'react-modal'; import { Modal } from './common/Modal'; import { ModalKind, ModalSize } from './common/types'; -import { ButtonSize } from '../buttons/Button'; +import { ButtonSize } from '../buttons/ButtonV2'; import { ModalClose } from './common/ModalClose'; interface VideoModalProps extends ReactModal.Props { diff --git a/packages/shared/src/components/modals/award/BuyCoresModal.tsx b/packages/shared/src/components/modals/award/BuyCoresModal.tsx index 763a15feee8..455702f0b9c 100644 --- a/packages/shared/src/components/modals/award/BuyCoresModal.tsx +++ b/packages/shared/src/components/modals/award/BuyCoresModal.tsx @@ -11,7 +11,7 @@ import { useViewSize, ViewSize } from '../../../hooks'; import { ModalBody } from '../common/ModalBody'; import { useBuyCoresContext } from '../../../contexts/BuyCoresContext/types'; import { BuyCreditsButton } from '../../credit/BuyCreditsButton'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -153,13 +153,13 @@ const ProcessingCompleted = () => { > Success! Your Cores are now available in your balance. - + ); }; @@ -182,7 +182,7 @@ const ProcessingError = () => { {description} )} - + ); }; @@ -455,14 +455,14 @@ const BuyFlow = ({ onPlusClick={onPlusButtonClick} /> {isMobile && ( - + )} {isMobile ? ( diff --git a/packages/shared/src/components/modals/award/GiveAwardModal.tsx b/packages/shared/src/components/modals/award/GiveAwardModal.tsx index 8461d015812..8587b7df5fe 100644 --- a/packages/shared/src/components/modals/award/GiveAwardModal.tsx +++ b/packages/shared/src/components/modals/award/GiveAwardModal.tsx @@ -11,7 +11,7 @@ import { TypographyTag, TypographyType, } from '../../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { ArrowIcon, CoreIcon } from '../../icons'; import { Image } from '../../image/Image'; import { featuredAwardImage } from '../../../lib/image'; @@ -55,7 +55,7 @@ const AwardItem = ({ const { logAwardEvent } = useGiveAwardModalContext(); return ( -
- + ); }; @@ -121,14 +121,14 @@ const IntroScreen = () => { onPlusClick={onBuyCores} /> {isMobile ? ( - + ) : null} @@ -154,7 +154,7 @@ const IntroScreen = () => { {hasAwards && ( - + )} { {showBuyCores && !!product && ( {canPurchaseCores && ( - + )} {!canPurchaseCores && ( - + )} @@ -307,7 +311,7 @@ const CommentScreen = () => { return ( <> - + @@ -425,7 +429,7 @@ const SuccessScreen = () => { {!isMobile && ( - + )} diff --git a/packages/shared/src/components/modals/award/ListAwardsModal.tsx b/packages/shared/src/components/modals/award/ListAwardsModal.tsx index 745c9fc6078..53adbee9588 100644 --- a/packages/shared/src/components/modals/award/ListAwardsModal.tsx +++ b/packages/shared/src/components/modals/award/ListAwardsModal.tsx @@ -18,7 +18,7 @@ import { TypographyType, } from '../../typography/Typography'; import { formatCoresCurrency } from '../../../lib/utils'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { useViewSize, ViewSize } from '../../../hooks/useViewSize'; export interface ListAwardsModalProps extends ModalProps { @@ -50,7 +50,7 @@ export const ListAwardsModal = ({ header={ typeof onBack === 'function' ? ( - + ); diff --git a/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx b/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx index 72cf1dd6ab6..07ebb68cbf6 100644 --- a/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx +++ b/packages/shared/src/components/modals/bookmark/BookmarkFolderModal.tsx @@ -15,7 +15,7 @@ import { TypographyTag, TypographyType, } from '../../typography/Typography'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { DevPlusIcon } from '../../icons'; import { plusUrl } from '../../../lib/constants'; import { anchorDefaultRel } from '../../../lib/strings'; @@ -104,7 +104,7 @@ const BookmarkFolderModal = ({ > To keep your bookmarks perfectly organized in folders, {` `} - + )} @@ -143,7 +143,7 @@ const BookmarkFolderModal = ({ {!isMobile && (shouldUpgrade ? ( - + ) : ( - + ))} diff --git a/packages/shared/src/components/modals/bookmark/MoveBookmarkModal.tsx b/packages/shared/src/components/modals/bookmark/MoveBookmarkModal.tsx index 9e5e05aa588..20a231183d1 100644 --- a/packages/shared/src/components/modals/bookmark/MoveBookmarkModal.tsx +++ b/packages/shared/src/components/modals/bookmark/MoveBookmarkModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { ModalHeader } from '../common/ModalHeader'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { BookmarkIcon, PlusIcon, VIcon, FolderIcon } from '../../icons'; import { useBookmarkFolderList, @@ -79,7 +79,7 @@ const MoveBookmarkModal = ({ - - + {folders?.length > 0 && folders.map((folder) => ( - + ))} diff --git a/packages/shared/src/components/modals/candidate/CandidateSignInModal.tsx b/packages/shared/src/components/modals/candidate/CandidateSignInModal.tsx index 5dafee14fb7..54cb0342e7d 100644 --- a/packages/shared/src/components/modals/candidate/CandidateSignInModal.tsx +++ b/packages/shared/src/components/modals/candidate/CandidateSignInModal.tsx @@ -7,7 +7,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { ButtonVariant } from '../../buttons/Button'; +import { ButtonVariant } from '../../buttons/ButtonV2'; import Logo from '../../Logo'; import { AuthTriggers } from '../../../lib/auth'; import type { AuthProps } from '../../auth/common'; diff --git a/packages/shared/src/components/modals/common/ModalClose.tsx b/packages/shared/src/components/modals/common/ModalClose.tsx index 171cbb71401..c6f17021c23 100644 --- a/packages/shared/src/components/modals/common/ModalClose.tsx +++ b/packages/shared/src/components/modals/common/ModalClose.tsx @@ -1,11 +1,11 @@ import type { ReactElement, Ref } from 'react'; import React, { forwardRef } from 'react'; import classNames from 'classnames'; -import type { ButtonProps } from '../../buttons/Button'; +import type { ButtonV2Props } from '../../buttons/ButtonV2'; import CloseButton from '../../CloseButton'; import { useModalContext } from './types'; -export type ModalCloseProps = ButtonProps<'button'> & { +export type ModalCloseProps = ButtonV2Props<'button'> & { position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static'; zIndex?: '0' | '1' | '2'; right?: '0' | '1' | '2' | '3' | '4'; diff --git a/packages/shared/src/components/modals/common/ModalHeader.tsx b/packages/shared/src/components/modals/common/ModalHeader.tsx index 8ba556d24b5..2d1f4b70395 100644 --- a/packages/shared/src/components/modals/common/ModalHeader.tsx +++ b/packages/shared/src/components/modals/common/ModalHeader.tsx @@ -6,8 +6,8 @@ import type { ModalTabsProps } from './ModalTabs'; import { ModalTabs } from './ModalTabs'; import { ModalClose } from './ModalClose'; import { ModalHeaderKind, ModalPropsContext } from './types'; -import type { ButtonProps } from '../../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import type { ButtonV2Props } from '../../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { ArrowIcon } from '../../icons'; import { ModalStepsWrapper } from './ModalStepsWrapper'; import { ProgressBar } from '../../fields/ProgressBar'; @@ -65,7 +65,7 @@ export function ModalHeader({ )} > {shouldShowClose && ( - + {feeds?.edges?.length > 0 && feeds.edges.map((feed) => ( - + ))} diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx index 1f5a6b3a5cc..1ee3893d22a 100644 --- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx +++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx @@ -11,7 +11,7 @@ import { useLogContext } from '../../../contexts/LogContext'; import { useAuthContext } from '../../../contexts/AuthContext'; import { LogEvent, Origin } from '../../../lib/log'; import { webappUrl } from '../../../lib/constants'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { HotIcon } from '../../icons/Hot'; import { Typography, @@ -819,7 +819,7 @@ const EmptyState = ({ Share your own hot takes and let others vote on them. {username && ( - + )} ); @@ -1139,7 +1139,7 @@ const HotAndColdModal = ({
- +
)} diff --git a/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx b/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx index 062499b4ee7..956dd0d2811 100644 --- a/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx +++ b/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx @@ -6,7 +6,7 @@ import { Modal } from '../common/Modal'; import { ModalHeader } from '../common/ModalHeader'; import { ModalBody } from '../common/ModalBody'; import { ModalSize } from '../common/types'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { getRemindAt, ReminderPreference, @@ -70,7 +70,7 @@ const BookmarkReminderModalOption = ( timeFormat && format(getRemindAt(now, value), timeFormat); return ( - + ); }; @@ -144,12 +144,12 @@ export const BookmarkReminderModal = ( ))}
- +
diff --git a/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx b/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx index 06f7b555250..5143e8f64bc 100644 --- a/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx +++ b/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx @@ -8,11 +8,11 @@ import RichTextInput from '../../fields/RichTextInput'; import { WriteLinkPreview, WritePreviewSkeleton } from '../../post/write'; import { usePostToSquad } from '../../../hooks'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../../buttons/Button'; +} from '../../buttons/ButtonV2'; import { AtIcon } from '../../icons'; import { Divider, Justify } from '../../utilities'; import SourceButton from '../../cards/common/SourceButton'; @@ -77,7 +77,7 @@ export function CreateSharedPostModal({ const footer = ( <> - + ); diff --git a/packages/shared/src/components/modals/recruiter/RecruiterIntroModal.tsx b/packages/shared/src/components/modals/recruiter/RecruiterIntroModal.tsx index d15f498632e..f8df1a837ff 100644 --- a/packages/shared/src/components/modals/recruiter/RecruiterIntroModal.tsx +++ b/packages/shared/src/components/modals/recruiter/RecruiterIntroModal.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { Typography, TypographyType } from '../../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; export interface RecruiterIntroModalProps extends ModalProps { onNext: () => void; @@ -51,14 +51,14 @@ export const RecruiterIntroModal = ({ /> - + ); diff --git a/packages/shared/src/components/modals/recruiter/RecruiterJobLinkModal.tsx b/packages/shared/src/components/modals/recruiter/RecruiterJobLinkModal.tsx index 4bf9765f781..d45c8287ee0 100644 --- a/packages/shared/src/components/modals/recruiter/RecruiterJobLinkModal.tsx +++ b/packages/shared/src/components/modals/recruiter/RecruiterJobLinkModal.tsx @@ -9,7 +9,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonColor, ButtonVariant } from '../../buttons/ButtonV2'; import { TextField } from '../../fields/TextField'; import { MagicIcon, ShieldIcon } from '../../icons'; import { DragDrop } from '../../fields/DragDrop'; @@ -261,7 +261,7 @@ export const RecruiterJobLinkModal = ({ )} - +
diff --git a/packages/shared/src/components/modals/recruiter/RecruiterSeatsModal.tsx b/packages/shared/src/components/modals/recruiter/RecruiterSeatsModal.tsx index 2b4e976524f..c8ae720b6a8 100644 --- a/packages/shared/src/components/modals/recruiter/RecruiterSeatsModal.tsx +++ b/packages/shared/src/components/modals/recruiter/RecruiterSeatsModal.tsx @@ -13,7 +13,7 @@ import { TypographyType, } from '../../typography/Typography'; import { TextField } from '../../fields/TextField'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { MinusIcon } from '../../icons/Minus'; import { PlusIcon } from '../../icons/Plus'; import { useAuthContext } from '../../../contexts/AuthContext'; @@ -163,7 +163,7 @@ export const RecruiterSeatsModal = ({ ]); }} /> -
- + )} {!pricePlan && } diff --git a/packages/shared/src/components/modals/recruiter/RecruiterSignInModal.tsx b/packages/shared/src/components/modals/recruiter/RecruiterSignInModal.tsx index d1c791f19e7..ef30f20231d 100644 --- a/packages/shared/src/components/modals/recruiter/RecruiterSignInModal.tsx +++ b/packages/shared/src/components/modals/recruiter/RecruiterSignInModal.tsx @@ -8,7 +8,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { ButtonVariant } from '../../buttons/Button'; +import { ButtonVariant } from '../../buttons/ButtonV2'; import Logo from '../../Logo'; import { AuthTriggers } from '../../../lib/auth'; import type { AuthProps } from '../../auth/common'; diff --git a/packages/shared/src/components/modals/recruiter/RecruiterTrustModal.tsx b/packages/shared/src/components/modals/recruiter/RecruiterTrustModal.tsx index 348a895dac6..aad26b0e2ad 100644 --- a/packages/shared/src/components/modals/recruiter/RecruiterTrustModal.tsx +++ b/packages/shared/src/components/modals/recruiter/RecruiterTrustModal.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { Typography, TypographyType } from '../../typography/Typography'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { Checkbox } from '../../fields/Checkbox'; import { ShieldIcon } from '../../icons'; import Link from '../../utilities/Link'; @@ -112,14 +112,14 @@ export const RecruiterTrustModal = ({ I agree to honor the trust developers have placed in daily.dev - + - - + ); diff --git a/packages/shared/src/components/modals/referral/GenericReferralModal.tsx b/packages/shared/src/components/modals/referral/GenericReferralModal.tsx index 3be2fba37e8..4e37d70fdee 100644 --- a/packages/shared/src/components/modals/referral/GenericReferralModal.tsx +++ b/packages/shared/src/components/modals/referral/GenericReferralModal.tsx @@ -7,7 +7,7 @@ import { cloudinaryReferralCampaignGenericSad, } from '../../../lib/image'; import { ModalSize } from '../common/types'; -import { ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { link } from '../../../lib/links'; import { LogEvent, TargetId, TargetType } from '../../../lib/log'; import { ReferralCampaignKey, useReferralCampaign } from '../../../hooks'; diff --git a/packages/shared/src/components/modals/report/ReasonSelectionModal.tsx b/packages/shared/src/components/modals/report/ReasonSelectionModal.tsx index 892908a0e6d..bf07a8ace54 100644 --- a/packages/shared/src/components/modals/report/ReasonSelectionModal.tsx +++ b/packages/shared/src/components/modals/report/ReasonSelectionModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement, ReactNode } from 'react'; import React, { useState } from 'react'; import type { RadioItemProps } from '../../fields/Radio'; import { Radio } from '../../fields/Radio'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { Justify } from '../../utilities'; @@ -94,13 +94,13 @@ export function ReasonSelectionModal< justify={footer && !isMobile ? Justify.Between : Justify.End} > {isMobile ? null : footer} - + ); diff --git a/packages/shared/src/components/modals/report/ReportPostModal.tsx b/packages/shared/src/components/modals/report/ReportPostModal.tsx index 877b2efb3cf..79bc9bb0f6b 100644 --- a/packages/shared/src/components/modals/report/ReportPostModal.tsx +++ b/packages/shared/src/components/modals/report/ReportPostModal.tsx @@ -3,7 +3,7 @@ import React, { useState, useRef, useCallback } from 'react'; import type { RadioItemProps } from '../../fields/Radio'; import type { Post, ReadHistoryPost } from '../../../graphql/posts'; import { Checkbox } from '../../fields/Checkbox'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import type { PostBootData } from '../../../lib/boot'; import type { ModalProps } from '../common/Modal'; import { FlexRow } from '../../utilities'; @@ -76,7 +76,7 @@ const reportReasonsMap: Partial< const isSelected = selectedTags.includes(tag); return ( - + ); })} diff --git a/packages/shared/src/components/modals/soon/BookmarkFolderSoonModal.tsx b/packages/shared/src/components/modals/soon/BookmarkFolderSoonModal.tsx index 153f111fb50..737f1abd03f 100644 --- a/packages/shared/src/components/modals/soon/BookmarkFolderSoonModal.tsx +++ b/packages/shared/src/components/modals/soon/BookmarkFolderSoonModal.tsx @@ -11,7 +11,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { DevPlusIcon } from '../../icons'; import { LogEvent, TargetId } from '../../../lib/log'; import { bookmarkFolderSoonImage } from '../../../lib/image'; @@ -79,7 +79,7 @@ const BookmarkFolderSoonModal = ({ be among the first to experience it as soon as it launches! - + )} diff --git a/packages/shared/src/components/modals/squads/NewSquadModal.tsx b/packages/shared/src/components/modals/squads/NewSquadModal.tsx index 8903a4e4553..df471929990 100644 --- a/packages/shared/src/components/modals/squads/NewSquadModal.tsx +++ b/packages/shared/src/components/modals/squads/NewSquadModal.tsx @@ -3,7 +3,7 @@ import React, { useCallback } from 'react'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; import { ModalSize } from '../common/types'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { useSquadNavigation } from '../../../hooks'; import { webappUrl } from '../../../lib/constants'; import { useSlack } from '../../../hooks/integrations/slack/useSlack'; @@ -68,14 +68,14 @@ export default function NewSquadModal(props: ModalProps): ReactElement { Create a group where you can learn and interact with other developers around topics that matter - + - + ); diff --git a/packages/shared/src/components/modals/squads/SquadPromotionModal.tsx b/packages/shared/src/components/modals/squads/SquadPromotionModal.tsx index 0fe68eebf9d..36d68d0d2c3 100644 --- a/packages/shared/src/components/modals/squads/SquadPromotionModal.tsx +++ b/packages/shared/src/components/modals/squads/SquadPromotionModal.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import type { ModalProps } from '../common/Modal'; import { Modal } from '../common/Modal'; -import { ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import PromotionTour from '../../squads/PromotionTour'; import { useSquad } from '../../../hooks'; import { ModalClose } from '../common/ModalClose'; diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index 698f9203174..5eb814f5934 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -11,8 +11,8 @@ import { TypographyTag, TypographyType, } from '../../typography/Typography'; -import type { ButtonProps } from '../../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import type { ButtonV2Props } from '../../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import type { UseStreakRecoverReturn } from '../../../hooks/streaks/useStreakRecover'; import { useStreakRecover } from '../../../hooks/streaks/useStreakRecover'; import { Checkbox } from '../../fields/Checkbox'; @@ -111,12 +111,12 @@ const StreakRecoveryCopy = ({ const StreakRecoverButton = ({ recover, ...props -}: { recover: UserStreakRecoverData } & ButtonProps<'button'>) => { +}: { recover: UserStreakRecoverData } & ButtonV2Props<'button'>) => { const { user } = useAuthContext(); const balance = user?.balance.amount ?? 0; return ( - + ); }; diff --git a/packages/shared/src/components/modals/user/CookieConsentModal.tsx b/packages/shared/src/components/modals/user/CookieConsentModal.tsx index d2f8ff0fb09..2d96699a02d 100644 --- a/packages/shared/src/components/modals/user/CookieConsentModal.tsx +++ b/packages/shared/src/components/modals/user/CookieConsentModal.tsx @@ -15,7 +15,7 @@ import { GdprConsentKey, otherGdprConsents, } from '../../../hooks/useCookieBanner'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { CookieConsentItem } from './CookieConsentItem'; interface CookieConsentModalProps extends ModalProps { @@ -115,23 +115,23 @@ export const CookieConsentModal = ({ - - - + ); diff --git a/packages/shared/src/components/modals/utils/ActionSuccessModal.tsx b/packages/shared/src/components/modals/utils/ActionSuccessModal.tsx index 5d2aa9e917e..4a88ded3d7e 100644 --- a/packages/shared/src/components/modals/utils/ActionSuccessModal.tsx +++ b/packages/shared/src/components/modals/utils/ActionSuccessModal.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from 'react'; import React from 'react'; -import type { AllowedTags, ButtonProps } from '../../buttons/Button'; -import { Button } from '../../buttons/Button'; +import type { AllowedTags, ButtonV2Props } from '../../buttons/ButtonV2'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; import { Typography, @@ -16,8 +16,8 @@ import { useViewSize, ViewSize } from '../../../hooks'; import { Image } from '../../image/Image'; interface ActionSuccessModalProps extends ModalProps { - cta?: ButtonProps & { copy: string }; - secondaryCta?: ButtonProps & { copy: string }; + cta?: ButtonV2Props & { copy: string }; + secondaryCta?: ButtonV2Props & { copy: string }; content: { title: string; description: string; @@ -90,34 +90,34 @@ export function ActionSuccessModal({ {body} {cta && ( - + )} {secondaryCta && ( - + )} {withCloseOnTablet && ( - + )} diff --git a/packages/shared/src/components/notifications/AskSearchBanner.tsx b/packages/shared/src/components/notifications/AskSearchBanner.tsx index 7c86df509bd..fdc56d83cbb 100644 --- a/packages/shared/src/components/notifications/AskSearchBanner.tsx +++ b/packages/shared/src/components/notifications/AskSearchBanner.tsx @@ -2,11 +2,11 @@ import type { ReactElement } from 'react'; import React, { useEffect, useRef } from 'react'; import classNames from 'classnames'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import CloseButton from '../CloseButton'; import { MagicIcon } from '../icons'; import { LogEvent, TargetId } from '../../lib/log'; @@ -70,7 +70,7 @@ export function AskSearchBanner({ content.

- +
- +
- +
Never miss new posts from{' '} {label} - + ); @@ -182,7 +182,7 @@ function EnableNotification({
{!acceptedJustNow && ( - + )} {showTextCloseButton && ( - + )} {!showTextCloseButton && !shouldUseTopRightCloseButton && ( diff --git a/packages/shared/src/components/notifications/InAppNotification.tsx b/packages/shared/src/components/notifications/InAppNotification.tsx index 5b02b204b13..f1efac7493f 100644 --- a/packages/shared/src/components/notifications/InAppNotification.tsx +++ b/packages/shared/src/components/notifications/InAppNotification.tsx @@ -15,7 +15,7 @@ import styles from './InAppNotification.module.css'; import { useLogContext } from '../../contexts/LogContext'; import { LogEvent, Origin } from '../../lib/log'; import { NotificationType } from './utils'; -import { ButtonSize } from '../buttons/Button'; +import { ButtonSize } from '../buttons/ButtonV2'; import { ModalClose } from '../modals/common/ModalClose'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; diff --git a/packages/shared/src/components/notifications/InAppNotificationsTab.tsx b/packages/shared/src/components/notifications/InAppNotificationsTab.tsx index 63716e3bb32..3b91055a15a 100644 --- a/packages/shared/src/components/notifications/InAppNotificationsTab.tsx +++ b/packages/shared/src/components/notifications/InAppNotificationsTab.tsx @@ -20,7 +20,7 @@ import { import { ButtonVariant } from '../buttons/common'; import { ArrowIcon } from '../icons'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { useLazyModal } from '../../hooks/useLazyModal'; import { LazyModal } from '../modals/common/types'; import { usePushNotificationMutation } from '../../hooks/notifications'; @@ -117,7 +117,7 @@ const InAppNotificationsTab = (): ReactElement => { down for moderation notification settings.
- + diff --git a/packages/shared/src/components/notifications/PersonalizedDigest.tsx b/packages/shared/src/components/notifications/PersonalizedDigest.tsx index e8f228e2746..a7490b6d1d7 100644 --- a/packages/shared/src/components/notifications/PersonalizedDigest.tsx +++ b/packages/shared/src/components/notifications/PersonalizedDigest.tsx @@ -17,7 +17,7 @@ import { usePersonalizedDigest, usePlusSubscription, } from '../../hooks'; -import { ButtonSize } from '../buttons/Button'; +import { ButtonSize } from '../buttons/ButtonV2'; import { LogEvent, NotificationCategory, TargetId } from '../../lib/log'; import { useLazyModal } from '../../hooks/useLazyModal'; import { useLogContext } from '../../contexts/LogContext'; diff --git a/packages/shared/src/components/notifications/Toast.tsx b/packages/shared/src/components/notifications/Toast.tsx index f66eb232f0e..8d5b936d2ca 100644 --- a/packages/shared/src/components/notifications/Toast.tsx +++ b/packages/shared/src/components/notifications/Toast.tsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; import type { ToastNotification } from '../../hooks'; import { TOAST_NOTIF_KEY } from '../../hooks'; import classed from '../../lib/classed'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import styles from './Toast.module.css'; import { MiniCloseIcon as XIcon } from '../icons'; import { isTouchDevice } from '../../lib/tooltip'; @@ -135,7 +135,7 @@ const Toast = ({ {toast.message} {toast.action && ( - + )} - - + ); diff --git a/packages/shared/src/components/opportunity/InlineEditor/InlineEditor.tsx b/packages/shared/src/components/opportunity/InlineEditor/InlineEditor.tsx index b3b8df3f29e..dc63dda7dde 100644 --- a/packages/shared/src/components/opportunity/InlineEditor/InlineEditor.tsx +++ b/packages/shared/src/components/opportunity/InlineEditor/InlineEditor.tsx @@ -1,7 +1,7 @@ import type { ReactElement, ReactNode } from 'react'; import React, { useState, useCallback } from 'react'; import classNames from 'classnames'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -126,7 +126,7 @@ export const InlineEditor = ({ {/* Action buttons */}
{onRemove ? ( - + ) : (
)}
- - +
diff --git a/packages/shared/src/components/opportunity/InlineEditor/InlineRoleInfoEditor.tsx b/packages/shared/src/components/opportunity/InlineEditor/InlineRoleInfoEditor.tsx index 5f51d37401b..a779908a9e1 100644 --- a/packages/shared/src/components/opportunity/InlineEditor/InlineRoleInfoEditor.tsx +++ b/packages/shared/src/components/opportunity/InlineEditor/InlineRoleInfoEditor.tsx @@ -26,7 +26,7 @@ import { import { KeywordSelection } from '../../../features/opportunity/components/KeywordSelection'; import ProfileLocation from '../../profile/ProfileLocation'; import { LocationDataset } from '../../../graphql/autocomplete'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { EditIcon } from '../../icons'; import { IconSize } from '../../Icon'; @@ -150,7 +150,7 @@ export const InlineRoleInfoEditor = ({
{extraActions} - - +
diff --git a/packages/shared/src/components/opportunity/NewOpportunityPopover.tsx b/packages/shared/src/components/opportunity/NewOpportunityPopover.tsx index 6bbd2d386ce..539c2b8f969 100644 --- a/packages/shared/src/components/opportunity/NewOpportunityPopover.tsx +++ b/packages/shared/src/components/opportunity/NewOpportunityPopover.tsx @@ -7,7 +7,7 @@ import { TypographyType, } from '../typography/Typography'; import { useAuthContext } from '../../contexts/AuthContext'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { FlexCol } from '../utilities'; import { useAlertsContext } from '../../contexts/AlertContext'; import Link from '../utilities/Link'; @@ -35,7 +35,7 @@ export const NewOpportunityPopover = (): ReactElement => { Your next big move is here! - + diff --git a/packages/shared/src/components/opportunity/OpportunityEditButton.tsx b/packages/shared/src/components/opportunity/OpportunityEditButton.tsx index a459aa12b5c..e5dea0b0f5a 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditButton.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditButton.tsx @@ -1,19 +1,19 @@ import React from 'react'; import classNames from 'classnames'; -import type { AllowedTags, ButtonProps } from '../buttons/Button'; +import type { AllowedTags, ButtonV2Props } from '../buttons/ButtonV2'; import { - Button, + ButtonV2, ButtonIconPosition, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { EditIcon } from '../icons'; import { useOpportunityEditContext } from './OpportunityEditContext'; export type OpportunityEditButtonProps = { className?: string; children?: React.ReactNode; -} & ButtonProps; +} & ButtonV2Props; export const OpportunityEditButton = ({ className, @@ -31,7 +31,7 @@ export const OpportunityEditButton = ({ } return ( - + ); }; diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditContentModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditContentModal.tsx index 0b690ec42a4..ec42297a700 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditContentModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditContentModal.tsx @@ -9,7 +9,7 @@ import { Modal } from '../../modals/common/Modal'; import { opportunityByIdOptions } from '../../../features/opportunity/queries'; import { Loader } from '../../Loader'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { labels } from '../../../lib'; import { editOpportunityContentMutationOptions } from '../../../features/opportunity/mutations'; import { ApiError } from '../../../graphql/common'; @@ -146,15 +146,15 @@ export const OpportunityEditContentModal = ({ {contentTitle}
- - +
@@ -218,7 +218,7 @@ export const OpportunityEditContentModal = ({ }} />
- +
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditInfoModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditInfoModal.tsx index 5306ee78ed5..1dc190e1852 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditInfoModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditInfoModal.tsx @@ -17,7 +17,7 @@ import { } from '../../typography/Typography'; import { Dropdown } from '../../fields/Dropdown'; import Textarea from '../../fields/Textarea'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { KeywordSelection } from '../../../features/opportunity/components/KeywordSelection'; import { labels } from '../../../lib'; import { opportunityEditInfoSchema } from '../../../lib/schema/opportunity'; @@ -152,15 +152,15 @@ export const OpportunityEditInfoModal = ({ Role description
- - +
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditOrganizationModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditOrganizationModal.tsx index 81cd103eb51..262e189577a 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditOrganizationModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditOrganizationModal.tsx @@ -5,7 +5,7 @@ import type { ModalProps } from '../../modals/common/Modal'; import { Modal } from '../../modals/common/Modal'; import { opportunityByIdOptions } from '../../../features/opportunity/queries'; import { Loader } from '../../Loader'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { labels } from '../../../lib'; import type { recruiterOrganizationEditSchema } from '../../../features/organizations/schema'; import { @@ -204,15 +204,15 @@ export const OpportunityEditOrganizationModal = ({ Company information
- - +
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditQuestionModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditQuestionModal.tsx index 90498e270e4..05573af8e0f 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditQuestionModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditQuestionModal.tsx @@ -7,7 +7,7 @@ import { Modal } from '../../modals/common/Modal'; import { opportunityByIdOptions } from '../../../features/opportunity/queries'; import { Loader } from '../../Loader'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { labels } from '../../../lib'; import { editOpportunityQuestionMutationOptions } from '../../../features/opportunity/mutations'; import { ApiError } from '../../../graphql/common'; @@ -142,15 +142,15 @@ export const OpportunityEditQuestionModal = ({ Question
- - +
@@ -199,7 +199,7 @@ export const OpportunityEditQuestionModal = ({ } >
- +
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditRecruiterModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditRecruiterModal.tsx index 6038e7c64de..fdd14c35382 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditRecruiterModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityEditRecruiterModal.tsx @@ -12,7 +12,7 @@ import { TextField } from '../../fields/TextField'; import { opportunityByIdOptions } from '../../../features/opportunity/queries'; import { Loader } from '../../Loader'; import Textarea from '../../fields/Textarea'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { labels } from '../../../lib'; import { editOpportunityRecruiterMutationOptions } from '../../../features/opportunity/mutations'; import { ApiError } from '../../../graphql/common'; @@ -149,15 +149,15 @@ export const OpportunityEditRecruiterModal = ({ Recruiter information
- - +
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx index 61186eab0c5..321580d8190 100644 --- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx @@ -12,7 +12,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonColor, ButtonVariant } from '../../buttons/ButtonV2'; import { TextField } from '../../fields/TextField'; import { UploadIcon } from '../../icons'; import { DragDrop } from '../../fields/DragDrop'; @@ -165,7 +165,7 @@ export const OpportunityReimportModal = ({ ctaLabelMobile="Browse files" /> - + diff --git a/packages/shared/src/components/opportunity/OpportunityEntryButton.tsx b/packages/shared/src/components/opportunity/OpportunityEntryButton.tsx index e026266c694..4cc2c761b10 100644 --- a/packages/shared/src/components/opportunity/OpportunityEntryButton.tsx +++ b/packages/shared/src/components/opportunity/OpportunityEntryButton.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import Link from '../utilities/Link'; import { isTesting, webappUrl } from '../../lib/constants'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { ButtonIconPosition, ButtonVariant } from '../buttons/common'; import { JobIcon } from '../icons'; import { Bubble } from '../tooltips/utils'; @@ -61,7 +61,7 @@ export const OpportunityEntryButton = () => { }`} passHref > - + diff --git a/packages/shared/src/components/opportunity/OpportunityHeader.tsx b/packages/shared/src/components/opportunity/OpportunityHeader.tsx index 961b3a659b2..e215ee692f9 100644 --- a/packages/shared/src/components/opportunity/OpportunityHeader.tsx +++ b/packages/shared/src/components/opportunity/OpportunityHeader.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { Typography, TypographyType } from '../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import Link from '../utilities/Link'; import { settingsUrl, webappUrl } from '../../lib/constants'; import { FilterIcon } from '../icons'; @@ -16,16 +16,16 @@ export const OpportunityHeader = (): ReactElement => {
- + -
- + ); }; diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/BrowserPreviewFrame.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/BrowserPreviewFrame.tsx index 10f92beeabf..685d51a97fd 100644 --- a/packages/shared/src/components/opportunity/SideBySideEdit/BrowserPreviewFrame.tsx +++ b/packages/shared/src/components/opportunity/SideBySideEdit/BrowserPreviewFrame.tsx @@ -1,7 +1,7 @@ import type { ReactElement, ReactNode } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { CopyIcon } from '../../icons'; import { IconSize } from '../../Icon'; import { useCopyLink } from '../../../hooks/useCopy'; @@ -38,7 +38,7 @@ export function BrowserPreviewFrame({ {url} - + ); diff --git a/packages/shared/src/components/organization/OrganizationEditForm.tsx b/packages/shared/src/components/organization/OrganizationEditForm.tsx index ff5d90431a0..7f85b050a3f 100644 --- a/packages/shared/src/components/organization/OrganizationEditForm.tsx +++ b/packages/shared/src/components/organization/OrganizationEditForm.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import type z from 'zod'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import type { recruiterOrganizationEditSchema } from '../../features/organizations/schema'; import type { Organization } from '../../features/organizations/types'; import { usePrompt } from '../../hooks/usePrompt'; @@ -122,22 +122,22 @@ export const OrganizationEditForm = ({ const actionButtons = ( <> - - + ); diff --git a/packages/shared/src/components/pagination/PaginationActions.tsx b/packages/shared/src/components/pagination/PaginationActions.tsx index 12d3acc732a..9ad9a8b8e68 100644 --- a/packages/shared/src/components/pagination/PaginationActions.tsx +++ b/packages/shared/src/components/pagination/PaginationActions.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { ArrowIcon } from '../icons'; import type { UsePagination } from '../../hooks/utils'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; export type ExtendedPaginationProps = Pick< UsePagination, @@ -31,14 +31,14 @@ export const PaginationActions = ({ {current}/{max}

- + diff --git a/packages/shared/src/components/plus/GiftReceivedPlusModal.tsx b/packages/shared/src/components/plus/GiftReceivedPlusModal.tsx index 8081419499e..58465fd2acc 100644 --- a/packages/shared/src/components/plus/GiftReceivedPlusModal.tsx +++ b/packages/shared/src/components/plus/GiftReceivedPlusModal.tsx @@ -15,7 +15,7 @@ import CloseButton from '../CloseButton'; import { ButtonSize, ButtonVariant } from '../buttons/common'; import { cloudinaryGiftedPlusModalImage } from '../../lib/image'; import { PlusList } from './PlusList'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { getPlusGifterUser } from '../../graphql/users'; import { generateQueryKey, RequestKey } from '../../lib/query'; import { ProfileImageSize, ProfilePicture } from '../ProfilePicture'; @@ -103,12 +103,12 @@ export function GiftReceivedPlusModal(props: ModalProps): ReactElement { />
- + >{`See what's inside`} ); diff --git a/packages/shared/src/components/plus/PlusAdjustQuantity.tsx b/packages/shared/src/components/plus/PlusAdjustQuantity.tsx index 1d900eb8c65..d6fc3ecc758 100644 --- a/packages/shared/src/components/plus/PlusAdjustQuantity.tsx +++ b/packages/shared/src/components/plus/PlusAdjustQuantity.tsx @@ -8,7 +8,7 @@ import { TypographyType, } from '../typography/Typography'; import { TextField } from '../fields/TextField'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { MinusIcon, PlusIcon } from '../icons'; import type { WithClassNameProps } from '../utilities'; import { usePlusSubscription } from '../../hooks'; @@ -90,7 +90,7 @@ export const PlusAdjustQuantity = ({ focused onChange={({ target }) => onQuantityChange(Number(target.value))} /> - + ); diff --git a/packages/shared/src/components/plus/PlusExtension.tsx b/packages/shared/src/components/plus/PlusExtension.tsx index 031ce6d0835..4d0711e6cc8 100644 --- a/packages/shared/src/components/plus/PlusExtension.tsx +++ b/packages/shared/src/components/plus/PlusExtension.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import React, { useState } from 'react'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { plusUrl } from '../../lib/constants'; import { PlusInfo } from './PlusInfo'; import { useLogContext } from '../../contexts/LogContext'; @@ -53,7 +53,7 @@ const PlusExtension = (): ReactElement => { showGiftButton={false} showTrustReviews={false} /> - + @@ -176,13 +176,13 @@ export const PlusIOS = ({ /> {showModalSection ? ( <> - + ) : ( <> diff --git a/packages/shared/src/components/plus/PlusInfo.tsx b/packages/shared/src/components/plus/PlusInfo.tsx index 38dae64d443..f0655e667db 100644 --- a/packages/shared/src/components/plus/PlusInfo.tsx +++ b/packages/shared/src/components/plus/PlusInfo.tsx @@ -17,7 +17,7 @@ import { useConditionalFeature, usePlusSubscription } from '../../hooks'; import { featurePlusApiLanding } from '../../lib/featureManagement'; import { usePaymentContext } from '../../contexts/payment/context'; import type { OpenCheckoutFn } from '../../contexts/payment/context'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { LogEvent, TargetId } from '../../lib/log'; import { useGiftUserContext } from './GiftUserContext'; import { PlusOptionRadio } from './PlusOptionRadio'; @@ -231,7 +231,7 @@ export const PlusInfo = ({ {showBuyAsAGiftButton && ( - + )} {!!giftToUser && ( @@ -313,7 +313,7 @@ export const PlusInfo = ({ {onContinue ? (
- +
) : undefined} {showPlusList && plusListContent} diff --git a/packages/shared/src/components/plus/PlusMobileDrawer.tsx b/packages/shared/src/components/plus/PlusMobileDrawer.tsx index 3460aba183b..f631ca5a316 100644 --- a/packages/shared/src/components/plus/PlusMobileDrawer.tsx +++ b/packages/shared/src/components/plus/PlusMobileDrawer.tsx @@ -8,7 +8,7 @@ import { TypographyColor, TypographyType, } from '../typography/Typography'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { plusUrl } from '../../lib/constants'; import { useLogContext } from '../../contexts/LogContext'; import { TargetType, Origin, LogEvent } from '../../lib/log'; @@ -61,9 +61,13 @@ const PlusMobileDrawer = ({ onClose }: PlusMobileDrawerProps): ReactElement => { - + diff --git a/packages/shared/src/components/plus/PlusPlus.tsx b/packages/shared/src/components/plus/PlusPlus.tsx index 624e5234228..fe4108ccdd0 100644 --- a/packages/shared/src/components/plus/PlusPlus.tsx +++ b/packages/shared/src/components/plus/PlusPlus.tsx @@ -7,7 +7,7 @@ import { Typography, } from '../typography/Typography'; import { PlusUser } from '../PlusUser'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { IconSize } from '../Icon'; import { managePlusUrl } from '../../lib/constants'; import type { WithClassNameProps } from '../utilities/common'; @@ -68,7 +68,7 @@ export const PlusPlus = ({ className }: PlusPlusProps): ReactElement => { {!gifter && ( - + )} ); diff --git a/packages/shared/src/components/plus/PlusProductToggle.tsx b/packages/shared/src/components/plus/PlusProductToggle.tsx index a50e77d2f7f..b69a112c3f2 100644 --- a/packages/shared/src/components/plus/PlusProductToggle.tsx +++ b/packages/shared/src/components/plus/PlusProductToggle.tsx @@ -3,11 +3,11 @@ import type { ReactElement } from 'react'; import classNames from 'classnames'; import { useRouter } from 'next/router'; import { - Button, - ButtonGroup, + ButtonV2, + ButtonV2Group, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { usePaymentContext } from '../../contexts/payment/context'; import type { PurchaseType } from '../../graphql/paddle'; import type { WithClassNameProps } from '../utilities'; @@ -49,11 +49,11 @@ export const PlusProductToggle = ({ }, [options, query.type, setPriceType]); return ( - + {options.map((option) => { const isSelected = priceType === option.priceType; return ( - + ); })} - + ); }; diff --git a/packages/shared/src/components/plus/PlusWebapp.tsx b/packages/shared/src/components/plus/PlusWebapp.tsx index 73e749ba832..84c8ea732ef 100644 --- a/packages/shared/src/components/plus/PlusWebapp.tsx +++ b/packages/shared/src/components/plus/PlusWebapp.tsx @@ -5,7 +5,7 @@ import { PlusInfo } from './PlusInfo'; import { PlusCheckoutContainer } from './PlusCheckoutContainer'; import { MarketingCtaVariant } from '../marketingCta/common'; import { useBoot } from '../../hooks'; -import { ButtonVariant, Button } from '../buttons/Button'; +import { ButtonVariant, ButtonV2 } from '../buttons/ButtonV2'; import PlusListModalSection from './PlusListModalSection'; const PlusWebapp = (): ReactElement => { @@ -41,13 +41,13 @@ const PlusWebapp = (): ReactElement => { showTrustReviews={false} /> {!showCheckout && ( - + )} {showCheckout ? ( diff --git a/packages/shared/src/components/plus/PostUpgradeToPlus.tsx b/packages/shared/src/components/plus/PostUpgradeToPlus.tsx index 3b47ab7af05..791e0265b5a 100644 --- a/packages/shared/src/components/plus/PostUpgradeToPlus.tsx +++ b/packages/shared/src/components/plus/PostUpgradeToPlus.tsx @@ -9,7 +9,7 @@ import { TypographyColor, TypographyType, } from '../typography/Typography'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { plusUrl } from '../../lib/constants'; import { DevPlusIcon } from '../icons'; import { useConditionalFeature, usePlusSubscription } from '../../hooks'; @@ -77,7 +77,7 @@ export const PostUpgradeToPlus = ({
- + - +
); diff --git a/packages/shared/src/components/popover/GifPopover.tsx b/packages/shared/src/components/popover/GifPopover.tsx index 608c4b9edd1..9e4539cddde 100644 --- a/packages/shared/src/components/popover/GifPopover.tsx +++ b/packages/shared/src/components/popover/GifPopover.tsx @@ -1,8 +1,8 @@ import { Popover, PopoverTrigger } from '@radix-ui/react-popover'; import React, { useState } from 'react'; import { useInView } from 'react-intersection-observer'; -import type { ButtonProps } from '../buttons/Button'; -import { Button } from '../buttons/Button'; +import type { ButtonV2Props } from '../buttons/ButtonV2'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { PopoverContent } from './Popover'; import { TextField } from '../fields/TextField'; import useDebounceFn from '../../hooks/useDebounceFn'; @@ -32,7 +32,7 @@ const searchSuggestions = [ ]; type GifPopoverProps = { - buttonProps: Pick, 'size' | 'variant' | 'icon'>; + buttonProps: Pick, 'size' | 'variant' | 'icon'>; onGifCommand?: (gifUrl: string, altText: string) => Promise; textareaRef?: React.MutableRefObject; }; @@ -96,7 +96,7 @@ const GifPickerContent = ({ ref={idx === gifsToDisplay.length - 1 ? scrollRef : null} >
- + )} - +
); diff --git a/packages/shared/src/components/post/FixedPostNavigation.tsx b/packages/shared/src/components/post/FixedPostNavigation.tsx index 808b440db07..de9efe43d8f 100644 --- a/packages/shared/src/components/post/FixedPostNavigation.tsx +++ b/packages/shared/src/components/post/FixedPostNavigation.tsx @@ -3,7 +3,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import PostNavigation from './PostNavigation'; import type { PostNavigationProps } from './common'; -import { ButtonSize } from '../buttons/Button'; +import { ButtonSize } from '../buttons/ButtonV2'; function FixedPostNavigation({ onPreviousPost, diff --git a/packages/shared/src/components/post/GoBackHeaderMobile.tsx b/packages/shared/src/components/post/GoBackHeaderMobile.tsx index 7b3f84bec3a..cadf49c13c5 100644 --- a/packages/shared/src/components/post/GoBackHeaderMobile.tsx +++ b/packages/shared/src/components/post/GoBackHeaderMobile.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren, ReactElement } from 'react'; import React, { useCallback } from 'react'; import { useRouter } from 'next/router'; import classNames from 'classnames'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; import type { WithClassNameProps } from '../utilities'; import { isDevelopment } from '../../lib/constants'; @@ -47,7 +47,7 @@ export const GoBackButton = ({ ) : null; return canGoBack ? ( - + ); } diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index 0f112328121..980dc99b9d4 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React, { useEffect, useMemo, useRef } from 'react'; +import React, { useEffect, useMemo } from 'react'; import type { QueryKey } from '@tanstack/react-query'; import classNames from 'classnames'; import { @@ -10,14 +10,15 @@ import { } from '../icons'; import type { Post } from '../../graphql/posts'; import { UserVote } from '../../graphql/posts'; -import { QuaternaryButton } from '../buttons/QuaternaryButton'; import type { PostOrigin } from '../../hooks/log/useLogContextData'; import { useMutationSubscription, useVotePost } from '../../hooks'; import { Origin } from '../../lib/log'; import { PostTagsPanel } from './block/PostTagsPanel'; import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel'; import { useBookmarkPost } from '../../hooks/useBookmarkPost'; -import { ButtonColor, ButtonVariant } from '../buttons/Button'; +import { ButtonColor } from '../buttons/ButtonV2'; +import { CardAction } from '../buttons/CardAction'; +import { CardActionBar } from '../buttons/CardActionBar'; import { BookmarkButton } from '../buttons'; import { AuthTriggers } from '../../lib/auth'; import { LazyModal } from '../modals/common/types'; @@ -33,6 +34,7 @@ import { Tooltip } from '../tooltip/Tooltip'; import ConditionalWrapper from '../ConditionalWrapper'; import { useBrandSponsorship } from '../../hooks/useBrandSponsorship'; import { UpvoteButtonIcon } from '../cards/common/UpvoteButtonIcon'; +import { usePostActionsLabelVisibility } from './usePostActionsLabelVisibility'; interface PostActionsProps { post: Post; @@ -52,7 +54,7 @@ export function PostActions({ const { openModal } = useLazyModal(); const { data, onShowPanel, onClose } = useBlockPostPanel(post); const { showTagsPanel } = data; - const actionsRef = useRef(null); + const { ref: actionsRef } = usePostActionsLabelVisibility(); const canAward = useCanAwardUser({ sendingUser: user, receivingUser: post.author as LoggedUser | undefined, @@ -62,6 +64,7 @@ export function PostActions({ const { toggleUpvote, toggleDownvote } = useVotePost(); const isUpvoteActive = post?.userState?.vote === UserVote.Up; const isDownvoteActive = post?.userState?.vote === UserVote.Down; + const isAwarded = !!post?.userState?.awarded; // Get brand animation config if post has sponsored tags const brandAnimation = useMemo(() => { @@ -178,89 +181,71 @@ export function PostActions({ }, }); + // The label-visibility hook re-runs on box-size changes and on mount; + // we still want to re-measure when the post's awarded / canAward + // state flips because that toggles the Award button's presence, + // changing the row's natural width. useEffect(() => { - const adjustActions = () => { - const actions = actionsRef.current; - if (!actions) { - return; - } - - const labels = actions.querySelectorAll('.btn-quaternary label'); - labels.forEach((label) => label.classList.remove('hidden')); - - const isOverflowing = actions.scrollWidth > actions.clientWidth; - if (isOverflowing) { - labels.forEach((label) => label.classList.add('hidden')); - } - }; - - const resizeObserver = new ResizeObserver(() => { - adjustActions(); - }); - - if (actionsRef.current && globalThis) { - resizeObserver.observe(actionsRef.current); + const el = actionsRef.current; + if (!el) { + return; } - - return () => { - resizeObserver.disconnect(); - }; - - // It needs the post?.userState?.awarded and canAward dependency to ensure that the querySelector - // for labels is executed after the DOM is updated with the new state. - }, [post?.userState?.awarded, canAward]); + const wrappers = el.querySelectorAll('.card-action-content'); + wrappers.forEach((w) => w.classList.remove('hidden')); + if (el.scrollWidth > el.clientWidth) { + wrappers.forEach((w) => w.classList.add('hidden')); + } + }, [actionsRef, isAwarded, canAward]); return (
-
- + icon={} + iconPressed={ + } - aria-label="Upvote" - variant={ButtonVariant.Tertiary} + label="Upvote" color={ButtonColor.Avocado} /> - } - aria-label="Downvote" - variant={ButtonVariant.Tertiary} + icon={} + iconPressed={} + label="Downvote" color={ButtonColor.Ketchup} /> - } - aria-label="Comment" - className="btn-tertiary-blueCheese" - > - Comment - + icon={} + iconPressed={} + label="Comment" + labelVisible + color={ButtonColor.BlueCheese} + /> {canAward && ( { return ( @@ -269,9 +254,9 @@ export function PostActions({ ); }} > - { if (!user) { showLogin({ trigger: AuthTriggers.GiveAward }); @@ -295,43 +280,32 @@ export function PostActions({ }, }); }} - icon={} - className={classNames( - 'btn-tertiary-cabbage', - post?.userState?.awarded && 'pointer-events-none', - )} - > - Award - + icon={} + iconPressed={} + label="Award" + labelVisible + color={ButtonColor.Cabbage} + buttonClassName={classNames(isAwarded && 'pointer-events-none')} + /> )} - Bookmark - -
- onCopyLinkClick?.(post)} - icon={} - variant={ButtonVariant.Tertiary} - className={classNames( - 'text-text-tertiary', - 'group-hover/link-btn:text-accent-cabbage-default', - )} - color={ButtonColor.Cabbage} - > - Copy - -
-
+ id="bookmark-post-btn" + pressed={post.bookmarked} + onClick={onToggleBookmark} + label="Bookmark" + labelVisible + /> + onCopyLinkClick?.(post)} + icon={} + label="Copy" + labelVisible + color={ButtonColor.Cabbage} + /> +
{showTagsPanel !== undefined && ( diff --git a/packages/shared/src/components/post/PostAwardAction.tsx b/packages/shared/src/components/post/PostAwardAction.tsx index 9adb83d4b13..31f82cf5517 100644 --- a/packages/shared/src/components/post/PostAwardAction.tsx +++ b/packages/shared/src/components/post/PostAwardAction.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import classNames from 'classnames'; import { useAuthContext } from '../../contexts/AuthContext'; import { useCanAwardUser } from '../../hooks/useCoresFeature'; import { useLazyModal } from '../../hooks/useLazyModal'; -import { ButtonColor, ButtonSize, ButtonVariant } from '../buttons/Button'; -import { QuaternaryButton } from '../buttons/QuaternaryButton'; +import { ButtonColor } from '../buttons/ButtonV2'; +import type { CardActionDensity } from '../buttons/CardAction'; +import { CardAction } from '../buttons/CardAction'; import { IconSize, iconSizeToClassName } from '../Icon'; import { MedalBadgeIcon } from '../icons'; -import InteractionCounter from '../InteractionCounter'; import { Tooltip } from '../tooltip/Tooltip'; import type { Post } from '../../graphql/posts'; import { Image } from '../image/Image'; @@ -17,10 +16,25 @@ import type { LoggedUser } from '../../lib/user'; export interface PostAwardActionProps { post: Post; + /** + * Density passes through to `CardAction`. Default `compact` matches + * the feed-grid card width contract; overridable for surfaces where + * the bar is the comfortable 40 px row. + */ + density?: CardActionDensity; + /** + * Optional fixed icon size for the featured-award `Image` thumbnail. + * Falls back to the density-derived default. Kept so feed cards can + * lock the medal at the same dimension as sibling icons. + */ iconSize?: IconSize; } -const PostAwardAction = ({ post, iconSize }: PostAwardActionProps) => { +const PostAwardAction = ({ + post, + density = 'compact', + iconSize, +}: PostAwardActionProps) => { const { openModal } = useLazyModal(); const { user, showLogin } = useAuthContext(); const isSameUser = user?.id === post?.author?.id; @@ -32,6 +46,7 @@ const PostAwardAction = ({ post, iconSize }: PostAwardActionProps) => { if (!canAward && !isSameUser) { return null; } + const awardEntity = { id: post.id, receiver: post.author, @@ -62,6 +77,21 @@ const PostAwardAction = ({ post, iconSize }: PostAwardActionProps) => { }); }; + // Featured-award thumbnail uses an explicit fixed size override + // (matches v1: 20 px square via `iconSizeToClassName[XSmall]`) so + // the medal asset doesn't get rescaled by the CardAction icon + // wrapper. Keeps parity with the previous QuaternaryButton behaviour. + const renderedIcon = + post.userState?.awarded && post.featuredAward?.award?.image ? ( + {post?.featuredAward?.award?.name} + ) : ( + + ); + return ( { : 'Award this post' } > - + renderedIcon ) : ( ) } - > - {post?.numAwards > 0 && ( - - )} - + label="Award" + count={post?.numAwards} + color={ButtonColor.Cabbage} + buttonClassName="pointer-events-auto" + /> ); }; diff --git a/packages/shared/src/components/post/PostCodeSnippets.tsx b/packages/shared/src/components/post/PostCodeSnippets.tsx index ad73a19bb4b..7b69097c70f 100644 --- a/packages/shared/src/components/post/PostCodeSnippets.tsx +++ b/packages/shared/src/components/post/PostCodeSnippets.tsx @@ -3,7 +3,7 @@ import React, { useContext, useMemo, useState } from 'react'; import classNames from 'classnames'; import { usePostCodeSnippetsQuery } from '../../hooks/post/usePostCodeSnippets'; import { RenderMarkdown } from '../RenderMarkdown'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { ArrowIcon } from '../icons'; import type { Post } from '../../graphql/posts'; import { postLogEvent } from '../../lib/feed'; @@ -69,7 +69,7 @@ export const PostCodeSnippets = ({ const NavigationButtons = ( <> - + )} {isBoostButtonVisible && ( diff --git a/packages/shared/src/components/post/PostItemCard.tsx b/packages/shared/src/components/post/PostItemCard.tsx index 4a49c05a0ed..667fcfa3f10 100644 --- a/packages/shared/src/components/post/PostItemCard.tsx +++ b/packages/shared/src/components/post/PostItemCard.tsx @@ -15,11 +15,11 @@ import { cloudinaryPostImageCoverPlaceholder } from '../../lib/image'; import { useReadHistoryVotePost } from '../../hooks'; import { Origin } from '../../lib/log'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { isSourceUserSource } from '../../graphql/sources'; import { ReadingHistoryOptionsMenu } from '../history/ReadingHistoryOptionsMenu'; @@ -137,7 +137,7 @@ export default function PostItemCard({
{showButtons && showVoteActions && ( <> - + } > + {children} ); @@ -85,10 +90,10 @@ const PostUpvotesCommentsCountContent = ({ return (
- + )}
diff --git a/packages/shared/src/components/post/SharePostContent.tsx b/packages/shared/src/components/post/SharePostContent.tsx index 34ecd82a5cb..1018dc3af10 100644 --- a/packages/shared/src/components/post/SharePostContent.tsx +++ b/packages/shared/src/components/post/SharePostContent.tsx @@ -19,7 +19,7 @@ import SettingsContext, { import { combinedClicks } from '../../lib/click'; import { SharedLinkContainer } from './common/SharedLinkContainer'; import { SharedPostLink } from './common/SharedPostLink'; -import { ButtonVariant } from '../buttons/Button'; +import { ButtonVariant } from '../buttons/ButtonV2'; import { ElementPlaceholder } from '../ElementPlaceholder'; import { ProfileImageSize } from '../ProfilePicture'; import { TruncateText } from '../utilities'; diff --git a/packages/shared/src/components/post/SquadPostAuthor.tsx b/packages/shared/src/components/post/SquadPostAuthor.tsx index 8a4c8f3a377..4788175f723 100644 --- a/packages/shared/src/components/post/SquadPostAuthor.tsx +++ b/packages/shared/src/components/post/SquadPostAuthor.tsx @@ -20,7 +20,7 @@ import { } from '../../graphql/contentPreference'; import { useContentPreferenceStatusQuery } from '../../hooks/contentPreference/useContentPreferenceStatusQuery'; import { useViewSize, ViewSize } from '../../hooks/useViewSize'; -import { ButtonVariant } from '../buttons/Button'; +import { ButtonVariant } from '../buttons/ButtonV2'; import { ProfileImageLink } from '../profile/ProfileImageLink'; interface SquadPostAuthorProps { diff --git a/packages/shared/src/components/post/analytics/PostShortInfo.tsx b/packages/shared/src/components/post/analytics/PostShortInfo.tsx index 45f8fabde5c..af3dec17714 100644 --- a/packages/shared/src/components/post/analytics/PostShortInfo.tsx +++ b/packages/shared/src/components/post/analytics/PostShortInfo.tsx @@ -13,7 +13,7 @@ import { cloudinaryPostImageCoverPlaceholder } from '../../../lib/image'; import { OpenLinkIcon } from '../../icons'; import { Typography, TypographyType } from '../../typography/Typography'; import { ButtonSize, ButtonVariant } from '../../buttons/common'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { webappUrl } from '../../../lib/constants'; interface PostShortInfoProps { @@ -100,7 +100,7 @@ export function PostShortInfo({ /> )} {showLinkIcon && postLink && ( - + ); } diff --git a/packages/shared/src/components/post/block/PostTagsPanel.tsx b/packages/shared/src/components/post/block/PostTagsPanel.tsx index 9d1e764af62..dd11a8e7377 100644 --- a/packages/shared/src/components/post/block/PostTagsPanel.tsx +++ b/packages/shared/src/components/post/block/PostTagsPanel.tsx @@ -7,11 +7,11 @@ import { isNullOrUndefined } from '../../../lib/func'; import { PostBlockedPanel } from './PostBlockedPanel'; import CloseButton from '../../CloseButton'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../../buttons/Button'; +} from '../../buttons/ButtonV2'; import { SourceAvatar } from '../../profile/source'; import useFeedSettings from '../../../hooks/useFeedSettings'; import type { BlockTagSelection } from './common'; @@ -109,7 +109,7 @@ export function PostTagsPanel({ className="mt-4 flex flex-1 flex-row flex-wrap content-start gap-2 overflow-auto" role="list" > - + {post.tags.map((tag) => ( - + ( @@ -146,14 +146,14 @@ export function PostTagsPanel({ )} > - +
diff --git a/packages/shared/src/components/post/brief/BriefPostContent.tsx b/packages/shared/src/components/post/brief/BriefPostContent.tsx index ad37fd2cbff..b4337cc7d27 100644 --- a/packages/shared/src/components/post/brief/BriefPostContent.tsx +++ b/packages/shared/src/components/post/brief/BriefPostContent.tsx @@ -40,11 +40,11 @@ import { ProfileImageSize } from '../../ProfilePicture'; import { briefButtonBg, briefCardBg } from '../../../styles/custom'; import { plusUrl } from '../../../lib/constants'; import { - Button, + ButtonV2, ButtonIconPosition, ButtonSize, ButtonVariant, -} from '../../buttons/Button'; +} from '../../buttons/ButtonV2'; import { LogEvent, TargetId } from '../../../lib/log'; import { featurePlusCtaCopy } from '../../../lib/featureManagement'; import { LottieAnimation } from '../../LottieAnimation'; @@ -416,7 +416,7 @@ const BriefPostContentRaw = ({ icon={ChecklistAIcon} /> - +
@@ -550,7 +550,7 @@ const BriefPostContentRaw = ({ Slack
- +
diff --git a/packages/shared/src/components/post/brief/BriefPostHeaderActions.tsx b/packages/shared/src/components/post/brief/BriefPostHeaderActions.tsx index d1cb33406be..b567014bbd9 100644 --- a/packages/shared/src/components/post/brief/BriefPostHeaderActions.tsx +++ b/packages/shared/src/components/post/brief/BriefPostHeaderActions.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import classed from '../../../lib/classed'; import type { PostHeaderActionsProps } from '../common'; import Link from '../../utilities/Link'; -import { Button, ButtonSize } from '../../buttons/Button'; +import { ButtonV2, ButtonSize } from '../../buttons/ButtonV2'; import { settingsUrl } from '../../../lib/constants'; import { LinkIcon, SettingsIcon } from '../../icons'; import { useSharePost } from '../../../hooks/useSharePost'; @@ -32,14 +32,14 @@ export const BriefPostHeaderActions = ({
{showShareButton && ( -
diff --git a/packages/shared/src/components/post/collection/CollectionSubscribeButton.tsx b/packages/shared/src/components/post/collection/CollectionSubscribeButton.tsx index 184a86b3b88..4a2ba6e32de 100644 --- a/packages/shared/src/components/post/collection/CollectionSubscribeButton.tsx +++ b/packages/shared/src/components/post/collection/CollectionSubscribeButton.tsx @@ -8,7 +8,7 @@ import { NotificationType } from '../../notifications/utils'; import { NotificationPreferenceStatus } from '../../../graphql/notifications'; import { BellDisabledIcon, BellIcon } from '../../icons'; import type { Post } from '../../../graphql/posts'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { AuthTriggers } from '../../../lib/auth'; import { useAuthContext } from '../../../contexts/AuthContext'; @@ -66,7 +66,7 @@ export const CollectionSubscribeButton = ({ }; return ( - + ); }; diff --git a/packages/shared/src/components/post/common/PostClickbaitShield.tsx b/packages/shared/src/components/post/common/PostClickbaitShield.tsx index 02b67abb71a..5fc445f7e38 100644 --- a/packages/shared/src/components/post/common/PostClickbaitShield.tsx +++ b/packages/shared/src/components/post/common/PostClickbaitShield.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; import { useRouter } from 'next/router'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { ShieldCheckIcon, ShieldIcon, ShieldWarningIcon } from '../../icons'; import { useClickbaitTries, @@ -43,7 +43,7 @@ export const PostClickbaitShield = ({ post }: { post: Post }): ReactElement => { 'rounded-12 border border-border-subtlest-tertiary px-3 py-2', )} > - + {triesLeft > 0 ? `for free (${triesLeft} uses left this month).` : undefined} @@ -134,7 +134,7 @@ export const PostClickbaitShield = ({ post }: { post: Post }): ReactElement => { : 'Click to see the optimized title' } > - + ); }; diff --git a/packages/shared/src/components/post/common/PostReminderOptions.tsx b/packages/shared/src/components/post/common/PostReminderOptions.tsx index 0f8366d9137..55e9c0f9f89 100644 --- a/packages/shared/src/components/post/common/PostReminderOptions.tsx +++ b/packages/shared/src/components/post/common/PostReminderOptions.tsx @@ -1,8 +1,8 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import type { ButtonProps } from '../../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import type { ButtonV2Props } from '../../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { ReminderPreference, useBookmarkReminder, @@ -17,7 +17,7 @@ import { usePostActions } from '../../../hooks/post/usePostActions'; interface PostReminderOptionsProps { post: Post; className?: string; - buttonProps?: ButtonProps<'button'>; + buttonProps?: ButtonV2Props<'button'>; } export function PostReminderOptions({ @@ -40,23 +40,23 @@ export function PostReminderOptions({ }; return ( - - - + ); } diff --git a/packages/shared/src/components/post/poll/CreatePoll.tsx b/packages/shared/src/components/post/poll/CreatePoll.tsx index 34e144fc143..dd7cf162c94 100644 --- a/packages/shared/src/components/post/poll/CreatePoll.tsx +++ b/packages/shared/src/components/post/poll/CreatePoll.tsx @@ -5,7 +5,7 @@ import { TextField } from '../../fields/TextField'; import { useWritePostContext } from '../../../contexts'; import { Typography, TypographyType } from '../../typography/Typography'; import { WriteFooter } from '../write'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; import { PlusIcon } from '../../icons'; import { ActionType } from '../../../graphql/actions'; import { useActions } from '../../../hooks'; @@ -134,14 +134,14 @@ const CreatePoll = () => { /> ))} {draft?.options && draft?.options.length < 4 && ( - + )} diff --git a/packages/shared/src/components/post/poll/PollDurationDropdown.tsx b/packages/shared/src/components/post/poll/PollDurationDropdown.tsx index a6be7ebc827..12f3b3fd935 100644 --- a/packages/shared/src/components/post/poll/PollDurationDropdown.tsx +++ b/packages/shared/src/components/post/poll/PollDurationDropdown.tsx @@ -8,7 +8,7 @@ import { DropdownMenuTrigger, } from '../../dropdown/DropdownMenu'; import { ButtonVariant } from '../../buttons/common'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { ArrowIcon } from '../../icons'; import type { MenuItemProps } from '../../dropdown/common'; @@ -71,13 +71,13 @@ const PollDurationDropdown = () => { - + & { post: Post }; @@ -237,7 +237,7 @@ function PollPostContentRaw({ /> Why did you vote this way? - + )} diff --git a/packages/shared/src/components/post/reader/EngagementRail.tsx b/packages/shared/src/components/post/reader/EngagementRail.tsx index 0265b25fa01..e087cfe1823 100644 --- a/packages/shared/src/components/post/reader/EngagementRail.tsx +++ b/packages/shared/src/components/post/reader/EngagementRail.tsx @@ -23,11 +23,11 @@ import { PostClickbaitShield } from '../common/PostClickbaitShield'; import { useSettingsContext } from '../../../contexts/SettingsContext'; import ShowMoreContent from '../../cards/common/ShowMoreContent'; import { - Button, + ButtonV2, ButtonIconPosition, ButtonSize, ButtonVariant, -} from '../../buttons/Button'; +} from '../../buttons/ButtonV2'; import { TimeSortIcon } from '../../icons/Sort/Time'; import { AnalyticsIcon, ArrowIcon } from '../../icons'; import { PostMenuOptions } from '../PostMenuOptions'; @@ -138,7 +138,7 @@ export function EngagementRail({ {onBackToFeed && (
-
- + ( {post.summary} )} - + ); }, diff --git a/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx b/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx index 44250e65692..7d0199c37e6 100644 --- a/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx +++ b/packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx @@ -1,6 +1,5 @@ import type { ReactElement } from 'react'; import React from 'react'; -import classNames from 'classnames'; import type { Post } from '../../../graphql/posts'; import { UserVote } from '../../../graphql/posts'; import { @@ -9,28 +8,21 @@ import { ShareIcon, UpvoteIcon, } from '../../icons'; -import { Button, ButtonVariant, ButtonColor } from '../../buttons/Button'; +import { ButtonColor } from '../../buttons/ButtonV2'; +import { CardAction } from '../../buttons/CardAction'; +import { CardActionBar } from '../../buttons/CardActionBar'; import { BookmarkButton } from '../../buttons'; import { useBookmarkPost } from '../../../hooks/useBookmarkPost'; import { useVotePost } from '../../../hooks/vote/useVotePost'; import { useSharePost } from '../../../hooks/useSharePost'; import { Origin } from '../../../lib/log'; -import { largeNumberFormat } from '../../../lib/numberFormat'; import { Tooltip } from '../../tooltip/Tooltip'; -import { IconSize } from '../../Icon'; type ReaderFloatingActionBarProps = { post: Post; onCommentClick: () => void; }; -const FLOATING_ICON_SIZE = IconSize.XSmall; -const countActionButtonClasses = - '!h-8 !min-w-0 !gap-1 !rounded-10 !px-2 !justify-center !font-normal'; -const iconActionButtonClasses = - '!h-8 !w-8 !min-w-8 !rounded-10 !p-0 !justify-center'; -const countClasses = 'text-text-tertiary typo-footnote tabular-nums'; - export function ReaderFloatingActionBar({ post, onCommentClick, @@ -41,106 +33,89 @@ export function ReaderFloatingActionBar({ const isUpvoteActive = post?.userState?.vote === UserVote.Up; const isDownvoteActive = post?.userState?.vote === UserVote.Down; - const upvotes = largeNumberFormat(post.numUpvotes ?? 0) ?? '0'; - const comments = largeNumberFormat(post.numComments ?? 0) ?? '0'; + const upvoteCount = post.numUpvotes ?? 0; + const commentCount = post.numComments ?? 0; + // Floating reader bar uses `density="compact"` so the chrome stays + // visually proportional to the small (32 px) icon ladder it shipped + // with under v1. The wrapper keeps the bar centered, blurred, and + // shadowed; CardActionBar `default` provides the gap-1 between + // children that v1 achieved with `gap-0.5`. return (
- - - - - - - { toggleBookmark({ post, origin: Origin.ReaderModal }).catch( () => {}, ); - }, - className: '!h-8 !w-8 !shrink-0', - buttonClassName: classNames( - iconActionButtonClasses, - 'btn-tertiary-bun', - ), - }} - /> - -
); } diff --git a/packages/shared/src/components/post/reader/ReaderHeaderActionButtons.tsx b/packages/shared/src/components/post/reader/ReaderHeaderActionButtons.tsx index c55dc485bcd..3d0d2ed82f4 100644 --- a/packages/shared/src/components/post/reader/ReaderHeaderActionButtons.tsx +++ b/packages/shared/src/components/post/reader/ReaderHeaderActionButtons.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { EyeIcon, MiniCloseIcon as CloseIcon, @@ -23,7 +23,7 @@ export function ReaderDiscussionToggleButton({ }: ReaderDiscussionToggleButtonProps): ReactElement { return ( - + ); }; const button = ( - + ); return ( diff --git a/packages/shared/src/components/post/write/MultipleSourceSelect.tsx b/packages/shared/src/components/post/write/MultipleSourceSelect.tsx index eb3f099c6b0..83bead8b2e9 100644 --- a/packages/shared/src/components/post/write/MultipleSourceSelect.tsx +++ b/packages/shared/src/components/post/write/MultipleSourceSelect.tsx @@ -17,7 +17,7 @@ import { import { ProfileImageSize } from '../../ProfilePicture'; import { cloudinarySquadsImageFallback } from '../../../lib/image'; -import { Button } from '../../buttons/Button'; +import { ButtonV2 } from '../../buttons/ButtonV2'; import { Typography, TypographyColor, @@ -288,7 +288,7 @@ export const MultipleSourceSelect = ({
{selectedSquads.map((squad) => ( - + ))}
diff --git a/packages/shared/src/components/post/write/WriteFooter.tsx b/packages/shared/src/components/post/write/WriteFooter.tsx index 0ace97b77e3..0b06c498afb 100644 --- a/packages/shared/src/components/post/write/WriteFooter.tsx +++ b/packages/shared/src/components/post/write/WriteFooter.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { Switch } from '../../fields/Switch'; import { useNotificationToggle } from '../../../hooks/notifications'; import useSidebarRendered from '../../../hooks/useSidebarRendered'; -import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonColor, ButtonVariant } from '../../buttons/ButtonV2'; import PollDurationDropdown from '../poll/PollDurationDropdown'; interface WriteFooterProps { @@ -46,7 +46,7 @@ export function WriteFooter({ Receive updates whenever your Squad members engage with your post )} - + ); } diff --git a/packages/shared/src/components/post/write/WriteLinkPreview.tsx b/packages/shared/src/components/post/write/WriteLinkPreview.tsx index d844ec3fec1..7dc296fda5e 100644 --- a/packages/shared/src/components/post/write/WriteLinkPreview.tsx +++ b/packages/shared/src/components/post/write/WriteLinkPreview.tsx @@ -12,7 +12,7 @@ import { } from './common'; import type { ExternalLinkPreview, Post } from '../../../graphql/posts'; import { isSocialTwitterPost, PostType } from '../../../graphql/posts'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { ProfileImageSize, ProfilePicture } from '../../ProfilePicture'; import { Typography, @@ -145,7 +145,7 @@ export function WriteLinkPreview({ /> )} {!isMinimized && ( - + ); diff --git a/packages/shared/src/components/post/write/WritePreviewSkeleton.tsx b/packages/shared/src/components/post/write/WritePreviewSkeleton.tsx index 673bca14a1a..e0feac2a84c 100644 --- a/packages/shared/src/components/post/write/WritePreviewSkeleton.tsx +++ b/packages/shared/src/components/post/write/WritePreviewSkeleton.tsx @@ -9,7 +9,7 @@ import { WritePreviewContainer, WritePreviewContent, } from './common'; -import { Button, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../../buttons/ButtonV2'; interface WritePreviewSkeletonProps { link: string; @@ -42,7 +42,7 @@ export function WritePreviewSkeleton({
-
- + )} {!blocked && ( @@ -271,7 +271,7 @@ export function Header({ } passHref > - + ; + buttonProps?: ButtonV2Props<'a' | 'button'>; className?: string; children?: ReactElement; } @@ -22,9 +22,9 @@ export function MyProfileEmptyScreen({ return (

{text}

- + {children}
); diff --git a/packages/shared/src/components/profile/ProfileActions.tsx b/packages/shared/src/components/profile/ProfileActions.tsx index d81d537948d..1f29c1d9976 100644 --- a/packages/shared/src/components/profile/ProfileActions.tsx +++ b/packages/shared/src/components/profile/ProfileActions.tsx @@ -14,11 +14,11 @@ import { MenuIcon as DotsIcon, } from '../icons'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { ReferralCampaignKey } from '../../lib'; import { FollowButton } from '../contentPreference/FollowButton'; import { @@ -124,18 +124,18 @@ const ProfileActions = ({ user, isPreviewMode }: HeaderProps): ReactElement => {
- - - +
diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx index 8ac86736106..7f990f810eb 100644 --- a/packages/shared/src/components/profile/ProfileHeader.tsx +++ b/packages/shared/src/components/profile/ProfileHeader.tsx @@ -13,7 +13,7 @@ import type { UserStatsProps } from './UserStats'; import { UserStats } from './UserStats'; import JoinedDate from './JoinedDate'; import { Separator } from '../cards/common/common'; -import { Button, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonVariant } from '../buttons/ButtonV2'; import { webappUrl } from '../../lib/constants'; import Link from '../utilities/Link'; import { useAuthContext } from '../../contexts/AuthContext'; @@ -73,7 +73,7 @@ const ProfileHeader = ({ />
- + } /> diff --git a/packages/shared/src/components/profile/SquadsList.tsx b/packages/shared/src/components/profile/SquadsList.tsx index ac08c0cd5a7..8edaf66082d 100644 --- a/packages/shared/src/components/profile/SquadsList.tsx +++ b/packages/shared/src/components/profile/SquadsList.tsx @@ -10,7 +10,7 @@ import { Image } from '../image/Image'; import { CardLink } from '../cards/common/Card'; import { PlusIcon } from '../icons'; import { ButtonSize, ButtonVariant } from '../buttons/common'; -import { Button } from '../buttons/Button'; +import { ButtonV2 } from '../buttons/ButtonV2'; import { useJoinSquad, useToastNotification, @@ -110,7 +110,7 @@ function SquadItem({ {largeNumberFormat(squad.membersCount)} members {showJoin && ( -
{showJoin && ( - + )}
); @@ -172,7 +172,7 @@ export function SquadsList({ if (!edges.length) { return (
- + )}
); diff --git a/packages/shared/src/components/profile/UserShortInfo.tsx b/packages/shared/src/components/profile/UserShortInfo.tsx index 4690098f0f9..b8523141560 100644 --- a/packages/shared/src/components/profile/UserShortInfo.tsx +++ b/packages/shared/src/components/profile/UserShortInfo.tsx @@ -24,7 +24,7 @@ import { } from '../typography/Typography'; import { formatCoresCurrency } from '../../lib/utils'; import { Image } from '../image/Image'; -import { ButtonVariant } from '../buttons/Button'; +import { ButtonVariant } from '../buttons/ButtonV2'; type PropsOf = Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] diff --git a/packages/shared/src/components/profile/YearSelect.tsx b/packages/shared/src/components/profile/YearSelect.tsx index 24c5ab2acc9..2ad2f39c14f 100644 --- a/packages/shared/src/components/profile/YearSelect.tsx +++ b/packages/shared/src/components/profile/YearSelect.tsx @@ -6,8 +6,8 @@ import { DropdownMenuOptions, DropdownMenuTrigger, } from '../dropdown/DropdownMenu'; -import type { IconType } from '../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import type { IconType } from '../buttons/ButtonV2'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import type { MenuItemProps } from '../dropdown/common'; const generateYearOptions = (): { label: string; value: string }[] => { @@ -50,7 +50,7 @@ const YearSelect = ({ return ( - + {shouldShowDestination && destination && ( - + )}
)} @@ -702,7 +702,7 @@ export const QuestSection = ({ {canToggleExpanded && ( - + )} ); @@ -742,7 +742,7 @@ function QuestPlusUnlockButton(): ReactElement | null { return ( - + ); } @@ -1769,7 +1769,7 @@ export const QuestButton = ({ - + diff --git a/packages/shared/src/components/recruiter/ConnectHeader.tsx b/packages/shared/src/components/recruiter/ConnectHeader.tsx index 930a67ee39c..a1371c352c7 100644 --- a/packages/shared/src/components/recruiter/ConnectHeader.tsx +++ b/packages/shared/src/components/recruiter/ConnectHeader.tsx @@ -9,7 +9,7 @@ import { } from '../typography/Typography'; import { EyeIcon, ReputationLightningIcon } from '../icons'; import { IconSize } from '../Icon'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { FlexCol, FlexRow } from '../utilities'; import { BoostIcon } from '../icons/Boost'; import Link from '../utilities/Link'; @@ -97,7 +97,7 @@ export const ConnectHeader = ({ - - + diff --git a/packages/shared/src/components/recruiter/Header.tsx b/packages/shared/src/components/recruiter/Header.tsx index c42eedd8c36..3ab8a7e7fa6 100644 --- a/packages/shared/src/components/recruiter/Header.tsx +++ b/packages/shared/src/components/recruiter/Header.tsx @@ -6,7 +6,7 @@ import { TypographyType, } from '../typography/Typography'; import { MoveToIcon } from '../icons'; -import { Button, ButtonColor, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonColor, ButtonVariant } from '../buttons/ButtonV2'; import HeaderLogo from '../layout/HeaderLogo'; export interface RecruiterHeaderButton { @@ -46,7 +46,7 @@ export const RecruiterHeader = ({ {headerButton && ( - + )} ); diff --git a/packages/shared/src/components/recruiter/MatchProfile.tsx b/packages/shared/src/components/recruiter/MatchProfile.tsx index 03bfeeecb53..49d1a7a3775 100644 --- a/packages/shared/src/components/recruiter/MatchProfile.tsx +++ b/packages/shared/src/components/recruiter/MatchProfile.tsx @@ -8,7 +8,7 @@ import { import { FlexCol, FlexRow } from '../utilities'; import { LinkIcon, ReputationIcon } from '../icons'; import { IconSize } from '../Icon'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../buttons/ButtonV2'; import { largeNumberFormat } from '../../lib'; import { getLastActivityDateFormat } from '../../lib/dateFormat'; import { anchorDefaultRel } from '../../lib/strings'; @@ -59,7 +59,7 @@ export const MatchProfile = ({ profile }: MatchProfileProps): ReactElement => { Profile details {profile.cvUrl && ( - + )} diff --git a/packages/shared/src/components/recruiter/MatchReviewHeader.tsx b/packages/shared/src/components/recruiter/MatchReviewHeader.tsx index 4ecd19a645a..5fd10278ee4 100644 --- a/packages/shared/src/components/recruiter/MatchReviewHeader.tsx +++ b/packages/shared/src/components/recruiter/MatchReviewHeader.tsx @@ -6,11 +6,11 @@ import { TypographyType, } from '../typography/Typography'; import { - Button, + ButtonV2, ButtonColor, ButtonSize, ButtonVariant, -} from '../buttons/Button'; +} from '../buttons/ButtonV2'; import { FlexCol, FlexRow } from '../utilities'; import { ArrowIcon, MiniCloseIcon } from '../icons'; @@ -44,7 +44,7 @@ export const MatchReviewHeader = ({ {onReject && onApprove && ( - + )} {onApprove && ( - + )} diff --git a/packages/shared/src/components/recruiter/TipCard.tsx b/packages/shared/src/components/recruiter/TipCard.tsx index f8a8945de54..c95a526d964 100644 --- a/packages/shared/src/components/recruiter/TipCard.tsx +++ b/packages/shared/src/components/recruiter/TipCard.tsx @@ -9,7 +9,7 @@ import { import classed from '../../lib/classed'; import { ClickableText } from '../buttons/ClickableText'; import { PlayPauseIcon } from '../icons/PlayPause'; -import { Button, ButtonSize } from '../buttons/Button'; +import { ButtonV2, ButtonSize } from '../buttons/ButtonV2'; const Card = classed( 'div', @@ -121,7 +121,7 @@ export const TipCard = ({ className="h-full w-full rounded-8 object-cover" />
-
diff --git a/packages/shared/src/components/recruiter/UserEngagementSections.tsx b/packages/shared/src/components/recruiter/UserEngagementSections.tsx index 76c1f0f104c..29dfcd918c8 100644 --- a/packages/shared/src/components/recruiter/UserEngagementSections.tsx +++ b/packages/shared/src/components/recruiter/UserEngagementSections.tsx @@ -46,7 +46,7 @@ export const UserEngagementSections = ({ {recentlyRead.map((badge) => ( - + {formatKeyword(badge.keyword.value)} · diff --git a/packages/shared/src/components/recruiter/layout/Sidebar.tsx b/packages/shared/src/components/recruiter/layout/Sidebar.tsx index a0d36e526aa..e9772a47b25 100644 --- a/packages/shared/src/components/recruiter/layout/Sidebar.tsx +++ b/packages/shared/src/components/recruiter/layout/Sidebar.tsx @@ -7,7 +7,7 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { ButtonV2, ButtonSize, ButtonVariant } from '../../buttons/ButtonV2'; import { CreditCardIcon, ExitIcon, PlusIcon, SettingsIcon } from '../../icons'; import HeaderLogo from '../../layout/HeaderLogo'; import { SidebarScrollWrapper } from '../../sidebar/common'; @@ -47,7 +47,7 @@ export const CompanyBadge = ({ name, image, editUrl }: CompanyBadgeProps) => (
{editUrl && ( - + ); })} @@ -277,7 +277,7 @@ export const Sidebar = (): ReactElement => { >