packages/components/containers/gmailSyncModal/SignInWithGoogle.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import useActiveBreakpoint from '@proton/components/hooks/useActiveBreakpoint';
   5 import googleLogo from '@proton/styles/assets/img/import/providers/google.svg';
   6
   7 import './SignInWithGoogle.scss';
   8
   9 interface Props {
  10     fullWidth?: boolean;
  11     loading: boolean;
  12     disabled?: boolean;
  13     onClick: () => void;
  14     reduceHeight?: boolean;
  15 }
  16
  17 const SignInWithGoogle = ({ loading, disabled, onClick, fullWidth, reduceHeight }: Props) => {
  18     const { viewportWidth } = useActiveBreakpoint();
  19     const buttonHeight = !viewportWidth['<=small'] && reduceHeight ? '2.5rem' : '3rem';
  20     const googleLogoSize = !viewportWidth['<=small'] && reduceHeight ? '2rem' : '2.5rem';
  21     const googleImageSize = !viewportWidth['<=small'] && reduceHeight ? 18 : 20;
  22
  23     return (
  24         <Button
  25             color="norm"
  26             onClick={onClick}
  27             loading={loading}
  28             fullWidth={fullWidth}
  29             disabled={loading || disabled}
  30             className="flex items-center p-1 rounded google-button"
  31             style={{ '--h-custom': buttonHeight }}
  32         >
  33             <span
  34                 className="bg-norm rounded-sm flex justify-center items-center w-custom min-h-custom"
  35                 style={{ '--w-custom': googleLogoSize, '--min-h-custom': googleLogoSize }}
  36             >
  37                 <img src={googleLogo} alt="" width={googleImageSize} height={googleImageSize} aria-hidden="true" />
  38             </span>
  39             <span className="text-semibold flex-1 text-left pl-4 pr-8">{c('Gmail forwarding')
  40                 .t`Sign in with Google`}</span>
  41         </Button>
  42     );
  43 };
  44
  45 export default SignInWithGoogle;