packages/pass/components/Onboarding/OnboardingThemeSelect.tsx

   1 import { type FC } from 'react';
   2 import { useDispatch, useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { Icon, Info, RadioGroup } from '@proton/components';
   7 import automaticThemeImg from '@proton/pass/assets/settings/theme-automatic.svg';
   8 import darkThemeImg from '@proton/pass/assets/settings/theme-dark.svg';
   9 import lightThemeImg from '@proton/pass/assets/settings/theme-light.svg';
  10 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
  11 import { PassThemeOption } from '@proton/pass/components/Layout/Theme/types';
  12 import type { PassThemeCardProps } from '@proton/pass/components/Settings/PassThemeCard';
  13 import { settingsEditIntent } from '@proton/pass/store/actions';
  14 import { selectTheme } from '@proton/pass/store/selectors';
  15 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  16 import clsx from '@proton/utils/clsx';
  17
  18 const getThemeCards = (): PassThemeCardProps[] => [
  19     {
  20         theme: PassThemeOption.PassDark,
  21         label: c('Theme').t`Dark`,
  22         src: darkThemeImg,
  23     },
  24     {
  25         theme: PassThemeOption.PassLight,
  26         label: c('Theme').t`Light`,
  27         src: lightThemeImg,
  28     },
  29     {
  30         theme: PassThemeOption.OS,
  31         label: c('Theme').t`Automatic`,
  32         src: automaticThemeImg,
  33         info: (
  34             <Info
  35                 className="color-weak"
  36                 questionMark
  37                 title={c('Info').t`${PASS_APP_NAME} will follow your system theme.`}
  38             />
  39         ),
  40     },
  41 ];
  42
  43 export const OnboardingThemeSelect: FC = () => {
  44     const core = usePassCore();
  45     const dispatch = useDispatch();
  46     const currentTheme = useSelector(selectTheme) ?? core.theme;
  47     const onChange = (theme: PassThemeOption) => dispatch(settingsEditIntent('theme', { theme }, true));
  48
  49     return (
  50         <div className="pass-onboarding-modal--theme">
  51             <RadioGroup<PassThemeOption>
  52                 name="theme"
  53                 onChange={onChange}
  54                 value={currentTheme}
  55                 className="pass-onboarding-modal--radio w-full"
  56                 options={getThemeCards().map(({ label, theme, src, info }) => ({
  57                     value: theme,
  58                     label: (
  59                         <div className="pass-onboarding-modal--option rounded-xl flex items-center w-full py-3 px-4">
  60                             <img src={src} alt="" />
  61                             <div
  62                                 className={clsx(
  63                                     'flex-1 px-4 flex items-center flex-nowrap gap-1',
  64                                     theme === currentTheme && 'text-bold'
  65                                 )}
  66                             >
  67                                 {label}
  68                                 {info}
  69                             </div>
  70                             {theme === currentTheme && (
  71                                 <Icon name="checkmark-circle-filled" size={6} color="var(--interaction-norm)" />
  72                             )}
  73                         </div>
  74                     ),
  75                 }))}
  76             />
  77         </div>
  78     );
  79 };