feat: upgrade tailwind to version 3 (#2933)

* initial upgrade commit for tailwind * fix: inconsistensies in button * fix: various places with conflicts * final fixes * fix: dialog header color * apply review
2022-09-19 20:02:53 -04:00 · 2022-09-19 20:02:53 -04:00 · 55a1704e4a
commit 55a1704e4a
parent dc04296cfd
29 changed files with 337 additions and 270 deletions
--- a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.tsx
+++ b/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.tsx
@ -9,16 +9,22 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {

  return (
    <React.Fragment>
-      <ButtonGroup color="black" size="inherit">
-        <Button className="text-base px-2 py-2" onClick={onExportClick}>
-          {t('Export')}
-        </Button>
-      </ButtonGroup>
      <Button
-        className="ml-2 text-base"
+        className="text-base px-2 py-2"
+        size="initial"
        variant="outlined"
-        size="small"
+        color="default"
+        border="secondary"
+        onClick={onExportClick}
+      >
+        {t('Export')}
+      </Button>
+      <Button
+        className="ml-2 px-2 text-base"
+        variant="outlined"
+        size="initial"
        color="black"
+        border="secondary"
        onClick={onCreateReportClick}
      >
        {t('Create Report')}
--- a/extensions/tmtv/src/Panels/PanelPetSUV.tsx
+++ b/extensions/tmtv/src/Panels/PanelPetSUV.tsx
@ -148,13 +148,11 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
    <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
      {
        <div className="flex flex-col">
-          <div className="flex flex-col p-4 space-y-2 bg-primary-dark">
+          <div className="flex flex-col p-4 space-y-4 bg-primary-dark">
            <Input
              label={t('Patient Sex')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1"
              value={metadata.PatientSex || ''}
              onChange={e => {
                handleMetadataChange({
@ -164,10 +162,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
            />
            <Input
              label={t('Patient Weight (kg)')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1"
              value={metadata.PatientWeight || ''}
              onChange={e => {
                handleMetadataChange({
@ -177,10 +173,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
            />
            <Input
              label={t('Total Dose (bq)')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1"
              value={
                metadata.RadiopharmaceuticalInformationSequence
                  .RadionuclideTotalDose || ''
@ -195,10 +189,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
            />
            <Input
              label={t('Half Life (s)')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1"
              value={
                metadata.RadiopharmaceuticalInformationSequence
                  .RadionuclideHalfLife || ''
@ -213,10 +205,8 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
            />
            <Input
              label={t('Injection Time (s)')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1"
              value={
                metadata.RadiopharmaceuticalInformationSequence
                  .RadiopharmaceuticalStartTime || ''
@ -231,21 +221,15 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
            />
            <Input
              label={t('Acquisition Time (s)')}
-              labelClassName="text-white"
-              className="mt-1 mb-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
+              labelClassName="text-white mb-2"
+              className="mt-1 mb-2"
              value={metadata.SeriesTime || ''}
              onChange={() => {}}
            />
+            <Button color="primary" onClick={updateMetadata}>
+              Reload Data
+            </Button>
          </div>
-          <Button
-            color="primary"
-            onClick={updateMetadata}
-            className="px-1 py-1 mx-4 mt-2 text-xs text-white border-b border-transparent"
-          >
-            Reload Data
-          </Button>
        </div>
      }
    </div>
--- a/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx
+++ b/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx
@ -38,17 +38,21 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
          />
        </div>
        <div className="w-1/2">
-          <ButtonGroup color="black" size="inherit">
+          <ButtonGroup>
            <Button
-              className="px-2 py-2 text-base"
+              size="initial"
+              className="px-2 py-2 text-base text-white"
+              color="primaryLight"
+              variant="outlined"
              onClick={() => runCommand('setStartSliceForROIThresholdTool')}
            >
              {t('Start')}
            </Button>
-          </ButtonGroup>
-          <ButtonGroup color="black" size="inherit">
            <Button
-              className="px-2 py-2 text-base"
+              size="initial"
+              color="primaryLight"
+              variant="outlined"
+              className="px-2 py-2 text-base text-white"
              onClick={() => runCommand('setEndSliceForROIThresholdTool')}
            >
              {t('End')}
--- a/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx
+++ b/extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx
@ -29,7 +29,7 @@ function segmentationItemEditHandler({ id, servicesManager }) {
    showOverlay: true,
    content: Dialog,
    contentProps: {
-      title: 'Enter your annotation',
+      title: 'Enter your Segmentation',
      noCloseButton: true,
      value: { label: segmentation.label || '' },
      body: ({ value, setValue }) => {
--- a/platform/docs/tailwind.config.js
+++ b/platform/docs/tailwind.config.js
@ -1,16 +1,12 @@
 module.exports = {
  prefix: '',
-  important: false,
  separator: ':',
-  purge: {
-    enabled: true,
-    content: [
-      './docs/**/*.jsx',
-      './docs/**/*.mdx',
-      './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-    ],
-  },
+  content: [
+    './docs/**/*.jsx',
+    './docs/**/*.mdx',
+    './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+  ],
  theme: {
    screens: {
      sm: '640px',
--- a/platform/ui/package.json
+++ b/platform/ui/package.json
@ -62,6 +62,6 @@
    "postcss": "^8.3.5",
    "postcss-loader": "^6.1.1",
    "prop-types": "15.7.2",
-    "tailwindcss": "2.2.4"
+    "tailwindcss": "3.1.8"
  }
 }
--- a/platform/ui/src/components/AboutModal/AboutModal.tsx
+++ b/platform/ui/src/components/AboutModal/AboutModal.tsx
@ -9,7 +9,8 @@ const Link = ({ href, children, showIcon = false }) => {
      <Typography
        variant="subtitle"
        component="p"
-        className="flex items-center text-primary-active"
+        color="primaryActive"
+        className="flex items-center"
      >
        {children}
        {!!showIcon && (
--- a/platform/ui/src/components/Button/Button.tsx
+++ b/platform/ui/src/components/Button/Button.tsx
@ -10,6 +10,7 @@ const defaults = {
  disabled: false,
  fullWidth: false,
  rounded: 'medium',
+  border: 'none',
  size: 'medium',
  type: 'button',
  variant: 'contained',
@ -23,7 +24,7 @@ const roundedClasses = {
  full: 'rounded-full',
 };

-const variantClasses = {
+const variants = {
  text: {
    default:
      'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
@ -38,41 +39,92 @@ const variantClasses = {
  },
  outlined: {
    default:
-      'border bg-trasparent border-primary-light text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
+      'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
    primary:
-      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
    secondary:
-      'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
-      'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
+    white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
    black:
-      'border bg-black border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+      'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+    primaryActive:
+      'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
+    primaryLight:
+      'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
  },
  contained: {
-    default:
-      'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-    primary:
-      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
    secondary:
-      'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
-      'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
-    black:
-      'bg-black text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
    light:
-      'border bg-primary-light border-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
  },
  disabled: {
-    default: 'cursor-not-allowed opacity-50 bg-primary-light text-black',
-    primary: 'cursor-not-allowed opacity-50 bg-primary-main text-white',
-    secondary: 'cursor-not-allowed opacity-50 bg-secondary-light text-white',
-    white: 'cursor-not-allowed opacity-50 bg-white text-black',
-    black: 'cursor-not-allowed opacity-50 bg-black text-white',
-    light:
-      'cursor-not-allowed opacity-50 border bg-primary-light border-primary-light text-black',
+    default: 'cursor-not-allowed opacity-50 text-black',
+    primary: 'cursor-not-allowed opacity-50 text-white',
+    secondary: 'cursor-not-allowed opacity-50 text-white',
+    white: 'cursor-not-allowed opacity-50 text-black',
+    black: 'cursor-not-allowed opacity-50 text-white',
+    light: 'cursor-not-allowed opacity-50 border text-black',
  },
 };

+const defaultVariantBackGroundColor = {
+  text: {
+    default: '',
+    primary: '',
+    secondary: '',
+    white: '',
+    black: '',
+  },
+  outlined: {
+    default: 'bg-transparent',
+    primary: 'bg-transparent',
+    secondary: 'bg-transparent',
+    black: 'bg-black',
+    white: '',
+  },
+  contained: {
+    default: 'bg-primary-light',
+    primary: 'bg-primary-main',
+    secondary: 'bg-secondary-light',
+    white: 'bg-white',
+    black: 'bg-black',
+    light: 'bg-primary-light',
+  },
+  disabled: {
+    default: 'bg-primary-light',
+    primary: 'bg-primary-main',
+    secondary: 'bg-secondary-light',
+    white: 'bg-white',
+    black: 'bg-black',
+    light: 'bg-primary-light',
+  },
+};
+
+const _getVariantClass = (variant, color, bgColor = null) => {
+  const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
+
+  if (!bgColor) {
+    bgColor = defaultBackgroundColor;
+  }
+
+  return `${variants[variant][color]} ${bgColor}`;
+};
+
+const borderClasses = {
+  none: '',
+  light: 'border border-primary-light',
+  primary: 'border border-primary-main',
+  primaryActive: 'border border-primary-active',
+  secondary: 'border border-secondary-light',
+  white: 'border border-white',
+  black: 'border border-black',
+};
+
 const sizeClasses = {
  small: 'py-2 px-2 text-sm min-w-md',
  medium: 'py-2 px-2 text-lg min-w-md',
@ -89,11 +141,13 @@ const Button = ({
  children,
  variant = defaults.variant,
  color = defaults.color,
+  border = defaults.border,
  size = defaults.size,
  rounded = defaults.rounded,
  disabled = defaults.disabled,
  type = defaults.type,
  fullWidth = defaults.fullWidth,
+  bgColor = null,
  startIcon: startIconProp,
  endIcon: endIconProp,
  name,
@ -126,16 +180,19 @@ const Button = ({
    }
  };

+  const finalClassName = classnames(
+    baseClasses,
+    _getVariantClass(variant, color, bgColor),
+    borderClasses[border],
+    roundedClasses[rounded],
+    sizeClasses[size],
+    fullWidthClasses[fullWidth],
+    className
+  );
+
  return (
    <button
-      className={classnames(
-        className,
-        baseClasses,
-        variantClasses[variant][color],
-        roundedClasses[rounded],
-        sizeClasses[size],
-        fullWidthClasses[fullWidth]
-      )}
+      className={finalClassName}
      disabled={disabled}
      ref={buttonElement}
      onClick={handleOnClick}
@ -176,6 +233,14 @@ Button.propTypes = {
    'inherit',
    'light',
  ]),
+  border: PropTypes.oneOf([
+    'none',
+    'default',
+    'primary',
+    'secondary',
+    'white',
+    'black',
+  ]),
  /** Whether the button should have full width  */
  fullWidth: PropTypes.bool,
  /** Whether the button should be disabled  */
@ -189,6 +254,8 @@ Button.propTypes = {
  endIcon: PropTypes.node,
  /** Additional TailwindCSS classnames */
  className: PropTypes.string,
+  /** Background color for the button to override*/
+  bgColor: PropTypes.string,
 };

 export default Button;
--- a/platform/ui/src/components/Dialog/Dialog.tsx
+++ b/platform/ui/src/components/Dialog/Dialog.tsx
@ -24,7 +24,7 @@ const Dialog = ({

  const theme = 'bg-secondary-light';
  const flex = 'flex flex-col';
-  const border = 'border-0 rounded-lg shadow-lg';
+  const border = 'border-0 rounded-lg drop-shadow-lg';
  const outline = 'outline-none focus:outline-none';
  const position = 'relative';
  const width = 'w-full';
--- a/platform/ui/src/components/Dialog/Header.tsx
+++ b/platform/ui/src/components/Dialog/Header.tsx
@ -27,7 +27,7 @@ const Header = ({ title, noCloseButton, onClose }) => {

  return (
    <div className={classNames(theme, flex, border, spacing)}>
-      <Typography variant="h6" className="text-primary-active">
+      <Typography variant="h6" color="primaryActive">
        {title}
      </Typography>
      {!noCloseButton && <CloseButton onClick={onClose} />}
@ -43,7 +43,7 @@ Header.propTypes = {
 };

 Header.defaultProps = {
-  noCloseButton: false
+  noCloseButton: false,
 };

 export default Header;
--- a/platform/ui/src/components/Dropdown/Dropdown.tsx
+++ b/platform/ui/src/components/Dropdown/Dropdown.tsx
@ -4,7 +4,7 @@ import classnames from 'classnames';

 import { Icon, Typography } from '../';

-const Dropdown = ({ id, children, showDropdownIcon, list }) => {
+const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
  const [open, setOpen] = useState(false);
  const element = useRef(null);

@ -22,7 +22,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
        data-cy={id}
      >
        {!!icon && <Icon name={icon} className="w-4 mr-2 text-white" />}
-        <Typography>{title}</Typography>
+        <Typography className={titleClassName}>{title}</Typography>
      </div>
    );
  }, []);
@ -109,6 +109,7 @@ Dropdown.propTypes = {
  id: PropTypes.string,
  children: PropTypes.node.isRequired,
  showDropdownIcon: PropTypes.bool,
+  titleClassName: PropTypes.string,
  /** Items to render in the select's drop down */
  list: PropTypes.arrayOf(
    PropTypes.shape({
--- a/platform/ui/src/components/Modal/Modal.css
+++ b/platform/ui/src/components/Modal/Modal.css
@ -1,3 +1,3 @@
 .modal-content {
-  max-height: calc(100vh - theme('spacing.250px'));
+  max-height: calc(100vh - 250px);
 }
--- a/platform/ui/src/components/Modal/Modal.tsx
+++ b/platform/ui/src/components/Modal/Modal.tsx
@ -5,7 +5,7 @@ import ReactModal from 'react-modal';
 import './Modal.css';

 import { Typography, Icon } from '../';
-import { useModal } from '../../contextProviders'
+import { useModal } from '../../contextProviders';

 if (typeof document !== 'undefined') {
  ReactModal.setAppElement(document.getElementById('root'));
@ -31,7 +31,7 @@ const Modal = ({
        <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
          <Typography
            variant="h4"
-            className="flex flex-grow text-primary-light font-light"
+            className="flex grow text-primary-light font-light"
          >
            {title}
          </Typography>
--- a/platform/ui/src/components/Notification/Notification.tsx
+++ b/platform/ui/src/components/Notification/Notification.tsx
@ -66,7 +66,7 @@ const Notification = ({
      className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
      data-cy={id}
    >
-      <div className="flex flex-grow">
+      <div className="flex grow">
        <Icon name={icon} className={classnames('w-5', color)} />
        <span className="ml-2 text-base text-black">{message}</span>
      </div>
--- a/platform/ui/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui/src/components/SidePanel/SidePanel.tsx
@ -89,6 +89,7 @@ const SidePanel = ({
          key={i}
          variant="text"
          color="inherit"
+          border="none"
          onClick={() => {
            setComponentOpen(childComponent.name);
          }}
@ -97,7 +98,7 @@ const SidePanel = ({
            width: `${collapsedWidth}px`,
          }}
          name={childComponent.name}
-          className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b"
+          className="flex flex-col text-xs px-1 text-white border-transparent border-b"
        >
          <Icon
            name={childComponent.iconName}
@ -126,6 +127,7 @@ const SidePanel = ({
            <Button
              variant="text"
              color="inherit"
+              border="none"
              rounded="none"
              onClick={() => {
                setComponentOpen(null);
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
@ -6,8 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
 import { StringNumber } from '../../Types';

-const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
-const activeButtonClasses = 'bg-primary-main';
+const buttonClasses = 'text-white text-base border-none p-2 min-w-18';

 const getTrackedSeries = displaySets => {
  let trackedSeries = 0;
@ -92,11 +91,9 @@ const StudyBrowser = ({
            return (
              <Button
                key={name}
-                className={classnames(
-                  buttonClasses,
-                  isActive && activeButtonClasses
-                )}
+                className={classnames(buttonClasses)}
                size="initial"
+                bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
                onClick={() => {
                  onClickTab(name);
                }}
--- a/platform/ui/src/components/StudyItem/StudyItem.tsx
+++ b/platform/ui/src/components/StudyItem/StudyItem.tsx
@ -37,7 +37,9 @@ const StudyItem = ({
        </div>
        <div className="flex flex-row py-1">
          <div className="pr-5 text-xl text-blue-300">{modalities}</div>
-          <div className="text-base text-blue-300 break-words truncate-2-lines">{description}</div>
+          <div className="text-base text-blue-300 break-words truncate-2-lines">
+            {description}
+          </div>
        </div>
      </div>
      {!!trackedSeries && (
--- a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
+++ b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
@ -12,7 +12,7 @@ const StudyListFilter = ({
  isFiltering,
  numOfStudies,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');
  const { sortBy, sortDirection } = filterValues;
  const filterSorting = { sortBy, sortDirection };
  const setFilterSorting = sortingValues => {
@ -39,15 +39,20 @@ const StudyListFilter = ({
                  <Button
                    rounded="full"
                    variant="outlined"
-                    color="primary"
-                    className="mx-8 text-primary-active border-primary-active"
+                    color="primaryActive"
+                    border="primaryActive"
+                    className="mx-8"
                    startIcon={<Icon name="cancel" />}
                    onClick={clearFilters}
                  >
                    {t('Clear filters')}
                  </Button>
                )}
-                <Typography variant="h4" className="mr-2" data-cy={"num-studies"}>
+                <Typography
+                  variant="h4"
+                  className="mr-2"
+                  data-cy={'num-studies'}
+                >
                  {numOfStudies > 100 ? '>100' : numOfStudies}
                </Typography>
                <Typography
--- a/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
+++ b/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
@ -9,7 +9,7 @@ const StudyListPagination = ({
  perPage,
  onChangePerPage,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');

  const navigateToPage = page => {
    const toPage = page < 1 ? 1 : page;
@ -21,8 +21,10 @@ const StudyListPagination = ({
    { value: '50', label: '50' },
    { value: '100', label: '100' },
  ];
-  const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value === perPage));
-  const onSelectedRange = (selectedRange) => {
+  const [selectedRange, setSelectedRange] = useState(
+    ranges.find(r => r.value === perPage)
+  );
+  const onSelectedRange = selectedRange => {
    setSelectedRange(selectedRange);
    onChangePerPage(selectedRange.value);
  };
@ -33,7 +35,7 @@ const StudyListPagination = ({
        <div className="flex justify-between">
          <div className="flex items-center">
            <Select
-              id={"rows-per-page"}
+              id="rows-per-page"
              className="relative mr-3 w-16 border-primary-main"
              options={ranges}
              value={selectedRange}
@ -53,25 +55,33 @@ const StudyListPagination = ({
              <Typography className="opacity-60 mr-4 text-base">
                Page {currentPage}
              </Typography>
-              <ButtonGroup color="primary">
+              <ButtonGroup>
                <Button
                  size="initial"
-                  className="border-primary-main px-4 py-2 text-base"
+                  className="px-4 py-2 text-base"
                  color="white"
+                  border="primary"
+                  variant="outlined"
                  onClick={() => navigateToPage(1)}
                >
                  {`<<`}
                </Button>
                <Button
                  size="initial"
-                  className="border-primary-main py-2 px-2 text-base"
+                  className="py-2 px-2 text-base"
                  color="white"
+                  border="primary"
+                  variant="outlined"
                  onClick={() => navigateToPage(currentPage - 1)}
-                >{t(`< Previous`)}</Button>
+                >
+                  {t(`< Previous`)}
+                </Button>
                <Button
                  size="initial"
-                  className="border-primary-main py-2 px-4 text-base"
+                  className="py-2 px-4 text-base"
                  color="white"
+                  border="primary"
+                  variant="outlined"
                  onClick={() => navigateToPage(currentPage + 1)}
                >
                  {t(`Next >`)}
--- a/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx
+++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.tsx
@ -17,9 +17,12 @@ const StudyListTableRow = props => {
        >
          <div
            className={classnames(
-              'w-full transition border-transparent duration-300',
+              'w-full transition duration-300',
              {
                'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isExpanded,
+              },
+              {
+                'border-transparent': !isExpanded,
              }
            )}
          >
@ -27,7 +30,7 @@ const StudyListTableRow = props => {
              <tbody>
                <tr
                  className={classnames(
-                    'cursor-pointer hover:bg-secondary-main transition duration-300 bg-black',
+                    'cursor-pointer hover:bg-secondary-main transition duration-300',
                    {
                      'bg-primary-dark': !isExpanded,
                    },
@ -54,15 +57,19 @@ const StudyListTableRow = props => {
                          {index === 0 && (
                            <div>
                              <Icon
-                                name={isExpanded ? 'chevron-down' : 'chevron-right'}
+                                name={
+                                  isExpanded ? 'chevron-down' : 'chevron-right'
+                                }
                                className="mr-4 inline-flex"
                              />
                            </div>
                          )}
-                          <div className={classnames(
-                            { 'overflow-hidden': true },
-                            { 'truncate': true }
-                          )}>
+                          <div
+                            className={classnames(
+                              { 'overflow-hidden': true },
+                              { truncate: true }
+                            )}
+                          >
                            {content}
                          </div>
                        </div>
--- a/platform/ui/src/components/Typography/Typography.tsx
+++ b/platform/ui/src/components/Typography/Typography.tsx
@ -45,6 +45,7 @@ const classes = {
    initial: 'text-white',
    inherit: 'text-inherit',
    primary: 'text-primary-main',
+    primaryActive: 'text-primary-active',
    secondary: 'text-common-light',
    error: 'text-red-600',
  },
--- a/platform/ui/src/components/UserPreferences/UserPreferences.tsx
+++ b/platform/ui/src/components/UserPreferences/UserPreferences.tsx
@ -3,13 +3,24 @@ import PropTypes from 'prop-types';
 import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';

-const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset, hotkeysModule }) => {
+const UserPreferences = ({
+  availableLanguages,
+  defaultLanguage,
+  currentLanguage,
+  disabled,
+  hotkeyDefinitions,
+  hotkeyDefaults,
+  onCancel,
+  onSubmit,
+  onReset,
+  hotkeysModule,
+}) => {
  const { t } = useTranslation('UserPreferencesModal');
  const [state, setState] = useState({
    isDisabled: disabled,
    hotkeyErrors: {},
    hotkeyDefinitions,
-    language: currentLanguage
+    language: currentLanguage,
  });

  const onSubmitHandler = () => {
@ -32,7 +43,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
    onCancel();
  };

-  const onLanguageChangeHandler = (value) => {
+  const onLanguageChangeHandler = value => {
    setState(state => ({ ...state, language: value }));
  };

@ -44,7 +55,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
      hotkeyDefinitions: {
        ...state.hotkeyDefinitions,
        [id]: definition,
-      }
+      },
    }));
  };

@ -53,14 +64,12 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
      <div className="border-b-2 border-black mb-2">
        <Typography
          variant="h5"
-          className="flex flex-grow text-primary-light font-light pb-2"
+          className="flex grow text-primary-light font-light pb-2"
        >
          {title}
        </Typography>
      </div>
-      <div className="mt-4 mb-8">
-        {children}
-      </div>
+      <div className="mt-4 mb-8">{children}</div>
    </>
  );

@ -89,17 +98,23 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
        />
      </Section>
      <div className="flex flex-row justify-between">
-        <Button variant="outlined" onClick={onResetHandler} disabled={disabled}>
+        <Button
+          variant="outlined"
+          border="light"
+          onClick={onResetHandler}
+          disabled={disabled}
+        >
          {t('Reset to Defaults')}
        </Button>
        <div className="flex flex-row">
-          <Button variant="outlined" onClick={onCancelHandler}>
+          <Button variant="outlined" border="light" onClick={onCancelHandler}>
            {t('Cancel')}
          </Button>
          <Button
            variant="contained"
            disabled={state.isDisabled}
            color="light"
+            border="light"
            className="ml-2"
            onClick={onSubmitHandler}
          >
@ -111,7 +126,7 @@ const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage,
  );
 };

-const noop = () => { };
+const noop = () => {};

 UserPreferences.propTypes = {
  disabled: PropTypes.bool,
@ -132,7 +147,7 @@ UserPreferences.propTypes = {
    unpause: PropTypes.func.isRequired,
    startRecording: PropTypes.func.isRequired,
    record: PropTypes.func.isRequired,
-  }).isRequired
+  }).isRequired,
 };

 UserPreferences.defaultProps = {
@ -143,7 +158,7 @@ UserPreferences.defaultProps = {
  onCancel: noop,
  onSubmit: noop,
  onReset: noop,
-  disabled: false
+  disabled: false,
 };

 export default UserPreferences;
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
@ -255,7 +255,7 @@ const ViewportActionBar = ({
      }}
      onDoubleClick={onDoubleClick}
    >
-      <div className="flex flex-1 flex-grow mt-2 min-w-48">
+      <div className="flex flex-1 grow mt-2 min-w-48">
        <div className="flex items-center">
          <span className="mr-2 text-white text-large">{label}</span>
          {showStatus && renderIconStatus()}
@ -287,12 +287,14 @@ const ViewportActionBar = ({
            <Button
              size="initial"
              className="px-2 py-1 bg-black"
+              border="light"
              onClick={() => onSeriesChange('left')}
            >
              <Icon name="chevron-left" className="w-4 text-white" />
            </Button>
            <Button
              size="initial"
+              border="light"
              className="px-2 py-1 bg-black"
              onClick={() => onSeriesChange('right')}
            >
--- a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
+++ b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
@ -293,7 +293,7 @@ const ViewportDownloadForm = ({
        </div>
        <div className="flex">
          <div className="flex w-1/3">
-            <div className="flex flex-col flex-grow">
+            <div className="flex flex-col grow">
              <div className="w-full">
                <Input
                  type="number"
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@ -1,11 +1,5 @@
 module.exports = {
-  prefix: '',
-  important: false,
-  separator: ':',
-  purge: {
-    content: ['./src/**/*.{jsx,js,ts,tsx,css,mdx}'],
-    safelist: [],
-  },
+  content: ['./src/**/*.{jsx,js,ts,tsx,css,mdx}'],
  theme: {
    screens: {
      sm: '640px',
--- a/platform/viewer/package.json
+++ b/platform/viewer/package.json
@ -91,7 +91,7 @@
    "identity-obj-proxy": "3.0.x",
    "lodash": "4.17.15",
    "glob": "^8.0.3",
-    "tailwindcss": "2.2.4",
+    "tailwindcss": "3.1.8",
    "terser-webpack-plugin": "^5.1.1",
    "webpack": "^5.50.0",
    "webpack-bundle-analyzer": "^4.4.2",
--- a/platform/viewer/src/routes/Local/Local.tsx
+++ b/platform/viewer/src/routes/Local/Local.tsx
@ -62,8 +62,8 @@ function Local() {
  const onDrop = async acceptedFiles => {
    const studies = await filesToStudies(acceptedFiles, dataSource);
    // Todo: navigate to work list and let user select a mode
-    let query = new URLSearchParams();
-    studies.forEach(id=> query.append('StudyInstanceUIDs', id))
+    const query = new URLSearchParams();
+    studies.forEach(id => query.append('StudyInstanceUIDs', id));
    navigate(`/viewer/dicomlocal?${decodeURIComponent(query.toString())}`);
  };

@ -80,7 +80,7 @@ function Local() {
      {({ getRootProps }) => (
        <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
          <div className="h-screen w-screen flex justify-center items-center ">
-            <div className="py-8 px-8 mx-auto bg-secondary-dark shadow-md space-y-2 rounded-lg">
+            <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
              <img
                className="block mx-auto h-10"
                src="./customLogo.svg"
--- a/platform/viewer/tailwind.config.js
+++ b/platform/viewer/tailwind.config.js
@ -1,18 +1,15 @@
+// Todo: we probably should add external installed extensions/modes here as well.
+
 module.exports = {
-  prefix: '',
-  important: false,
-  separator: ':',
-  purge: {
-    // Note: if you are writing an extension that uses Tailwind classes,
-    // you need to put it here so they are not purged in the production build
-    content: [
-      './src/**/*.{jsx,js,ts,tsx, css}',
-      './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-      '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
-    ],
-  },
+  content: [
+    './src/**/*.{jsx,js,ts,tsx, css}',
+    '../../extensions/**/*.{jsx,js,ts,tsx, css}',
+    '../../modes/**/*.{jsx,js,ts,tsx, css}',
+    './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+    '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
+  ],
  theme: {
    screens: {
      sm: '640px',
--- a/yarn.lock
+++ b/yarn.lock
@ -3166,13 +3166,6 @@
    unique-filename "^1.1.1"
    which "^1.3.1"

-"@fullhuman/postcss-purgecss@^4.0.3":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.1.3.tgz#e4eb21fc7a49257e4081c6a3a86b338618e61fce"
-  integrity sha512-jqcsyfvq09VOsMXxJMPLRF6Fhg/NNltzWKnC9qtzva+QKTxerCO4esG6je7hbnmkpZtaDyPTwMBj9bzfWorsrw==
-  dependencies:
-    purgecss "^4.1.3"
-
 "@gar/promisify@^1.0.1":
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@ -7183,6 +7176,11 @@ arg@^5.0.0:
  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==

+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.7:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -8218,7 +8216,7 @@ bytes@3.0.0:
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==

-bytes@3.1.2, bytes@^3.0.0:
+bytes@3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
@ -8881,7 +8879,7 @@ color-support@^1.1.2:
  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==

-color@^3.0.0, color@^3.1.3:
+color@^3.0.0:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@ -8972,7 +8970,7 @@ commander@^7.0.0, commander@^7.2.0:
  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==

-commander@^8.0.0, commander@^8.3.0:
+commander@^8.3.0:
  version "8.3.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
@ -9682,11 +9680,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
    mdn-data "2.0.14"
    source-map "^0.6.1"

-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css-what@^3.2.1:
  version "3.4.2"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@ -10386,9 +10379,9 @@ detect-port@^1.3.0:
    address "^1.0.1"
    debug "^2.6.0"

-detective@^5.2.0:
+detective@^5.2.1:
  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
+  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
  dependencies:
    acorn-node "^1.8.2"
@ -10413,9 +10406,9 @@ dicomweb-client@^0.6.0:
  resolved "https://registry.yarnpkg.com/dicomweb-client/-/dicomweb-client-0.6.0.tgz#5e35ada52fe0155af1cc1f0e84f9c7f76477f92d"
  integrity sha512-VAkBg4W6odIo2XsFxqjN/rptd7bQ8oHpRuKH5d46E9BUIPzRschazE8Dx1xg7/l3N3f1M70jB7yJ339arAXiDQ==

-didyoumean@^1.2.1:
+didyoumean@^1.2.2:
  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==

 diff-sequences@^24.9.0:
@ -11723,7 +11716,7 @@ fast-glob@^2.2.6:
    merge2 "^1.2.3"
    micromatch "^3.1.10"

-fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9:
+fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
  version "3.2.11"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@ -12180,7 +12173,7 @@ fs-constants@^1.0.0:
  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==

-fs-extra@^10.0.0, fs-extra@^10.1.0:
+fs-extra@^10.1.0:
  version "10.1.0"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
@ -12504,7 +12497,7 @@ glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
  dependencies:
    is-glob "^4.0.1"

-glob-parent@^6.0.0, glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
  version "6.0.2"
  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@ -12528,7 +12521,7 @@ glob-to-regexp@^0.4.1:
  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==

-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
  version "7.2.3"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@ -13733,6 +13726,13 @@ is-core-module@^2.1.0, is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-mod
  dependencies:
    has "^1.0.3"

+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@ -15146,6 +15146,11 @@ lilconfig@^2.0.3, lilconfig@^2.0.5:
  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
  integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==

+lilconfig@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+
 lines-and-columns@^1.1.6:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@ -15421,11 +15426,6 @@ lodash.templatesettings@^4.0.0:
  dependencies:
    lodash._reinterpolate "^3.0.0"

-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==
-
 lodash.truncate@^4.4.2:
  version "4.4.2"
  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@ -16134,11 +16134,6 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
  dependencies:
    minimist "^1.2.6"

-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 modify-values@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@ -16360,7 +16355,7 @@ node-domexception@^1.0.0:
  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==

-node-emoji@^1.10.0, node-emoji@^1.8.1:
+node-emoji@^1.10.0:
  version "1.11.0"
  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
@ -16704,10 +16699,10 @@ object-hash@2.1.1:
  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09"
  integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==

-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==

 object-inspect@^1.12.0, object-inspect@^1.9.0:
  version "1.12.2"
@ -17806,7 +17801,7 @@ postcss-image-set-function@^4.0.6:
  dependencies:
    postcss-value-parser "^4.2.0"

-postcss-import@^14.0.2:
+postcss-import@^14.0.2, postcss-import@^14.1.0:
  version "14.1.0"
  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
@ -17820,13 +17815,12 @@ postcss-initial@^4.0.1:
  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
  integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==

-postcss-js@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
  dependencies:
    camelcase-css "^2.0.1"
-    postcss "^8.1.6"

 postcss-lab-function@^4.2.0:
  version "4.2.0"
@ -17836,9 +17830,9 @@ postcss-lab-function@^4.2.0:
    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
    postcss-value-parser "^4.2.0"

-postcss-load-config@^3.1.0:
+postcss-load-config@^3.1.4:
  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
  dependencies:
    lilconfig "^2.0.5"
@ -18064,12 +18058,12 @@ postcss-modules-values@^4.0.0:
  dependencies:
    icss-utils "^5.0.0"

-postcss-nested@5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
-  integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==
+postcss-nested@5.0.6:
+  version "5.0.6"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
  dependencies:
-    postcss-selector-parser "^6.0.4"
+    postcss-selector-parser "^6.0.6"

 postcss-nesting@^10.1.7:
  version "10.1.7"
@ -18433,7 +18427,7 @@ postcss-unique-selectors@^5.1.1:
  dependencies:
    postcss-selector-parser "^6.0.5"

-postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.0.0:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@ -18456,7 +18450,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.2
    picocolors "^0.2.1"
    source-map "^0.6.1"

-postcss@^8.1.6, postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
+postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.13, postcss@^8.4.7:
  version "8.4.14"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@ -18825,16 +18819,6 @@ pure-color@^1.2.0:
  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=

-purgecss@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
-  integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
-  dependencies:
-    commander "^8.0.0"
-    glob "^7.1.7"
-    postcss "^8.3.5"
-    postcss-selector-parser "^6.0.6"
-
 q@^1.1.2, q@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@ -19639,14 +19623,6 @@ redent@^3.0.0:
    indent-string "^4.0.0"
    strip-indent "^3.0.0"

-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 redux@^4.0.5:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
@ -20080,6 +20056,15 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.
    path-parse "^1.0.7"
    supports-preserve-symlinks-flag "^1.0.0"

+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
  version "2.0.0-next.3"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@ -21547,42 +21532,33 @@ table@^6.0.9:
    string-width "^4.2.3"
    strip-ansi "^6.0.1"

-tailwindcss@2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.4.tgz#6a2e259b1e26125aeaa7cdc479963fd217c308b0"
-  integrity sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==
+tailwindcss@3.1.8:
+  version "3.1.8"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
+  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
  dependencies:
-    "@fullhuman/postcss-purgecss" "^4.0.3"
-    arg "^5.0.0"
-    bytes "^3.0.0"
-    chalk "^4.1.1"
-    chokidar "^3.5.2"
-    color "^3.1.3"
-    cosmiconfig "^7.0.0"
-    detective "^5.2.0"
-    didyoumean "^1.2.1"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
    dlv "^1.1.3"
-    fast-glob "^3.2.5"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.0"
-    html-tags "^3.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.8.1"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
    normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss-js "^3.0.3"
-    postcss-load-config "^3.1.0"
-    postcss-nested "5.0.5"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.14"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
    quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
+    resolve "^1.22.1"

 tapable@^1.0.0, tapable@^1.1.3:
  version "1.1.3"
@ -21893,7 +21869,7 @@ tmp@^0.0.33:
  dependencies:
    os-tmpdir "~1.0.2"

-tmp@^0.2.1, tmp@~0.2.1:
+tmp@~0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==