Bugbash fixes/updates (#1839)

Author: rustam-cb

playground/nextjs-app-router/components/demo/FundCard.tsx

@@ -5,7 +5,7 @@ export default function FundCardDemo() {
   const presetAmountInputs: PresetAmountInputs = ['10', '20', '100'];
 
   return (
-    <div className="mx-auto grid w-[500px] gap-8">
+    <div className="mx-auto min-w-[394px] max-w-[800px] gap-8">
       <FundCard
         assetSymbol="ETH"
         country="US"

src/fund/components/FundCardAmountInputTypeSwitch.test.tsx

@@ -69,9 +69,6 @@ describe('FundCardAmountInputTypeSwitch', () => {
         'not-loading',
       );
       expect(screen.getByTestId('ockAmountLine')).toHaveTextContent('0 ETH');
-      expect(screen.getByTestId('ockExchangeRateLine')).toHaveTextContent(
-        '($1 = 0.00083333 ETH)',
-      );
     });
   });
 
@@ -88,9 +85,6 @@ describe('FundCardAmountInputTypeSwitch', () => {
         'not-loading',
       );
       expect(screen.getByTestId('ockAmountLine')).toHaveTextContent('$0');
-      expect(screen.getByTestId('ockExchangeRateLine')).toHaveTextContent(
-        '($1 = 0.00083333 ETH)',
-      );
     });
   });
 

src/fund/components/FundCardAmountInputTypeSwitch.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useIcon } from '../../core-react/internal/hooks/useIcon';
 import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
 import { Skeleton } from '../../internal/components/Skeleton';
-import { cn, color, pressable, text } from '../../styles/theme';
+import { cn, pressable, text } from '../../styles/theme';
 import type { FundCardAmountInputTypeSwitchPropsReact } from '../types';
 import { truncateDecimalPlaces } from '../utils/truncateDecimalPlaces';
 import { useFundContext } from './FundCardProvider';
@@ -38,22 +38,6 @@ export const FundCardAmountInputTypeSwitch = ({
     [asset],
   );
 
-  const exchangeRateLine = useMemo(() => {
-    return (
-      <span
-        data-testid="ockExchangeRateLine"
-        className={cn(
-          text.label2,
-          color.foregroundMuted,
-          'font-normal',
-          'pl-1',
-        )}
-      >
-        ({formatUSD('1')} = {exchangeRate?.toFixed(8)} {asset})
-      </span>
-    );
-  }, [formatUSD, exchangeRate, asset]);
-
   const amountLine = useMemo(() => {
     return (
       <span data-testid="ockAmountLine" className={cn(text.label1)}>
@@ -88,10 +72,7 @@ export const FundCardAmountInputTypeSwitch = ({
       >
         <div className="h-[1.125rem] w-[1.125rem]">{iconSvg}</div>
       </button>
-      <div className="w-full truncate">
-        {amountLine}
-        {exchangeRateLine}
-      </div>
+      <div className="w-full truncate">{amountLine}</div>
     </div>
   );
 };

src/fund/components/FundCardCurrencyLabel.tsx

@@ -11,7 +11,7 @@ export const FundCardCurrencyLabel = forwardRef<
       ref={ref}
       className={cn(
         text.body,
-        color.foregroundMuted,
+        color.disabled,
         'flex items-center justify-center bg-transparent',
         'text-6xl leading-none outline-none',
       )}

src/fund/components/FundCardPaymentMethodDropdown.tsx

@@ -111,10 +111,11 @@ export function FundCardPaymentMethodDropdown({
           data-testid="ockFundCardPaymentMethodDropdown"
           className={cn(
             border.radius,
-            'ock-scrollbar absolute z-10 flex w-full flex-col overflow-y-hidden',
+            border.lineDefault,
+            'ock-scrollbar absolute z-10 mt-2 flex w-full flex-col overflow-y-hidden',
           )}
         >
-          <div className={cn(background.inverse, 'overflow-y-auto p-2')}>
+          <div className={cn(background.default, 'overflow-y-auto p-2')}>
             {filteredPaymentMethods.map((paymentMethod) => {
               const isDisabled = isPaymentMethodDisabled(paymentMethod);
               return (

src/fund/components/FundCardPaymentMethodSelectRow.test.tsx

@@ -27,7 +27,7 @@ describe('FundCardPaymentMethodSelectRow', () => {
     const button = screen.getByTestId('ockFundCardPaymentMethodSelectRow');
 
     expect(button).toBeDisabled();
-    expect(button).toHaveClass('cursor-not-allowed', 'opacity-50');
+    expect(button).toHaveClass('opacity-[0.38] pointer-events-none');
     expect(button).toHaveAttribute('title', 'Minimum amount required');
     expect(screen.getByText('Minimum amount required')).toBeInTheDocument();
   });

src/fund/components/FundCardPaymentMethodSelectRow.tsx

@@ -32,9 +32,11 @@ export const FundCardPaymentMethodSelectRow = memo(
         className={cn(
           pressable.default,
           border.radius,
-          background.inverse,
+          background.default,
           'flex w-full items-center justify-between px-4 py-2',
-          disabled && 'cursor-not-allowed opacity-50',
+          {
+            [pressable.disabled]: disabled,
+          },
         )}
         onClick={handleOnClick}
         disabled={disabled}
@@ -44,13 +46,21 @@ export const FundCardPaymentMethodSelectRow = memo(
           {!hideImage && (
             <FundCardPaymentMethodImage
               paymentMethod={paymentMethod}
-              className={cn('h-4 w-4', disabled && 'opacity-50')}
+              className={cn('h-4 w-4', {
+                [pressable.disabled]: disabled,
+              })}
             />
           )}
           <span className="flex flex-col items-start">
             <span className={cn(text.headline)}>{paymentMethod.name}</span>
             {!hideDescription && (
-              <span className={cn(text.body, color.foregroundMuted)}>
+              <span
+                className={cn(
+                  text.label2,
+                  color.foregroundMuted,
+                  'font-normal',
+                )}
+              >
                 {disabledReason || paymentMethod.description}
               </span>
             )}

src/fund/components/FundCardPaymentMethodSelectorToggle.tsx

@@ -19,7 +19,6 @@ export const FundCardPaymentMethodSelectorToggle = forwardRef(
         type="button"
         className={cn(
           pressable.default,
-          pressable.shadow,
           border.radius,
           border.lineDefault,
           'flex h-12 w-full items-center gap-2 px-3 py-1',