refactor(animate): 🎉 update animate and imports

src/App.tsx

@@ -1,7 +1,7 @@
-import { ReactElement } from "react";
 import VersionViewer from "./components/VersionViewer/VersionViewer";
 import ThemeContext from "./contexts/ThemeContext";
 import AppRoutes from "./routes/AppRoutes";
+import { ReactElement } from "react";
 import { Toaster } from "sonner";
 
 export default function App(): ReactElement {

src/components/BuildManagerStepsTable/BuildManagerStepsTable.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement, useMemo } from "react";
-import GeneralTable from "../Table/GeneralTable";
-import InfoCell from "../TableInformationCells/InfoCell";
-import { useParams } from "react-router-dom";
 import BasicCell from "../TableInformationCells/BasicCell";
 import StateCell from "../TableInformationCells/StateCell";
 import LogsCell from "../TableInformationCells/LogsCell";
+import InfoCell from "../TableInformationCells/InfoCell";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import React, { ReactElement, useMemo } from "react";
+import GeneralTable from "../Table/GeneralTable";
+import { useParams } from "react-router-dom";
 import TickCell from "../TickCell/TickCell";
 
 interface IBuildManagerStepsTable {

src/components/CFBuildScope/CFBuildScope.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement } from "react";
 import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
-import { FormikProps } from "formik/dist/types";
 import { IBuildSteps } from "../../interfaces/robotInterfaces";
-import useMain from "../../hooks/useMain";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import { FormikProps } from "formik/dist/types";
+import React, { ReactElement } from "react";
+import useMain from "../../hooks/useMain";
 
 interface ICFBuildScope {
   formik: FormikProps<IBuildSteps>;

src/components/CFLaunchScope/CFLaunchScope.tsx

@@ -1,9 +1,9 @@
-import { ReactElement } from "react";
+import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
 import { ILaunchStep } from "../../interfaces/robotInterfaces";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import { FormikProps } from "formik/dist/types";
-import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
 import useMain from "../../hooks/useMain";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { ReactElement } from "react";
 
 interface ICFLaunchScope {
   formik: FormikProps<ILaunchStep>;

src/components/CreateRobotFormCodeScope/CreateRobotFormCodeScope.tsx

@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
 import InputCheckbox from "../InputCheckbox/InputCheckbox";
 import useCreateRobot from "../../hooks/useCreateRobot";
-import useMain from "../../hooks/useMain";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import { ReactElement } from "react";
+import useMain from "../../hooks/useMain";
 
 interface ICreateRobotFormCodeScope {
   virtualInstanceChecked?: boolean;

src/components/Header/Header.tsx

@@ -6,12 +6,11 @@ import { ReactElement } from "react";
 
 export default function Header(): ReactElement {
   return (
-    <div className="animate-fadeInDown sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-light-200 bg-light-50 px-4 text-light-400 shadow-md">
+    <div className="animate__animated animate__fadeInDown sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-light-200 bg-light-50 px-4 text-light-400 shadow-md">
       <Breadcrumb />
       <div className="flex items-center gap-3">
         <BugFeedbackButton />
         <InstallAppButton />
-
         <HeaderDropdownMenu />
       </div>
     </div>

src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx

@@ -32,7 +32,7 @@ export default function HeaderDropdownMenu(): ReactElement {
       </div>
       {isOpen && (
         <ul
-          className="animate-fadeInDown animate__faster absolute right-4 top-[3.6rem] flex w-72 flex-col gap-1 rounded border border-light-100 bg-light-50 p-2 text-sm shadow-lg"
+          className="animate__animated animate__fadeInDown animate__faster absolute right-4 top-[3.6rem] flex w-72 flex-col gap-1 rounded border border-light-100 bg-light-50 p-2 text-sm shadow-lg"
           ref={ref}
         >
           <div onClick={() => setIsOpen(false)}>

src/components/Sidebar/Sidebar.tsx

@@ -10,7 +10,7 @@ export default function Sidebar(): ReactElement {
 
   return (
     <Fragment>
-      <div className="animate-fadeInLeft fixed z-40 flex h-screen w-16 select-none flex-col items-center gap-4 border-r border-light-200 bg-light-50 py-2 shadow-2xl lg:w-20 ">
+      <div className="animate__animated animate__fadeInLeft fixed z-40 flex h-screen w-16 select-none flex-col items-center gap-4 border-r border-light-200 bg-light-50 py-2 shadow-2xl lg:w-20 ">
         <Link to={`/`}>
           <img
             draggable="false"

src/components/SidebarMenuItem/SideBarMenuItem.tsx

@@ -95,7 +95,7 @@ export default function SideBarMenuItem({
     <div
       data-tut={type + "-sidebar-menu-item"}
       onClick={() => !loading && !disabled && handleClick()}
-      className={`${activeSwitcher()} transition-500 animate-fadeInLeft relative cursor-pointer select-none rounded-md p-2 hover:scale-90 ${
+      className={`${activeSwitcher()} transition-500 animate__animated animate__fadeInLeft relative cursor-pointer select-none rounded-md p-2 hover:scale-90 ${
         (loading || disabled) && "!cursor-not-allowed"
       }`}
       onMouseEnter={() => !loading && !disabled && setIsHover(true)}

src/components/SidebarStaticItem/SidebarStaticItem.tsx

@@ -19,7 +19,7 @@ export default function SidebarStaticItem({
 
   return (
     <div
-      className={`animate-fadeInLeft relative cursor-pointer select-none rounded-md p-2 transition-all duration-500 hover:scale-90 ${
+      className={`animate__animated animate__fadeInLeft relative cursor-pointer select-none rounded-md p-2 transition-all duration-500 hover:scale-90 ${
         location?.pathname?.includes(to) &&
         "bg-light-100 transition-all duration-500"
       }`}

src/components/TableActionCells/EnvironmentActionCells.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment, ReactElement, useState } from "react";
-import Button from "../Button/Button";
-import { BiTrash } from "react-icons/bi";
 import DeleteEnvironmentModal from "../../modals/DeleteEnvironmentModal";
+import { Fragment, ReactElement, useState } from "react";
+import { BiTrash } from "react-icons/bi";
+import Button from "../Button/Button";
 
 interface IEnvironmentActionCells {
   data: any;

src/components/TableActionCells/FleetActionCells.tsx

@@ -1,7 +1,7 @@
-import { IOrganization } from "../../interfaces/organizationInterfaces";
 import TableActionButtons from "../TableActionButtons/TableActionButtons";
-import { IInstance } from "../../interfaces/instanceInferfaces";
+import { IOrganization } from "../../interfaces/organizationInterfaces";
 import DeleteFleetModalModal from "../../modals/DeleteFleetModal";
+import { IInstance } from "../../interfaces/instanceInferfaces";
 import { IRegion } from "../../interfaces/regionInterfaces";
 import { Fragment, ReactElement, useState } from "react";
 

src/components/TableActionCells/InvoiceActionCells.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, ReactElement, useState } from "react";
-import Button from "../Button/Button";
-import { MdPayment } from "react-icons/md";
+import InvoiceUtilizationModal from "../../modals/InvoiceUtilizationModal";
+import { Fragment, ReactElement, useState } from "react";
 import { TbCloudDownload } from "react-icons/tb";
 import { AiOutlineEye } from "react-icons/ai";
-import InvoiceUtilizationModal from "../../modals/InvoiceUtilizationModal";
+import { MdPayment } from "react-icons/md";
+import Button from "../Button/Button";
 
 interface IInvoiceActionCells {
   rowData: any;
@@ -19,8 +19,8 @@ export default function InvoiceActionCells({
     <Fragment>
       <div className="flex justify-end gap-3">
         <Button
-          className="disabled:!border-light-300 disabled:!text-light-300 !border-primary-500 !h-8 !w-8
-                !border !bg-transparent disabled:cursor-not-allowed
+          className="!h-8 !w-8 !border !border-primary-500 !bg-transparent
+                disabled:cursor-not-allowed disabled:!border-light-300 disabled:!text-light-300
                 "
           text={
             <MdPayment
@@ -32,7 +32,7 @@ export default function InvoiceActionCells({
           disabled={rowData?.status}
         />
         <Button
-          className="!border-secondary-600 !ring-secondary-200 !h-8 !w-8 !border !bg-transparent"
+          className="!h-8 !w-8 !border !border-secondary-600 !bg-transparent !ring-secondary-200"
           text={<TbCloudDownload className="text-secondary-600" />}
         />
         <Button

src/components/TableActionCells/NamespaceActionCells.tsx

@@ -1,9 +1,9 @@
-import { Fragment, ReactElement, useState } from "react";
 import DeleteNamespaceModal from "../../modals/DeleteNamespaceModal";
 import TableActionButtons from "../TableActionButtons/TableActionButtons";
 import { IOrganization } from "../../interfaces/organizationInterfaces";
 import { IInstance } from "../../interfaces/instanceInferfaces";
 import { IRegion } from "../../interfaces/regionInterfaces";
+import { Fragment, ReactElement, useState } from "react";
 
 interface INSActionCells {
   data: {

src/components/TableActionCells/OrganizationActionCells.tsx

@@ -1,8 +1,8 @@
 import DeleteOrganizationModal from "../../modals/DeleteOrganizationModal";
+import TableActionButtons from "../TableActionButtons/TableActionButtons";
+import { IOrganization } from "../../interfaces/organizationInterfaces";
 import { envCreatableOrganization } from "../../helpers/envProvider";
 import { Fragment, ReactElement, useState } from "react";
-import { IOrganization } from "../../interfaces/organizationInterfaces";
-import TableActionButtons from "../TableActionButtons/TableActionButtons";
 
 interface IOrganizationActionCells {
   data: IOrganization;

src/components/TableActionCells/RegionsActionCells.tsx

@@ -1,8 +1,8 @@
-import { Fragment, ReactElement, useState } from "react";
+import TableActionButtons from "../TableActionButtons/TableActionButtons";
 import DeleteRegionModal from "../../modals/DeleteRegionModal";
 import { envCreatableRegion } from "../../helpers/envProvider";
 import { IRegion } from "../../interfaces/regionInterfaces";
-import TableActionButtons from "../TableActionButtons/TableActionButtons";
+import { Fragment, ReactElement, useState } from "react";
 
 interface IRegionsActionCells {
   data: IRegion;

src/components/TableActionCells/RobotActionCells.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment, ReactElement, useState } from "react";
-import Button from "../Button/Button";
-import { BiTrash } from "react-icons/bi";
 import DeleteRobotModalModal from "../../modals/DeleteRobotModal";
+import { Fragment, ReactElement, useState } from "react";
+import { BiTrash } from "react-icons/bi";
+import Button from "../Button/Button";
 
 interface IRobotActionCells {
   data: any;

src/components/TableActionCells/UserActionCells.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment, ReactElement, useState } from "react";
-import Button from "../Button/Button";
-import { BiTrash, BiPencil } from "react-icons/bi";
 import DeleteMemberFromOrganizationModal from "../../modals/DeleteMemberFromOrganizationModal";
 import ChangeRoleModal from "../../modals/ChangeRoleModal";
+import { Fragment, ReactElement, useState } from "react";
+import { BiTrash, BiPencil } from "react-icons/bi";
+import Button from "../Button/Button";
 interface IUserActionCells {
   data: any;
   onClickSee: any;
@@ -23,7 +23,7 @@ export default function UserActionCells({
     <Fragment>
       <div className="card float-right flex gap-4">
         <Button
-          className="!border-primary-500 !h-8 !w-8 !border !bg-transparent"
+          className="!h-8 !w-8 !border !border-primary-500 !bg-transparent"
           text={<BiPencil className="text-primary-500" />}
           onClick={() => setVisibleChangeRoleModal(true)}
         />

src/components/TaskManagementContextMenu/TaskManagementContextMenu.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import { Item, Menu, Separator, Submenu } from "react-contexify";
 import getWaypointIcon from "../../helpers/GetWaypointIcon";
 import { IoSettingsOutline } from "react-icons/io5";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
+import { ReactElement } from "react";
 
 interface ITaskManagementContextMenu {
   handleAddWaypointToMission: ({
@@ -26,11 +26,11 @@ export default function TaskManagementContextMenu({
   activeMission,
   handleCostMap,
   isCostMapActive,
-}: ITaskManagementContextMenu) {
+}: ITaskManagementContextMenu): ReactElement {
   return (
     <Menu className="flex flex-col gap-2" id={MENU_ID}>
       <Item className="hover:!bg-light-100" onClick={() => {}}>
-        <div className="text-light-500 flex items-center gap-2">
+        <div className="flex items-center gap-2 text-light-500">
           {getWaypointIcon({
             type: "go",
             size: 20,
@@ -42,7 +42,7 @@ export default function TaskManagementContextMenu({
         disabled={activeMission === -1 ? true : false}
         onClick={() => handleAddWaypointToMission({ type: "wait" })}
       >
-        <div className="text-light-500 flex items-center gap-2">
+        <div className="flex items-center gap-2 text-light-500">
           {getWaypointIcon({
             type: "wait",
             size: 20,
@@ -58,7 +58,7 @@ export default function TaskManagementContextMenu({
           })
         }
       >
-        <div className="text-light-500 flex items-center gap-2">
+        <div className="flex items-center gap-2 text-light-500">
           {getWaypointIcon({
             type: "move",
             size: 20,
@@ -74,7 +74,7 @@ export default function TaskManagementContextMenu({
           })
         }
       >
-        <div className="text-light-500 flex items-center gap-2">
+        <div className="flex items-center gap-2 text-light-500">
           {getWaypointIcon({
             type: "picture",
             size: 20,
@@ -85,14 +85,14 @@ export default function TaskManagementContextMenu({
       <Separator />
       <Submenu
         label={
-          <div className="text-light-500 flex items-center gap-2">
+          <div className="flex items-center gap-2 text-light-500">
             <IoSettingsOutline size={20} />
             <span className="text-sm">Map Settings</span>
           </div>
         }
       >
         <Item onClick={() => handleCostMap()}>
-          <div className="text-light-500 flex items-center gap-2">
+          <div className="flex items-center gap-2 text-light-500">
             {isCostMapActive ? (
               <AiOutlineEyeInvisible size={20} />
             ) : (

src/components/TeleoperationControlBar/TeleoperationControlBar.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment, ReactElement } from "react";
-import InputToggle from "../InputToggle/InputToggle";
 import { BsFullscreen, BsFullscreenExit } from "react-icons/bs";
+import InputToggle from "../InputToggle/InputToggle";
 import InputSelect from "../InputSelect/InputSelect";
+import { Fragment, ReactElement } from "react";
 
 interface ITeleoperationControlBar {
   selectedTopic: string;
@@ -21,7 +21,7 @@ export default function TeleoperationControlBar({
   handleFullScreen,
 }: ITeleoperationControlBar): ReactElement {
   return (
-    <div className="shadow-t-lg bg-light-50 absolute bottom-0 z-10 flex w-full items-center justify-between rounded-t px-4 py-3">
+    <div className="shadow-t-lg absolute bottom-0 z-10 flex w-full items-center justify-between rounded-t bg-light-50 px-4 py-3">
       <div className="flex gap-2">
         <InputSelect
           disabled={isRemoteDesktopStream}
@@ -563,14 +563,14 @@ export default function TeleoperationControlBar({
         <button onClick={handleFullScreen.exit}>
           <BsFullscreenExit
             size={24}
-            className="text-light-700 hover:text-primary-400 transition-all duration-200 hover:scale-90"
+            className="text-light-700 transition-all duration-200 hover:scale-90 hover:text-primary-400"
           />
         </button>
       ) : (
         <button onClick={handleFullScreen.enter}>
           <BsFullscreen
             size={24}
-            className="text-light-700 hover:text-primary-400 transition-all duration-200 hover:scale-90"
+            className="text-light-700 transition-all duration-200 hover:scale-90 hover:text-primary-400"
           />
         </button>
       )}

src/components/TickCell/TickCell.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from "react";
 import { BsCheckCircle, BsXCircle } from "react-icons/bs";
+import { ReactElement } from "react";
 
 interface ITickCell {
   tick: boolean;
@@ -9,9 +9,9 @@ export default function TickCell({ tick }: ITickCell): ReactElement {
   return (
     <div className="flex items-center justify-center">
       {tick ? (
-        <BsCheckCircle className="text-green-500 w-5 h-5" />
+        <BsCheckCircle className="h-5 w-5 text-green-500" />
       ) : (
-        <BsXCircle className="text-blue-500 w-5 h-5" />
+        <BsXCircle className="h-5 w-5 text-blue-500" />
       )}
     </div>
   );

src/components/UpdateRobotLaunchsForm/UpdateRobotLaunchsForm.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import LaunchFormAccordionHeader from "../LaunchFormAccordionHeader/LaunchFormAccordionHeader";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import UpdateLaunchAccordion from "../UpdateLaunchAccordion/UpdateLaunchAccordion";
+import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import CreateRobotFormStep4 from "../CreateForms/CFStep4";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";