packages/components/containers/gmailSyncModal/GmailSyncModalAnimation.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import Icon from '@proton/components/components/icon/Icon';
   5 import Logo from '@proton/components/components/logo/Logo';
   6 import { isMobile } from '@proton/shared/lib/helpers/browser';
   7 import envelope from '@proton/styles/assets/img/illustrations/envelope.svg';
   8 import gmailLogo from '@proton/styles/assets/img/illustrations/gmail-logo.svg';
   9 import key from '@proton/styles/assets/img/illustrations/key.svg';
  10 import stopSign from '@proton/styles/assets/img/illustrations/stop-hand-sign.svg';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import './GmailSyncModalAnimation.scss';
  14
  15 interface Props {
  16     reduceHeight?: boolean;
  17 }
  18
  19 const GmailSyncModalAnimation = ({ reduceHeight = false }: Props) => {
  20     const [user] = useUser();
  21     const { DisplayName, Name } = user;
  22     const nameToDisplay = <strong key="dummyKey">{DisplayName || Name}</strong>;
  23
  24     const mobile = isMobile();
  25
  26     return (
  27         <div className={clsx('gsma', reduceHeight && 'gsma--reduced-height')} aria-hidden="true">
  28             <div className="gsma-gmail-username-inbox">
  29                 <div className="gsma-gmail-logo">
  30                     <img src={gmailLogo} alt="" width={mobile ? 29 : 40} height={mobile ? 21 : 30} />
  31                 </div>
  32                 <div className="gsma-username">
  33                     {/* translator: keep this translation as small as possible since the space is reduced.  */}
  34                     <span className="gsma-username-content">{c('Animation').jt`${nameToDisplay}'s inbox`}</span>
  35                 </div>
  36             </div>
  37             <div className="gsma-auto-forward">
  38                 <div className="gsma-forwarded">
  39                     {c('Animation').t`Auto forwarded`}
  40                     <Icon className="ml-4 shrink-0" name="arrow-up-and-right-big" />
  41                 </div>
  42                 <div className="gsma-envelope">
  43                     <img src={envelope} alt="" width={mobile ? 55 : 45} height={mobile ? 29 : 35} />
  44                 </div>
  45                 <div className="gsma-new-email">{c('Animation').t`New email`}</div>
  46             </div>
  47             <div className="gsma-proton">
  48                 <Logo appName="proton-mail" variant="glyph-only" size={mobile ? 8 : 12} className="gsma-proton-logo" />
  49             </div>
  50             <div className="gsma-received">
  51                 <div className="gsma-received-inner ui-prominent">
  52                     <div className="gsma-received-inner-content">{c('Animation').t`Email received`}</div>
  53                 </div>
  54             </div>
  55             <div className="gsma-trackers">
  56                 <div className="gsma-trackers-inner ui-prominent">
  57                     <div className="gsma-trackers-inner-content">
  58                         <img src={stopSign} alt="" width={35} height={35} />
  59                         {c('Animation').t`5 trackers removed`}
  60                     </div>
  61                 </div>
  62             </div>
  63             <div className="gsma-encrypted">
  64                 <div className="gsma-encrypted-inner ui-prominent">
  65                     <div className="gsma-encrypted-inner-content">
  66                         <img src={key} alt="" width={35} height={35} />
  67                         {c('Animation').t`Encrypted`}
  68                     </div>
  69                 </div>
  70             </div>
  71         </div>
  72     );
  73 };
  74
  75 export default GmailSyncModalAnimation;