packages/components/containers/layouts/DensityInjector.tsx

   1 import { useLayoutEffect } from 'react';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import { DENSITY } from '@proton/shared/lib/constants';
   5
   6 const { COMPACT, COMFORTABLE } = DENSITY;
   7
   8 const CLASSES = {
   9     [COMPACT]: 'is-compact',
  10     [COMFORTABLE]: 'is-comfortable',
  11 } as const;
  12
  13 const DensityInjector = () => {
  14     const [{ Density } = { Density: COMFORTABLE }] = useUserSettings();
  15
  16     useLayoutEffect(() => {
  17         document.body.classList.add(CLASSES[Density]);
  18         return () => {
  19             document.body.classList.remove(CLASSES[Density]);
  20         };
  21     }, [Density]);
  22
  23     return null;
  24 };
  25
  26 export default DensityInjector;