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