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/common/DropDown.tsx

@@ -62,21 +62,21 @@ function DropDown({ items }: DropDownProps) {
               Y: e.pageY,
             }));
           }}
-          className="flex items-center justify-between cursor-pointer"
+          className="flex cursor-pointer items-center justify-between"
         >
           Help
-          <img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" />
+          <img src={ArrowDownIcon} className="ml-2 h-[10px] w-[10px]" />
         </button>
       </div>
       {popupState.isOpen && (
         <div
           ref={modalRef}
-          className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded-sm border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
+          className={`absolute z-10 mt-3 flex flex-col gap-1 rounded-sm border bg-white py-1 top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
         >
           {items.map((item) => (
             <Fragment key={item.id}>
               {item.isSeparator ? (
-                <div className="bg-gray-300 h-[1px]" />
+                <div className="h-[1px] bg-gray-300" />
               ) : (
                 <div
                   onClick={() => {
@@ -86,9 +86,9 @@ function DropDown({ items }: DropDownProps) {
                       isOpen: false,
                     }));
                   }}
-                  className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-dropdown ${
+                  className={`flex cursor-pointer items-center gap-2 py-1 pr-7 pl-3 font-normal hover:bg-dropdown ${
                     item.isDisabled
-                      ? "cursor-default hover:bg-transparent text-gray-400"
+                      ? "cursor-default text-gray-400 hover:bg-transparent"
                       : ""
                   }`}
                 >

frontend/src/components/common/StatusLabel.tsx

@@ -31,7 +31,7 @@ function StatusLabel({ status, isRollback }: StatusLabelProps) {
         justifyContent: "space-between",
       }}
     >
-      <span className={`${statusColor} font-bold text-xs`}>
+      <span className={`${statusColor} text-xs font-bold`}>
         ● {status.toUpperCase()}
       </span>
       {isRollback && <AiOutlineReload size={14} />}