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

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 && (

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;

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';

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;

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({

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);
 }

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>

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>

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);

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);
                 }}

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 && (

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

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 >`)}

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>

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',
   },

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;

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')}
             >

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"