refactor(input, buttons and host-directories): 🎉 update inputs cf-but…

…tons, upgrade host directories component

src/components/CFDellButton/CFDellButton.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from "react";
+import { IoTrashBinOutline } from "react-icons/io5";
+
+interface ICFDellButton {
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export default function CFDellButton({
+  disabled,
+  onClick,
+}: ICFDellButton): ReactElement {
+  return (
+    <button disabled={disabled} onClick={onClick}>
+      <IoTrashBinOutline color={disabled ? "gray" : "red"} size={18} />
+    </button>
+  );
+}

src/components/CFHostDirectoriesInput/CFHostDirectoriesInput.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import FormInputText from "../FormInputText/FormInputText";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
+import CFDellButton from "../CFDellButton/CFDellButton";
 
 interface ICFHostDirectoriesInput {
   index: number;
@@ -15,10 +15,8 @@ export default function CFHostDirectoriesInput({
   formik,
   disabled,
 }: ICFHostDirectoriesInput): ReactElement {
-  console.log("formik.getFieldProps", formik.values.hostDirectories);
-
   return (
-    <div className="flex w-full  rounded-md border border-layer-light-100 p-4">
+    <div className="flex w-full  gap-3 rounded-md border border-layer-light-100 p-4">
       <FormInputText
         labelName="Host Directory:"
         labelInfoTip="Type a host directory."
@@ -45,15 +43,14 @@ export default function CFHostDirectoriesInput({
         inputTouched={formik.touched.hostDirectories?.[index]?.mountPath}
       />
 
-      <div className="flex items-center justify-center text-sm text-layer-light-800">
-        <CreateRobotFormDeleteButton
-          text="Delete"
+      <div className="flex items-center justify-center pt-2.5 text-sm text-layer-light-800">
+        <CFDellButton
+          disabled={disabled}
           onClick={() => {
             const hostDirectories = [...formik.values.hostDirectories];
             hostDirectories.splice(index, 1);
             formik.setFieldValue("hostDirectories", hostDirectories);
           }}
-          disabled={disabled}
         />
       </div>
     </div>

src/components/CodeEditor/CodeEditor.tsx

@@ -3,7 +3,7 @@ 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 "../RestartService/RestartService";
+import RestartService from "../RestartServiceButton/RestartServiceButton";
 import FullScreenButton from "../FullScreenButton/FullScreenButton";
 
 export default function CodeEditor(): ReactElement {

src/components/Connections/Connections.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement } from "react";
 import useRobot from "../../hooks/useRobot";
 import StateCell from "../TableInformationCells/StateCell";
 import ConnectionLabel from "../ConnectionLabel/ConnectionLabel";
@@ -8,10 +8,6 @@ export default function Connections(): ReactElement {
   const { responseRobot, isSettedCookie } = useRobot();
   const { keycloak } = useKeycloak();
 
-  useEffect(() => {
-    console.log("isSettedCookie", isSettedCookie);
-  }, [isSettedCookie]);
-
   return (
     <div className="flex gap-4">
       <div className="flex gap-1" id="ide">

src/components/CreateRobotFormAddButton/CreateRobotFormAddButton.tsx

@@ -18,7 +18,7 @@ export default function CreateRobotFormAddButton({
     <BsPlusCircle
       title={description}
       onClick={disabled ? () => {} : onClick}
-      size={22}
+      size={18}
       className={`animate__animated animate__fadeIn mx-auto mt-4 cursor-pointer transition-all duration-500 ${
         disabled
           ? "text-layer-light-600 hover:cursor-not-allowed"

src/components/FullScreenButton/FullScreenButton.tsx

@@ -10,8 +10,8 @@ export default function FullScreenButton({
   handleFullScreen,
 }: IFullScreenButton) {
   return (
-    <div
-      className="flex cursor-pointer flex-col items-center text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400"
+    <button
+      className="flex cursor-pointer flex-col items-center gap-1 text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400"
       onClick={handleFullScreen}
     >
       {isFullScreen ? (
@@ -26,6 +26,6 @@ export default function FullScreenButton({
         />
       )}
       <p className="text-[0.66rem]">Full Screen</p>
-    </div>
+    </button>
   );
 }

src/components/InputText/InputText.tsx

@@ -46,7 +46,7 @@ export default function InputText({
       <input
         autoComplete="off"
         disabled={disabled}
-        className={`h-10 w-full rounded-md border border-layer-light-300 p-3
+        className={`h-9 w-full rounded-md border border-layer-light-300 p-3
       text-sm  outline-none
        transition-all duration-500 focus:ring-2 focus:ring-primary disabled:cursor-not-allowed ${className}`}
         type={type || "text"}

src/components/MarketplaceSingleItemHeader/MarketplaceSingleItemHeader.tsx

@@ -9,8 +9,6 @@ interface IMarketplaceSingleİtemHeader {
 export default function MarketplaceSingleİtemHeader({
   responseItem,
 }: IMarketplaceSingleİtemHeader): ReactElement {
-  console.log(responseItem);
-
   return (
     <CardLayout className="col-span-1 h-52 p-4">
       <div className="flex h-full items-center gap-6">

src/components/RemoteDesktopController/RemoteDesktopController.tsx

@@ -1,5 +1,5 @@
 import { IoIosArrowUp, IoIosArrowDown } from "react-icons/io";
-import RestartService from "../RestartService/RestartService";
+import RestartService from "../RestartServiceButton/RestartServiceButton";
 import VolumeControl from "../VolumeControl/VolumeControl";
 import { ReactElement, useState } from "react";
 import { useKeycloak } from "@react-keycloak/web";

src/components/RestartService/RestartService.tsx → src/components/RestartServiceButton/RestartServiceButton.tsx

@@ -10,15 +10,15 @@ export default function RestartService({ type }: IRestartService) {
   const [isOpenedModal, setIsOpenedModal] = useState<boolean>(false);
 
   return (
-    <div className="flex cursor-pointer flex-col items-center text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400">
-      <IoReloadOutline size={26} onClick={() => setIsOpenedModal(true)} />
+    <button className="flex cursor-pointer flex-col items-center gap-1 text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400">
+      <IoReloadOutline size={24} onClick={() => setIsOpenedModal(true)} />
       <p className="text-[0.66rem]">{type === "soft-vdi" && "Soft"} Restart </p>
       {isOpenedModal && (
         <RestartServiceModal
           type={type}
           handleCloseModal={() => setIsOpenedModal(false)}
         />
       )}
-    </div>
+    </button>
   );
 }

src/contexts/MainContext.tsx

@@ -10,8 +10,8 @@ export default ({ children }: any) => {
   const url = useLocation();
 
   const [sidebarState, setSidebarState] = useState<ISidebarState>({
-    isOpen: true,
-    isCreateMode: true,
+    isOpen: false,
+    isCreateMode: false,
     page: undefined,
     instanceTab: "Cloud Instances",
   });