refactor(components): 🎉 update imports at components

robolaunch · Dec 12, 2023 · 642d81c · 642d81c
1 parent ce98aa3
commit 642d81c
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 44 deletions.
diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
@@ -1,13 +1,13 @@
-import React, { ReactElement, useEffect, useState } from "react";
-import CardLayout from "../../layouts/CardLayout";
-import { FullScreen, useFullScreenHandle } from "react-full-screen";
-import { useAppSelector } from "../../hooks/redux";
-import useRobot from "../../hooks/useRobot";
 import RestartService from "../RestartServiceButton/RestartServiceButton";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import FullScreenButton from "../FullScreenButton/FullScreenButton";
+import { ReactElement, useEffect, useState } from "react";
 import ServiceLogs from "../ServiceLogs/ServiceLogs";
 import ServiceJobs from "../ServiceJobs/ServiceJobs";
 import FileBrowser from "../FileBrowser/FileBrowser";
+import { useAppSelector } from "../../hooks/redux";
+import CardLayout from "../../layouts/CardLayout";
+import useRobot from "../../hooks/useRobot";
 
 export default function CodeEditor(): ReactElement {
   const [ideKey, setIdeKey] = useState<number>(0);

diff --git a/src/components/FilteredTags/FilteredTags.tsx b/src/components/FilteredTags/FilteredTags.tsx
@@ -1,21 +1,21 @@
-import React from "react";
-import useMain from "../../hooks/useMain";
 import { organizationNameViewer } from "../../functions/GeneralFunctions";
+import useMain from "../../hooks/useMain";
+import { ReactElement } from "react";
 
-export default function FilteredTags() {
+export default function FilteredTags(): ReactElement {
   const { selectedState } = useMain();
 
   return (
     <div className="animate__animated animate__fadeIn flex flex-wrap gap-2 pb-4">
       {selectedState?.organization && (
-        <div className="border-secondary-400 bg-secondary-100 col-span-1 flex max-w-fit items-center gap-2 rounded border p-1">
+        <div className="col-span-1 flex max-w-fit items-center gap-2 rounded border border-secondary-400 bg-secondary-100 p-1">
           <img
             draggable="false"
             className="h-4 w-4"
             src="/svg/general/organization/organization-blue.svg"
             alt="robolaunch"
           />
-          <span className="text-secondary-900 cursor-default text-xs">
+          <span className="cursor-default text-xs text-secondary-900">
             {organizationNameViewer({
               organizationName: selectedState?.organization?.organizationName,
               capitalization: false,
@@ -24,40 +24,40 @@ export default function FilteredTags() {
         </div>
       )}
       {selectedState?.roboticsCloud && (
-        <div className="border-secondary-400 bg-secondary-100 col-span-1 flex max-w-fit items-center gap-2 rounded border p-1">
+        <div className="col-span-1 flex max-w-fit items-center gap-2 rounded border border-secondary-400 bg-secondary-100 p-1">
           <img
             draggable="false"
             className="h-4 w-4"
             src="/svg/general/roboticscloud/roboticscloud-blue.svg"
             alt="robolaunch"
           />
-          <span className="text-secondary-900 cursor-default text-xs">
+          <span className="cursor-default text-xs text-secondary-900">
             {selectedState?.roboticsCloud?.name}
           </span>
         </div>
       )}
       {selectedState?.instance && (
-        <div className="border-secondary-400 bg-secondary-100 col-span-1 flex max-w-fit items-center gap-2 rounded border p-1">
+        <div className="col-span-1 flex max-w-fit items-center gap-2 rounded border border-secondary-400 bg-secondary-100 p-1">
           <img
             draggable="false"
             className="h-4 w-4"
             src="/svg/general/instance/instance-blue.svg"
             alt="robolaunch"
           />
-          <span className="text-secondary-900 cursor-default text-xs">
+          <span className="cursor-default text-xs text-secondary-900">
             {selectedState?.instance?.name}
           </span>
         </div>
       )}
       {selectedState?.fleet && (
-        <div className="border-secondary-400 bg-secondary-100 col-span-1 flex max-w-fit items-center gap-2 rounded border p-1">
+        <div className="col-span-1 flex max-w-fit items-center gap-2 rounded border border-secondary-400 bg-secondary-100 p-1">
           <img
             draggable="false"
             className="h-4 w-4"
             src="/svg/general/fleet/fleet-blue.svg"
             alt="robolaunch"
           />
-          <span className="text-secondary-900 cursor-default text-xs">
+          <span className="cursor-default text-xs text-secondary-900">
             {selectedState?.fleet?.name}
           </span>
         </div>

diff --git a/src/components/GPUChart/GPUChart.tsx b/src/components/GPUChart/GPUChart.tsx
@@ -1,7 +1,7 @@
+import { IGPUDeviceUsage } from "../../interfaces/instanceInferfaces";
 import { ReactElement, useEffect, useState } from "react";
-import useMain from "../../hooks/useMain";
 import { BsGpuCard } from "react-icons/bs";
-import { IGPUDeviceUsage } from "../../interfaces/instanceInferfaces";
+import useMain from "../../hooks/useMain";
 
 export default function GPUChart(): ReactElement {
   const { pagesState } = useMain();

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,15 +1,12 @@
-import React, { ReactElement } from "react";
-// import NotificationDropdownMenu from "../NotificationDropdownMenu/NotificationDropdownMenu";
 import HeaderDropdownMenu from "../HeaderDropdownMenu/HeaderDropdownMenu";
-// import TimerDropdownMenu from "../TimerDropdownMenu/TimerDropdownMenu";
-// import ThemeToggle from "../ThemeToggle/ThemeToggle";
-import Breadcrumb from "../Breadcrumb/Breadcrumb";
 import BugFeedbackButton from "../BugFeedbackButton/BugFeedbackButton";
 import InstallAppButton from "../InstallAppButton/InstallAppButton";
+import Breadcrumb from "../Breadcrumb/Breadcrumb";
+import { ReactElement } from "react";
 
 export default function Header(): ReactElement {
   return (
-    <div className="animate__animated animate__fadeInDown border-light-200 bg-light-50 text-light-400 z-30 flex h-16 w-full items-center justify-between border-b px-4 shadow-md">
+    <div className="animate__animated animate__fadeInDown 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">
         {/* <TimerDropdownMenu /> */}

diff --git a/src/components/NetworkChart/NetworkChart.tsx b/src/components/NetworkChart/NetworkChart.tsx
@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
 import { TiArrowDown, TiArrowUp } from "react-icons/ti";
 import useMain from "../../hooks/useMain";
+import { ReactElement } from "react";
 
 export default function NetworkChart(): ReactElement {
   const { pagesState } = useMain();

diff --git a/src/components/RemoteDesktopController/RemoteDesktopController.tsx b/src/components/RemoteDesktopController/RemoteDesktopController.tsx
@@ -2,11 +2,11 @@ import RestartService from "../RestartServiceButton/RestartServiceButton";
 import FullScreenButton from "../FullScreenButton/FullScreenButton";
 import { IoIosArrowUp, IoIosArrowDown } from "react-icons/io";
 import VolumeControl from "../VolumeControl/VolumeControl";
+import ServiceLogs from "../ServiceLogs/ServiceLogs";
+import FileBrowser from "../FileBrowser/FileBrowser";
 import { useKeycloak } from "@react-keycloak/web";
 import { ReactElement, useState } from "react";
 import Button from "../Button/Button";
-import ServiceLogs from "../ServiceLogs/ServiceLogs";
-import FileBrowser from "../FileBrowser/FileBrowser";
 
 interface IRemoteDesktopController {
   remoteDesktopReducer: any;

diff --git a/src/components/RemoteDesktopScene/RemoteDesktopScene.tsx b/src/components/RemoteDesktopScene/RemoteDesktopScene.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
-import { GiSpeaker } from "react-icons/gi";
 import RemoteDesktopController from "../RemoteDesktopController/RemoteDesktopController";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { GiSpeaker } from "react-icons/gi";
 import useVDI from "../../hooks/useVDI";
+import { ReactElement } from "react";
 
 interface IRemoteDesktopScene {
   isControllerActive: boolean;
@@ -38,13 +38,13 @@ export default function RemoteDesktopScene({
           {isControllerActive && remoteDesktopReducer?.isMuted && (
             <div
               onClick={() => handleMute()}
-              className="animate__animated animate__fadeIn text-light-50 absolute top-0 z-10 flex h-full w-full cursor-pointer items-center justify-center bg-[#00000090]"
+              className="animate__animated animate__fadeIn absolute top-0 z-10 flex h-full w-full cursor-pointer items-center justify-center bg-[#00000090] text-light-50"
             >
               <GiSpeaker size={48} />
             </div>
           )}
         </span>
-        <div className="text-light-100 absolute bottom-4 left-4 flex items-center gap-2 text-xs">
+        <div className="absolute bottom-4 left-4 flex items-center gap-2 text-xs text-light-100">
           <div
             className={`h-[8px] w-[8px] rounded ${
               remoteDesktopReducer?.controller?.displayname

diff --git a/src/components/ResourcesWidget/ResourcesWidget.tsx b/src/components/ResourcesWidget/ResourcesWidget.tsx
@@ -1,8 +1,8 @@
-import React, { Fragment, ReactElement } from "react";
-import { GoGraph } from "react-icons/go";
+import ContentLoader from "react-content-loader";
 import Widget from "../../layouts/WidgetLayout";
+import { Fragment, ReactElement } from "react";
 import Seperator from "../Seperator/Seperator";
-import ContentLoader from "react-content-loader";
+import { GoGraph } from "react-icons/go";
 
 interface IResourcesWidget {
   title: string;
@@ -27,11 +27,11 @@ export default function ResourcesWidget({
               <li className="flex justify-between" key={item?.title}>
                 <div className="flex items-center gap-2">
                   {item?.icon}
-                  <span className="text-light-600 text-xs font-medium">
+                  <span className="text-xs font-medium text-light-600">
                     {item?.title}:
                   </span>
                 </div>
-                <span className="text-light-500 text-xs font-medium">
+                <span className="text-xs font-medium text-light-500">
                   {item?.value || (
                     <ContentLoader
                       width={124}

diff --git a/src/components/UsagesWidget/UsagesWidget.tsx b/src/components/UsagesWidget/UsagesWidget.tsx
@@ -1,9 +1,9 @@
-import { ReactElement } from "react";
-import { GoGraph } from "react-icons/go";
-import Widget from "../../layouts/WidgetLayout";
 import CirclePercentageBar from "../CirclePercentageBar/CirclePercentageBar";
 import NetworkChart from "../NetworkChart/NetworkChart";
+import Widget from "../../layouts/WidgetLayout";
 import GPUChart from "../GPUChart/GPUChart";
+import { GoGraph } from "react-icons/go";
+import { ReactElement } from "react";
 
 interface IUsagesWidget {
   title: string;

diff --git a/src/layouts/SidebarContentLayout.tsx b/src/layouts/SidebarContentLayout.tsx
@@ -1,4 +1,3 @@
-import { ReactElement, useEffect, useState } from "react";
 import {
   envApplication,
   envCreateInstance,
@@ -25,6 +24,7 @@ import FleetsList from "../components/SidebarLists/FleetsList";
 import CFNamespace from "../components/CreateForms/CFNamespace";
 import CFInstance from "../components/CreateForms/CFInstance";
 import CFPhysical from "../components/CreateForms/CFPhysical";
+import { ReactElement, useEffect, useState } from "react";
 import CFRegion from "../components/CreateForms/CFRegion";
 import CFFleet from "../components/CreateForms/CFFleet";
 import useCreateRobot from "../hooks/useCreateRobot";
@@ -243,7 +243,7 @@ export default function SidebarContentLayout(): ReactElement {
 
   return (
     <div
-      className={`w-fill-available animate__animated animate__fadeInLeftBig animate__faster border-light-200 bg-light-50 fixed left-16 z-[32] flex h-full select-none flex-col justify-between rounded-r-xl border-r shadow-2xl md:w-[38rem] lg:left-20 ${
+      className={`w-fill-available animate__animated animate__fadeInLeftBig animate__faster fixed left-16 z-[32] flex h-full select-none flex-col justify-between rounded-r-xl border-r border-light-200 bg-light-50 shadow-2xl md:w-[38rem] lg:left-20 ${
         url?.robotName || sidebarState?.isCreateMode ? "px-8 pb-2 pt-8" : "p-6"
       }`}
     >
@@ -424,7 +424,7 @@ export default function SidebarContentLayout(): ReactElement {
           <Button
             className={
               sidebarState?.isCreateMode
-                ? "!bg-light-50 border-primary-700 !text-primary-700 hover:!bg-primary-100 mt-3 border capitalize transition-all duration-500"
+                ? "mt-3 border border-primary-700 !bg-light-50 capitalize !text-primary-700 transition-all duration-500 hover:!bg-primary-100"
                 : ""
             }
             text={buttonTextGenerator()}

diff --git a/src/pages/DashboardsPage/RegionDashboard/RegionDashboard.tsx b/src/pages/DashboardsPage/RegionDashboard/RegionDashboard.tsx
@@ -6,8 +6,8 @@ import GeneralTable from "../../../components/Table/GeneralTable";
 import TourGuide from "../../../components/TourGuide/TourGuide";
 import DashboardLayout from "../../../layouts/DashboardLayout";
 import { getGuideItem } from "../../../functions/handleGuide";
-import { ReactElement } from "react";
 import { useParams } from "react-router-dom";
+import { ReactElement } from "react";
 
 export default function RegionDashboard(): ReactElement {
   const url = useParams();

diff --git a/src/pages/RobotPage/RemoteDesktop/RemoteDesktop.tsx b/src/pages/RobotPage/RemoteDesktop/RemoteDesktop.tsx
@@ -1,5 +1,5 @@
-import RemoteDesktopTabs from "../../../components/RemoteDesktopTabs/RemoteDesktopTabs.tsx";
 import RemoteDesktopScene from "../../../components/RemoteDesktopScene/RemoteDesktopScene.tsx";
+import RemoteDesktopTabs from "../../../components/RemoteDesktopTabs/RemoteDesktopTabs.tsx";
 import StreamContext from "../../../contexts/VDIContext.tsx";
 import { useAppSelector } from "../../../hooks/redux.ts";
 import CardLayout from "../../../layouts/CardLayout";