packages/pass/components/Upsell/PassPlusPromotionButton.tsx

   1 import type { FC } from 'react';
   2
   3 import { Icon } from '@proton/components';
   4 import { PromotionButton } from '@proton/components/components/button/PromotionButton';
   5 import type { PromotionButtonProps } from '@proton/components/components/button/PromotionButton/PromotionButton';
   6 import clsx from '@proton/utils/clsx';
   7
   8 import './PassPlusPromotionButton.scss';
   9
  10 type Props = Omit<PromotionButtonProps<'span'>, 'size'>;
  11
  12 export const PassPlusPromotionButton: FC<Props> = ({ className, ...props }) => (
  13     <PromotionButton
  14         iconName="brand-proton-pass-filled"
  15         iconGradient={false}
  16         size="small"
  17         shape="outline"
  18         as="span"
  19         {...props}
  20         className={clsx('pass-promo--button', className, 'flex items-center')}
  21         iconSize={3.5}
  22         style={{
  23             ...props.style,
  24             '--upgrade-color-stop-1': '#fcd38d',
  25             '--upgrade-color-stop-2': '#9834ff',
  26         }}
  27     >
  28         <Icon name="plus" size={2.5} className="mb-0.5" />
  29     </PromotionButton>
  30 );