Fix: style regression on some text elements (opencollective#10600)

components/AccountHoverCard.tsx

@@ -188,7 +188,6 @@ const getInfoItems = (account): InfoItemProps[] => {
                 <FormattedMoneyAmount
                   amount={get(account, 'stats.balanceWithBlockedFunds.valueInCents', 0)}
                   currency={account.stats.balanceWithBlockedFunds.currency}
-                  amountStyles={{ letterSpacing: 0 }}
                 />
               </span>
             ),
@@ -209,7 +208,6 @@ const getInfoItems = (account): InfoItemProps[] => {
                   amount={account?.stats.totalPaidExpenses.valueInCents}
                   currency={account?.stats.totalPaidExpenses.currency}
                   precision={2}
-                  amountStyles={{ letterSpacing: 0 }}
                 />
               </span>
             ),

components/AmountWithExchangeRateInfo.js

@@ -83,7 +83,7 @@ const ContentContainer = styled.div`
 
 const AmountWithExchangeRateInfo = ({
   amount: { exchangeRate, currency, value, valueInCents },
-  amountStyles,
+  amountClassName,
   showCurrencyCode,
   invertIconPosition,
   warning,
@@ -104,7 +104,7 @@ const AmountWithExchangeRateInfo = ({
             amount={valueInCents ?? Math.round(value * 100)}
             currency={currency}
             precision={2}
-            amountStyles={amountStyles || null}
+            amountClassName={amountClassName || null}
             showCurrencyCode={showCurrencyCode}
           />
         </ContentContainer>
@@ -118,7 +118,7 @@ AmountWithExchangeRateInfo.propTypes = {
   amount: AmountPropTypeShape,
   showCurrencyCode: PropTypes.bool,
   invertIconPosition: PropTypes.bool,
-  amountStyles: PropTypes.object,
+  amountClassName: PropTypes.object,
   warning: PropTypes.node,
   error: PropTypes.node,
 };

components/Currency.tsx

@@ -4,11 +4,9 @@ import { useIntl } from 'react-intl';
 import { ZERO_DECIMAL_CURRENCIES } from '../lib/constants/currency';
 import { formatCurrency, getCurrencySymbol } from '../lib/currency-utils';
 import type { Currency as CurrencyEnum } from '../lib/graphql/types/v2/graphql';
+import { cn } from '../lib/utils';
 
-import type { TextProps } from './Text';
-import { Span } from './Text';
-
-type CurrencyProps = TextProps & {
+type CurrencyProps = {
   /** The amount to display, in cents */
   value: number;
   /** The currency (eg. `USD`, `EUR`...etc) */
@@ -17,14 +15,15 @@ type CurrencyProps = TextProps & {
   formatWithSeparators?: boolean;
   /** How many numbers should we display after the comma. When `auto` is given, decimals are only displayed if necessary. */
   precision?: number | 'auto';
+  className?: string;
 };
 
 /**
  * Shows a money amount with the currency.
  *
  * ⚠️ Abbreviated mode is only for English at the moment. Abbreviated amount will not be internationalized.
  */
-const Currency = ({ value, currency, formatWithSeparators = false, precision = 0, ...props }: CurrencyProps) => {
+const Currency = ({ value, currency, formatWithSeparators = false, precision = 0, className }: CurrencyProps) => {
   const { locale } = useIntl();
   if (precision === 'auto') {
     precision = value % 100 === 0 ? 0 : 2;
@@ -39,16 +38,16 @@ const Currency = ({ value, currency, formatWithSeparators = false, precision = 0
     // TODO: This approach is not great because the position of the currency depends on the locale
     const floatAmount = value / 100;
     return (
-      <Span whiteSpace="nowrap" {...props} as={undefined}>
+      <span className={cn('whitespace-nowrap', className)}>
         {getCurrencySymbol(currency)}
         {floatAmount.toLocaleString(locale)}
-      </Span>
+      </span>
     );
   } else {
     return (
-      <Span whiteSpace="nowrap" {...props} as={undefined}>
+      <span className={cn('whitespace-nowrap', className)}>
         {formatCurrency(value, currency, { precision, locale })}
-      </Span>
+      </span>
     );
   }
 };

components/FormattedMoneyAmount.tsx

@@ -6,19 +6,9 @@ import { CurrencyPrecision } from '../lib/constants/currency-precision';
 import INTERVALS from '../lib/constants/intervals';
 import { getIntervalFromContributionFrequency } from '../lib/date-utils';
 import type { Currency as GraphQLCurrency, TierFrequency } from '../lib/graphql/types/v2/graphql';
+import { cn } from '../lib/utils';
 
 import Currency from './Currency';
-import type { TextProps } from './Text';
-import { Span } from './Text';
-
-/** Default styles for the amount (not including currency) */
-export const DEFAULT_AMOUNT_STYLES: Omit<TextProps, 'color'> & {
-  color?: string;
-} = {
-  letterSpacing: 0,
-  fontWeight: 'bold',
-  color: 'black.900',
-};
 
 const EMPTY_AMOUNT_PLACEHOLDER = '--.--';
 
@@ -37,12 +27,14 @@ interface FormattedMoneyAmountProps {
   interval?: (typeof INTERVALS)[keyof typeof INTERVALS];
   /** ContributionFrequency from GQLV2 */
   frequency?: TierFrequency;
-  /** Style for the amount (eg. `$10`). Doesn't apply on interval */
-  amountStyles?: object;
-  currencyCodeStyles?: object;
   formatWithSeparators?: boolean;
+  /** Classnames for the amount (eg. `$10`). Doesn't apply on interval */
+  amountClassName?: string;
+  /** Classnames for the currency code (eg. `USD`). Doesn't apply on interval */
+  currencyCodeClassName?: string;
 }
 
+const DEFAULT_AMOUNT_CLASSES = '';
 /**
  * A practical component to format amounts and their intervals with proper
  * internationalization support.
@@ -55,32 +47,32 @@ const FormattedMoneyAmount = ({
   amount,
   interval,
   frequency,
-  amountStyles = DEFAULT_AMOUNT_STYLES,
+  amountClassName,
   showCurrencyCode = true,
-  currencyCodeStyles,
+  currencyCodeClassName,
 }: FormattedMoneyAmountProps) => {
   if (!currency) {
-    return <Span {...amountStyles}>{EMPTY_AMOUNT_PLACEHOLDER}</Span>;
+    return <span className={cn(DEFAULT_AMOUNT_CLASSES, amountClassName)}>{EMPTY_AMOUNT_PLACEHOLDER}</span>;
   }
 
   const formattedAmount =
     isNaN(amount) || isNil(amount) ? (
-      <Span {...amountStyles}>{EMPTY_AMOUNT_PLACEHOLDER}</Span>
+      <span className={cn(DEFAULT_AMOUNT_CLASSES, amountClassName)}>{EMPTY_AMOUNT_PLACEHOLDER}</span>
     ) : (
       <Currency
         value={amount}
         currency={currency as GraphQLCurrency}
         precision={precision}
         formatWithSeparators={formatWithSeparators}
-        {...amountStyles}
+        className={cn(DEFAULT_AMOUNT_CLASSES, amountClassName)}
       />
     );
 
   if (frequency) {
     interval = getIntervalFromContributionFrequency(frequency);
   }
 
-  const currencyCode = showCurrencyCode ? <Span {...currencyCodeStyles}>{currency}</Span> : '';
+  const currencyCode = showCurrencyCode ? <span className={currencyCodeClassName}>{currency}</span> : '';
   if (!interval || interval === INTERVALS.flexible || interval === INTERVALS.oneTime) {
     return showCurrencyCode ? (
       <FormattedMessage

components/StyledUpdate.tsx

@@ -26,7 +26,6 @@ import LoadingPlaceholder from './LoadingPlaceholder';
 import MessageBox from './MessageBox';
 import StyledButton from './StyledButton';
 import StyledHr from './StyledHr';
-import { H5 } from './Text';
 
 const UpdateWrapper = styled(Flex)`
   max-width: 100%;
@@ -189,14 +188,16 @@ class StyledUpdate extends Component<StyledUpdateProps, { mode: string; modified
     if (mode === 'summary') {
       return (
         <Link href={`${getCollectivePageRoute(collective)}/updates/${update.slug}`}>
-          <H5 data-cy="updateTitle">{update.title}</H5>
+          <h5 className="text-lg font-medium" data-cy="updateTitle">
+            {update.title}
+          </h5>
         </Link>
       );
     } else {
       return (
-        <H5 data-cy="updateTitle" mb={2}>
+        <h5 className="mb-2 text-lg font-medium" data-cy="updateTitle">
           {update.title}
-        </H5>
+        </h5>
       );
     }
   }

components/Text.ts

@@ -13,7 +13,7 @@ import type {
 } from '../lib/styled-system-custom-properties';
 import { cursor, overflowWrap, textTransform, whiteSpace, wordBreak } from '../lib/styled-system-custom-properties';
 
-export type TextProps = ColorProps &
+type TextProps = ColorProps &
   DisplayProps &
   SpaceProps &
   TypographyProps &

components/__tests__/__snapshots__/Currency.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Currency currency format with separators 1`] = `
 <span
-  className="Text__P-sc-6ff087f9-0 Text__Span-sc-6ff087f9-1 rlLpk"
+  className="whitespace-nowrap"
 >
   $
   42
@@ -11,7 +11,7 @@ exports[`Currency currency format with separators 1`] = `
 
 exports[`Currency currency format with separators 2`] = `
 <span
-  className="Text__P-sc-6ff087f9-0 Text__Span-sc-6ff087f9-1 rlLpk"
+  className="whitespace-nowrap"
 >
   $
   19 000
@@ -20,7 +20,7 @@ exports[`Currency currency format with separators 2`] = `
 
 exports[`Currency currency format with separators 3`] = `
 <span
-  className="Text__P-sc-6ff087f9-0 Text__Span-sc-6ff087f9-1 rlLpk"
+  className="whitespace-nowrap"
 >
   $
   19,000
@@ -29,15 +29,15 @@ exports[`Currency currency format with separators 3`] = `
 
 exports[`Currency renders default options 1`] = `
 <span
-  className="Text__P-sc-6ff087f9-0 Text__Span-sc-6ff087f9-1 rlLpk"
+  className="whitespace-nowrap"
 >
   $42
 </span>
 `;
 
 exports[`Currency renders default options 2`] = `
 <span
-  className="Text__P-sc-6ff087f9-0 Text__Span-sc-6ff087f9-1 rlLpk"
+  className="whitespace-nowrap"
 >
   19 000 $
 </span>

components/budget/ExpenseBudgetItem.js

@@ -21,7 +21,6 @@ import AmountWithExchangeRateInfo from '../AmountWithExchangeRateInfo';
 import AutosizeText from '../AutosizeText';
 import Avatar from '../Avatar';
 import { AvatarWithLink } from '../AvatarWithLink';
-import Container from '../Container';
 import DateTime from '../DateTime';
 import AdminExpenseStatusTag from '../expenses/AdminExpenseStatusTag';
 import { ExpenseAccountingCategoryPill } from '../expenses/ExpenseAccountingCategoryPill';
@@ -42,7 +41,7 @@ import LoadingPlaceholder from '../LoadingPlaceholder';
 import StyledButton from '../StyledButton';
 import StyledLink from '../StyledLink';
 import Tags from '../Tags';
-import { H3, Span } from '../Text';
+import { H3 } from '../Text';
 import TransactionSign from '../TransactionSign';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/Tooltip';
 
@@ -203,18 +202,20 @@ const ExpenseBudgetItem = ({
                         mobileRatio={0.875}
                         valueFormatter={toPx}
                       >
-                        {({ value, fontSize }) => (
-                          <H3
-                            fontWeight="500"
-                            lineHeight="1.5em"
-                            textDecoration="none"
-                            color="black.900"
-                            fontSize={fontSize}
-                            data-cy="expense-title"
-                          >
-                            {value}
-                          </H3>
-                        )}
+                        {({ value, fontSize }) => {
+                          return (
+                            <H3
+                              fontWeight="500"
+                              lineHeight="1.5em"
+                              textDecoration="none"
+                              color="black.900"
+                              fontSize={fontSize}
+                              data-cy="expense-title"
+                            >
+                              {value} wh
+                            </H3>
+                          );
+                        }}
                       </AutosizeText>
                     </StyledLink>
                   </span>
@@ -304,7 +305,6 @@ const ExpenseBudgetItem = ({
                               get(expense.account, 'stats.balanceWithBlockedFunds', 0),
                             )}
                             currency={expense.account.currency}
-                            amountStyles={{ color: 'black.700' }}
                           />
                         ),
                       }}
@@ -338,14 +338,17 @@ const ExpenseBudgetItem = ({
               <React.Fragment>
                 <div>
                   {showAmountSign && <TransactionSign isCredit={isInverted} />}
-                  <Span color="black.700" fontSize="16px">
-                    <FormattedMoneyAmount amount={expense.amount} currency={expense.currency} precision={2} />
-                  </Span>
+                  <FormattedMoneyAmount
+                    amountClassName="font-bold"
+                    amount={expense.amount}
+                    currency={expense.currency}
+                    precision={2}
+                  />
                 </div>
                 {isMultiCurrency && (
-                  <Container color="black.600" fontSize="13px" my={1}>
+                  <div className="my-1 text-sm text-muted-foreground">
                     <AmountWithExchangeRateInfo amount={expense.amountInAccountCurrency} />
-                  </Container>
+                  </div>
                 )}
               </React.Fragment>
             )}

components/budget/OrderBudgetItem.js

@@ -159,7 +159,6 @@ const OrderBudgetItem = ({ isLoading, order, showPlatformTip, showAmountSign = t
                             amount={order.platformTipAmount.valueInCents}
                             currency={order.platformTipAmount.currency}
                             precision={2}
-                            amountStyles={null}
                           />
                         ),
                       }}

components/collective-page/BudgetStats.js

@@ -34,7 +34,7 @@ const StatTitle = styled(Container).attrs(props => ({
 const StatAmount = ({ amount, ...props }) => (
   <P fontSize="16px" lineHeight="24px" color="black.700">
     {/* Pass null instead of 0 to make sure we display `--.--` */}
-    <FormattedMoneyAmount amount={amount || null} {...props} />
+    <FormattedMoneyAmount amountClassName="font-bold" amount={amount || null} {...props} />
   </P>
 );
 

components/collective-page/TopContributors.js

@@ -126,7 +126,6 @@ const ContributorsBlock = ({ title, contributors, totalNbContributors, currency,
                       date: <FormattedDate value={contributor.since} month="short" year="numeric" />,
                       totalDonated: (
                         <FormattedMoneyAmount
-                          amountStyles={null}
                           amount={contributor.totalAmountDonated}
                           currency={currency}
                           precision={0}

components/collective-page/hero/HeroTotalCollectiveContributionsWithData.js

@@ -27,8 +27,6 @@ export const getTotalCollectiveContributionsQueryVariables = slug => {
   return { slug };
 };
 
-const amountStyles = { fontSize: '20px', fontWeight: 'bold' };
-
 /**
  * This component fetches its own data because we don't want to query these fields
  * for regular collective.
@@ -48,7 +46,7 @@ const HeroTotalCollectiveContributionsWithData = ({ collective }) => {
       <P fontSize="10px" textTransform="uppercase">
         <FormattedMessage id="membership.totalDonations" defaultMessage="Total amount contributed" />
       </P>
-      <FormattedMoneyAmount amount={stats.totalAmountSpent} currency={currency} amountStyles={amountStyles} />
+      <FormattedMoneyAmount amount={stats.totalAmountSpent} currency={currency} amountClassName="font-bold text-xl" />
     </Box>
   );
 };