packages/components/containers/themes/ThemesModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Info from '@proton/components/components/link/Info';
   5 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   6 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   7 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   8 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
   9 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  10 import Toggle from '@proton/components/components/toggle/Toggle';
  11 import { BRAND_NAME } from '@proton/shared/lib/constants';
  12 import { ColorScheme, ThemeModeSetting, getThemes } from '@proton/shared/lib/themes/themes';
  13
  14 import ThemeCards from './ThemeCards';
  15 import { useTheme } from './ThemeProvider';
  16 import ThemeSyncModeCard from './ThemeSyncModeCard';
  17
  18 const ThemesModal = (props: ModalProps) => {
  19     const { information, settings, setTheme, setAutoTheme } = useTheme();
  20
  21     const themes = getThemes();
  22
  23     return (
  24         <ModalTwo size="large" {...props}>
  25             <ModalTwoHeader title={c('Title').t`Select a theme`} />
  26             <ModalTwoContent>
  27                 <p className="mb-4">{c('Info').t`Customize the look and feel of ${BRAND_NAME} applications.`}</p>
  28                 <div className="inline-flex mb-4">
  29                     <label htmlFor="themeSyncToggle" className="text-semibold">
  30                         <span className="mr-2">{c('Label').t`Sync with system`}</span>
  31                         <Info
  32                             title={c('Tooltip')
  33                                 .t`Automatically switch between your preferred themes for day and night in sync with your system’s day and night modes`}
  34                         />
  35                     </label>
  36                     <Toggle
  37                         id="themeSyncToggle"
  38                         className="ml-6"
  39                         checked={settings.Mode === ThemeModeSetting.Auto}
  40                         onChange={(e) => setAutoTheme(e.target.checked)}
  41                     />
  42                 </div>
  43                 {settings.Mode === ThemeModeSetting.Auto ? (
  44                     <div className="flex flex-nowrap gap-4 flex-column md:flex-row">
  45                         <ThemeSyncModeCard
  46                             className="md:flex-1"
  47                             mode="light"
  48                             size="small"
  49                             list={themes}
  50                             themeIdentifier={settings.LightTheme}
  51                             onChange={(themeType) => {
  52                                 setTheme(themeType, ThemeModeSetting.Light);
  53                             }}
  54                             active={information.colorScheme === ColorScheme.Light}
  55                         />
  56                         <ThemeSyncModeCard
  57                             className="md:flex-1"
  58                             mode="dark"
  59                             size="small"
  60                             list={themes}
  61                             themeIdentifier={settings.DarkTheme}
  62                             onChange={(themeType) => {
  63                                 setTheme(themeType, ThemeModeSetting.Dark);
  64                             }}
  65                             active={information.colorScheme === ColorScheme.Dark}
  66                         />
  67                     </div>
  68                 ) : (
  69                     <ThemeCards
  70                         list={themes}
  71                         themeIdentifier={information.theme}
  72                         onChange={(themeType) => {
  73                             setTheme(themeType);
  74                         }}
  75                     />
  76                 )}
  77             </ModalTwoContent>
  78             <ModalTwoFooter>
  79                 <Button color="norm" className="ml-auto" onClick={props.onClose}>{c('Action').t`OK`}</Button>
  80             </ModalTwoFooter>
  81         </ModalTwo>
  82     );
  83 };
  84
  85 export default ThemesModal;