diff --git a/packages/shared/src/components/profile/ProfileButton.spec.tsx b/packages/shared/src/components/profile/ProfileButton.spec.tsx index 35571e16823..2ae80077abe 100644 --- a/packages/shared/src/components/profile/ProfileButton.spec.tsx +++ b/packages/shared/src/components/profile/ProfileButton.spec.tsx @@ -49,9 +49,9 @@ const renderComponent = (user = defaultUser): RenderResult => { it('should show "Profile settings" tooltip on the profile picture', () => { renderComponent(); - const elementsWithLabel = screen.getAllByLabelText('Profile settings'); - // The button itself has aria-label, and the Radix Tooltip trigger also sets aria-label - expect(elementsWithLabel.length).toBeGreaterThanOrEqual(2); + expect( + screen.getByRole('button', { name: 'Profile settings' }), + ).toBeInTheDocument(); }); it('should show "Reputation" tooltip on the reputation badge', () => { diff --git a/packages/shared/src/components/profile/ProfileButton.tsx b/packages/shared/src/components/profile/ProfileButton.tsx index 08c4675e293..e21c5a2dbf8 100644 --- a/packages/shared/src/components/profile/ProfileButton.tsx +++ b/packages/shared/src/components/profile/ProfileButton.tsx @@ -4,11 +4,9 @@ import classNames from 'classnames'; import dynamic from 'next/dynamic'; import { useAuthContext } from '../../contexts/AuthContext'; import { ProfilePictureWithIndicator } from './ProfilePictureWithIndicator'; -import { CoreIcon, SettingsIcon } from '../icons'; +import { CoreIcon, ReputationIcon, SettingsIcon } from '../icons'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import { useInteractivePopup } from '../../hooks/utils/useInteractivePopup'; -import { ReputationUserBadge } from '../ReputationUserBadge'; -import { IconSize } from '../Icon'; import { ReadingStreakButton } from '../streak/ReadingStreakButton'; import { useReadingStreak } from '../../hooks/streaks'; import { walletUrl } from '../../lib/constants'; @@ -50,7 +48,7 @@ export default function ProfileButton({ Partial> >({}); const coresCounterRef = useRef(null); - const reputationCounterRef = useRef(null); + const reputationCounterRef = useRef(null); const displayedBalance = typeof animatedCores === 'number' ? animatedCores @@ -212,7 +210,6 @@ export default function ProfileButton({ streak={streak} isLoading={isLoading} compact - className="pl-4" /> )} {hasCoresAccess && ( @@ -236,6 +233,7 @@ export default function ProfileButton({ tag="a" variant={ButtonVariant.Tertiary} size={ButtonSize.Small} + className="!px-1.5" > {largeNumberFormat(displayedBalance)} @@ -243,34 +241,37 @@ export default function ProfileButton({ )} - + + + + + + )} {isOpen && onUpdate(false)} />} diff --git a/packages/shared/src/components/streak/ReadingStreakButton.tsx b/packages/shared/src/components/streak/ReadingStreakButton.tsx index a957620833b..903bb22e850 100644 --- a/packages/shared/src/components/streak/ReadingStreakButton.tsx +++ b/packages/shared/src/components/streak/ReadingStreakButton.tsx @@ -17,7 +17,7 @@ import ConditionalWrapper from '../ConditionalWrapper'; import type { TooltipPosition } from '../tooltips/BaseTooltipContainer'; import { useAuthContext } from '../../contexts/AuthContext'; import { isSameDayInTimezone } from '../../lib/timezones'; -import { IconWrapper } from '../Icon'; +import { IconSize, IconWrapper } from '../Icon'; import { useStreakTimezoneOk } from '../../hooks/streaks/useStreakTimezoneOk'; interface ReadingStreakButtonProps { @@ -122,7 +122,13 @@ export function ReadingStreakButton({ type="button" iconPosition={iconPosition} icon={ - + {!isTimezoneOk && ( @@ -130,14 +136,12 @@ export function ReadingStreakButton({ } variant={ - isLaptop || isMobile ? ButtonVariant.Tertiary : ButtonVariant.Float + compact || isLaptop || isMobile + ? ButtonVariant.Tertiary + : ButtonVariant.Float } onClick={handleToggle} - className={classnames( - 'gap-1', - compact && 'text-accent-bacon-default', - className, - )} + className={classnames('gap-1', compact && '!px-1.5', className)} size={!compact && !isMobile ? ButtonSize.Medium : ButtonSize.Small} > {streak?.current} diff --git a/scripts/typecheck-strict-changed.js b/scripts/typecheck-strict-changed.js index 94528cbc0ef..03fcf77082f 100644 --- a/scripts/typecheck-strict-changed.js +++ b/scripts/typecheck-strict-changed.js @@ -107,6 +107,12 @@ const strictSkipList = new Set([ // unrelated to the rightCopy wiring. 'packages/shared/src/contexts/WritePostContext.tsx', 'packages/webapp/pages/squads/create.tsx', + // Header-stat-button alignment branch — touched only to drop the + // bacon-colored number and switch compact to Tertiary. Pre-existing + // strict errors (optional auth user, ConditionalWrapper wrapper type, + // ReactElement vs null return, Button props union) live on unrelated + // lines and should be addressed in a dedicated cleanup PR. + 'packages/shared/src/components/streak/ReadingStreakButton.tsx', ]); const changedFiles = getChangedTypescriptFiles().filter(