packages/components/containers/onboarding/OnboardingThemes.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { isMobile } from '@proton/shared/lib/helpers/browser';
   5 import type { ThemeTypes } from '@proton/shared/lib/themes/themes';
   6
   7 import ThemeCards from '../themes/ThemeCards';
   8 import { useTheme } from '../themes/ThemeProvider';
   9 import OnboardingContent from './OnboardingContent';
  10 import OnboardingStep from './OnboardingStep';
  11 import { ONBOARDING_THEMES } from './constants';
  12 import type { OnboardingStepRenderCallback } from './interface';
  13
  14 interface Props extends OnboardingStepRenderCallback {}
  15
  16 const OnboardingThemes = ({ ...rest }: Props) => {
  17     const mobile = isMobile();
  18     const theme = useTheme();
  19
  20     const handleThemeChange = (newThemeType: ThemeTypes) => {
  21         theme.setTheme(newThemeType);
  22     };
  23
  24     return (
  25         <OnboardingStep>
  26             <OnboardingContent
  27                 title={c('Onboarding Proton').t`Pick a theme`}
  28                 description={c('Onboarding Proton').t`You will be able to change your theme any time in your settings.`}
  29                 {...rest}
  30             >
  31                 <ThemeCards
  32                     list={ONBOARDING_THEMES}
  33                     themeIdentifier={theme.information.theme}
  34                     onChange={handleThemeChange}
  35                     size={mobile ? 'medium-wide' : 'large'}
  36                 />
  37             </OnboardingContent>
  38             <footer className="flex flex-nowrap">
  39                 <Button size="large" fullWidth onClick={rest.onNext}>
  40                     {c('Action').t`Next`}
  41                 </Button>
  42             </footer>
  43         </OnboardingStep>
  44     );
  45 };
  46
  47 export default OnboardingThemes;