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