Added prettier-plugin-tailwindcss and sorted the classes + some small fixes (#630)

* Added prettier-plugin-tailwindcss and sorted the classes

* Added tsc into staged check + some type improvements

frontend/src/components/revision/RevisionDetails.tsx

@@ -162,13 +162,13 @@ export default function RevisionDetails({
     const navigate = useNavigate();
     return (
       <header className="flex flex-wrap justify-between">
-        <h1 className=" text-3xl font-semibold float-left mb-1 font-roboto-slab">
+        <h1 className="float-left mb-1 font-roboto-slab text-3xl font-semibold">
           {chart}
         </h1>
-        <div className="flex flex-row flex-wrap gap-3 float-right h-fit">
+        <div className="float-right flex h-fit flex-row flex-wrap gap-3">
           <div className="flex flex-col">
             <Button
-              className="flex justify-center items-center gap-2 min-w-[150px] text-sm font-semibold disabled:bg-gray-200"
+              className="flex min-w-[150px] items-center justify-center gap-2 text-sm font-semibold disabled:bg-gray-200"
               onClick={() => setIsReconfigureModalOpen(true)}
               disabled={isLoadingLatestVersion || isRefetchingLatestVersion}
             >
@@ -210,14 +210,14 @@ export default function RevisionDetails({
                     `/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
                   );
                 }}
-                className="underline text-sm cursor-pointer text-blue-600"
+                className="cursor-pointer text-sm text-blue-600 underline"
               >
                 Add repository for it: {latestVerData[0].repository}
               </span>
             ) : (
               <span
                 onClick={() => refetchLatestVersion()}
-                className="underline cursor-pointer text-xs"
+                className="cursor-pointer text-xs underline"
               >
                 Check for new version
               </span>
@@ -230,7 +230,7 @@ export default function RevisionDetails({
               {" "}
               <Button
                 onClick={handleRunTests}
-                className="flex items-center gap-2 h-1/2 text-sm font-semibold"
+                className="flex h-1/2 items-center gap-2 text-sm font-semibold"
               >
                 <BsCheckCircle />
                 Run tests
@@ -242,7 +242,7 @@ export default function RevisionDetails({
                 onClose={() => setShowTestResults(false)}
               >
                 {isRunningTests ? (
-                  <div className="flex mr-2 items-center">
+                  <div className="mr-2 flex items-center">
                     <Spinner /> Waiting for completion..
                   </div>
                 ) : (
@@ -263,10 +263,10 @@ export default function RevisionDetails({
     : isNewerVersion(installedRevision.chart_ver, latestVerData?.[0]?.version);
 
   return (
-    <div className="flex flex-col px-16 pt-5 gap-3">
+    <div className="flex flex-col gap-3 px-16 pt-5">
       <StatusLabel status={release.status} />
       <Header />
-      <div className="flex flex-row gap-6 text-sm -mt-4">
+      <div className="-mt-4 flex flex-row gap-6 text-sm">
         <span>
           Revision <span className="font-semibold">#{release.revision}</span>
         </span>
@@ -306,7 +306,7 @@ export default function RevisionDetails({
 
 function RevisionTag({ caption, text }: RevisionTagProps) {
   return (
-    <span className="bg-revision p-1 rounded-sm px-2 text-sm">
+    <span className="rounded-sm bg-revision p-1 px-2 text-sm">
       <span>{caption}:</span>
       <span className="font-bold"> {text}</span>
     </span>
@@ -352,7 +352,7 @@ const Rollback = ({
       : revisionInt;
 
   const rollbackTitle = (
-    <div className="font-semibold text-lg">
+    <div className="text-lg font-semibold">
       Rollback <span className="text-red-500">{chart}</span> from revision{" "}
       {installedRevision.revision} to {rollbackRevision}
     </div>
@@ -441,7 +441,7 @@ const Rollback = ({
     <>
       <Button
         onClick={handleRollback}
-        className="flex items-center gap-2 h-1/2 text-sm font-semibold"
+        className="flex h-1/2 items-center gap-2 text-sm font-semibold"
       >
         <BsArrowRepeat />
         Rollback to #{rollbackRevision}
@@ -470,7 +470,7 @@ const Uninstall = () => {
     },
   });
   const uninstallTitle = (
-    <div className="font-semibold text-lg">
+    <div className="text-lg font-semibold">
       Uninstall <span className="text-red-500">{chart}</span> from namespace{" "}
       <span className="text-red-500">{namespace}</span>
     </div>
@@ -480,7 +480,7 @@ const Uninstall = () => {
     <>
       <Button
         onClick={() => setIsOpen(true)}
-        className="flex items-center gap-2 hover:bg-red-200 h-1/2 text-sm font-semibold"
+        className="flex h-1/2 items-center gap-2 text-sm font-semibold hover:bg-red-200"
       >
         <BsTrash3 />
         Uninstall
@@ -507,18 +507,18 @@ const Uninstall = () => {
                 key={
                   resource.apiVersion + resource.kind + resource.metadata.name
                 }
-                className="flex justify-start gap-1 w-full mb-3"
+                className="mb-3 flex w-full justify-start gap-1"
               >
                 <span
                   style={{
                     textAlign: "end",
                     paddingRight: "30px",
                   }}
-                  className=" w-3/5  italic"
+                  className="w-3/5 italic"
                 >
                   {resource.kind}
                 </span>
-                <span className=" w-4/5 font-semibold">
+                <span className="w-4/5 font-semibold">
                   {resource.metadata.name}
                 </span>
               </div>