refactor(forms): 🎉 update form label and tips

public/css/style.css

@@ -1316,8 +1316,8 @@ video {
   width: 50vw;
 }
 
-.w-\[60vw\] {
-  width: 60vw;
+.w-\[80vw\] {
+  width: 80vw;
 }
 
 .w-\[8px\] {
@@ -1343,10 +1343,6 @@ video {
   width: max-content;
 }
 
-.w-\[80vw\] {
-  width: 80vw;
-}
-
 .min-w-\[12rem\] {
   min-width: 12rem;
 }

src/components/CFAdvancedSettings/CFAdvancedSettings.tsx

@@ -1,13 +1,13 @@
-import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
-import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
-import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
-import { IDetails } from "../../interfaces/robotInterfaces";
-import CFPortSetter from "../CFPortSetter/CFPortSetter";
-import Accordion from "../Accordion/AccordionV2";
-import { FormikProps } from "formik/dist/types";
 import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
 import Seperator from "../Seperator/Seperator";
+import { FormikProps } from "formik/dist/types";
+import Accordion from "../Accordion/AccordionV2";
+import CFPortSetter from "../CFPortSetter/CFPortSetter";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
+import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
+import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
 
 interface ICFAdvancedSettings {
   formik: FormikProps<IDetails>;

src/components/CFAppName/CFAppName.tsx

@@ -15,7 +15,7 @@ export default function CFAppName({
   return (
     <FormInputText
       labelName="Application Name:"
-      labelInfoTip="Type a new application name."
+      labelInfoTip="You can specify the name of your application here."
       dataTut="create-application-step1-name"
       disabled={formik.isSubmitting || disabled}
       inputHoverText="You can't change application name because this application is created before."

src/components/CFConfigWorkspaces/CFConfigWorkspaces.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from "react";
 import FormInputToggle from "../FormInputToggle/FormInputToggle";
-import { IRobotStep1 } from "../../interfaces/robotInterfaces";
+import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFConfigWorkspaces {
-  formik: FormikProps<IRobotStep1>;
+  formik: FormikProps<IDetails>;
   disabled?: boolean;
 }
 
@@ -15,7 +15,7 @@ export default function CFConfigWorkspaces({
   return (
     <FormInputToggle
       labelName="Configure Workspaces:"
-      labelInfoTip="Configure Workspaces"
+      labelInfoTip="If you want to specify workspaces, you can do so here."
       dataTut="create-robot-step1-ros2-bridge"
       disabled={disabled}
       checked={formik?.values?.configureWorkspace}

src/components/CFEnvCategories/CFEnvCategories.tsx

@@ -42,8 +42,8 @@ export default function CFEnvCategories({
   return (
     <Fragment>
       <CFInfoBar
-        label="Image Categories"
-        tip="Select a image category."
+        label="Application Categories:"
+        tip="You can choose the image category and application here."
         dataTut="create-application-step1-environment-selector"
         error={formik.errors.application?.name}
         touched={true}

src/components/CFGpuTypes/CFGpuTypes.tsx

@@ -44,8 +44,8 @@ export default function CFGpuTypes({
 
   return (
     <CFInfoBar
-      label="GPU Types"
-      tip="Select the GPU type for Instance. If you have 1 available core, you can not select it. Because you need minimum 2 core for Application."
+      label="GPU Models:"
+      tip="You can choose the GPU model here."
       vertical
       error={formik.errors.ideGpuResourceType}
       touched={true}

src/components/CFGrantDirTags/CFGrantDirTags.tsx

@@ -40,7 +40,7 @@ export default function CFGrantDirTag({
     <div>
       <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-layer-light-700">
         Granted Directories:
-        <InfoTip content="Type a granted directories." />
+        <InfoTip content="Here you can specify the directories that the user needs to access." />
       </div>
 
       <div>

src/components/CFGridItem/CFGridItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 interface ICFGridItem {
   selected: boolean;
@@ -17,7 +17,7 @@ export default function CFGridItem({
 }: ICFGridItem): ReactElement {
   return (
     <div
-      className={`transition-300 animate__animated animate__fadeIn flex items-center justify-center rounded-lg border-2 px-1 py-3 text-xs  text-layer-dark-700
+      className={`transition-300 animate__animated animate__fadeIn flex items-center justify-center rounded-lg border-2 px-1 py-3 text-xs  capitalize text-layer-dark-700
         ${selected && " shadow"}
         ${
           disabled ? "cursor-not-allowed" : "cursor-pointer hover:scale-[0.98] "

src/components/CFHostDirectories/CFHostDirectories.tsx

@@ -18,7 +18,7 @@ export default function CFHostDirectories({
     <div>
       <CFInfoBar
         label="Host Directories:"
-        tip="Type a host directories."
+        tip="You can link a directory on the host to the directory specified in the application here."
         vertical
       >
         <div className="flex flex-col gap-2">

src/components/CFPersistDirTags/CFPersistDirTags.tsx

@@ -55,7 +55,7 @@ export default function CFPersistDirTags({
   return (
     <CFInfoBar
       label="Persistent Directories:"
-      tip="Type a persistent directories."
+      tip="Here you can persist directorys on the application."
       vertical
     >
       <TagsInput

src/components/CFPortSetter/CFPortSetter.tsx

@@ -54,7 +54,9 @@ export default function CFPortSetter({
     <div>
       <CFInfoBar
         label={`Custom Port Exposure From ${type === "ide" ? "IDE" : "VDI"}:`}
-        tip="Type a ports with name."
+        tip={`Here you can specify the custom ports you want your application running in the ${
+          type === "ide" ? "IDE" : "VDI"
+        } service to expose.`}
         vertical
       >
         <div className="flex flex-col gap-2">

src/components/CFRepositoryItem/CFRepositoryItem.tsx

@@ -1,18 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { ReactElement, useState } from "react";
-import Accordion from "../Accordion/AccordionV2";
-import {
-  IRobotWorkspace,
-  IRobotWorkspaces,
-} from "../../interfaces/robotInterfaces";
-import { FormikProps } from "formik/dist/types";
+import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
+import { FormikProps } from "formik/dist/types";
+import Accordion from "../Accordion/AccordionV2";
 import CFRepositoryName from "../CFRepositoryName/CFRepositoryName";
+import { IWorkspace, IWorkspaces } from "../../interfaces/robotInterfaces";
 import CFRepositoryURLBranch from "../CFRepositoryURLBranch/CFRepositoryURLBranch";
 import CFDeleteRepositoryButton from "../CFDeleteRepositoryButton/CFDeleteRepositoryButton";
 interface ICFRepositoryItem {
-  formik: FormikProps<IRobotWorkspaces>;
-  repository: IRobotWorkspace;
+  formik: FormikProps<IWorkspaces>;
+  repository: IWorkspace;
   repositoryIndex: number;
   workspaceIndex: number;
   disabled?: boolean;

src/components/CFRepositoryMapper/CFRepositoryMapper.tsx

@@ -1,12 +1,12 @@
 import { ReactElement } from "react";
-import CFWorkspaceHeader from "../CFWorkspaceHeader/CFWorkspaceHeader";
-import CFRepositoryItem from "../CFRepositoryItem/CFRepositoryItem";
 import { FormikProps } from "formik/dist/types";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
+import CFRepositoryItem from "../CFRepositoryItem/CFRepositoryItem";
+import CFWorkspaceHeader from "../CFWorkspaceHeader/CFWorkspaceHeader";
 import CFAddRepositoryButton from "../CFAddRepositoryButton/CFAddRepositoryButton";
 
 interface ICFRepositoryMapper {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
 }
 

src/components/CFRepositoryName/CFRepositoryName.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from "react";
 import FormInputText from "../FormInputText/FormInputText";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFRepositoryName {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
   repositoryIndex: number;
   disabled?: boolean;
@@ -20,7 +20,7 @@ export default function CFRepositoryName({
     <FormInputText
       dataTut="create-robot-step2-workspace-repository-name"
       labelName="Repository Name:"
-      labelInfoTip="Type a repository name."
+      labelInfoTip="You can specify the name of your repository here."
       inputProps={formik.getFieldProps(
         `workspaces.${workspaceIndex}.robotRepositories.${repositoryIndex}.name`,
       )}

src/components/CFRepositoryURL/CFRepositoryURL.tsx

@@ -18,7 +18,7 @@ export default function CFRepositoryURL({
     <FormInputText
       dataTut="create-robot-step2-workspace-repository-url"
       labelName="Repository URL:"
-      labelInfoTip="Type a repository URL."
+      labelInfoTip="You can specify the URL of your repository here."
       inputProps={formik.getFieldProps(
         `workspaces.${workspaceIndex}.robotRepositories.${repositoryIndex}.url`,
       )}

src/components/CFRepositoryURLBranch/CFRepositoryURLBranch.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react";
 import CFRepositoryURL from "../CFRepositoryURL/CFRepositoryURL";
 import CFRepositoryBranch from "../CFRepositoryBranch/CFRepositoryBranch";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFRepositoryURLBranch {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
   repositoryIndex: number;
   disabled?: boolean;

src/components/CFStorageRange/CFStorageRange.tsx

@@ -1,11 +1,10 @@
-import { IRobotStep1 } from "../../interfaces/robotInterfaces";
-import { envOnPremiseRobot } from "../../helpers/envProvider";
-import FormInputRange from "../FormInputRange/FormInputRange";
+import { ReactElement } from "react";
 import { FormikProps } from "formik/dist/types";
-import React, { ReactElement } from "react";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import FormInputRange from "../FormInputRange/FormInputRange";
 
 interface ICFStorageRange {
-  formik: FormikProps<IRobotStep1>;
+  formik: FormikProps<IDetails>;
   disabled?: boolean;
 }
 
@@ -15,17 +14,8 @@ export default function CFStorageRange({
 }: ICFStorageRange): ReactElement {
   return (
     <FormInputRange
-      label={`${envOnPremiseRobot ? "Application" : "Robot"} Storage (${formik
-        ?.values?.robotStorage} GB):`}
-      tip={`Storage is the amount of disk space available to the ${
-        envOnPremiseRobot ? "application" : "robot"
-      }. This is where the ${
-        envOnPremiseRobot ? "application" : "robot"
-      }'s files and data are stored. The storage is persistent, meaning that it will not be deleted when the ${
-        envOnPremiseRobot ? "application" : "robot"
-      } is shut down. If you need more storage, you can not upgrade it later. You will need to create a new ${
-        envOnPremiseRobot ? "application" : "robot"
-      } with the desired storage size.`}
+      label={`Storage (${formik?.values?.robotStorage} GB):`}
+      tip={`You can determine how much storage space will be allocated for your application or robot here.`}
       dataTut="create-robot-step1-storage"
       InputProps={formik.getFieldProps("robotStorage")}
       min={20}

src/components/CFVDICount/CFVDICount.tsx

@@ -17,7 +17,7 @@ export default function CFVDICount({
   return (
     <FormInputRange
       label={`VDI Session Count (${formik.values.remoteDesktop.sessionCount} Sessions):`}
-      tip="Session Count is the number of simultaneous remote desktop sessions that can be created for the robot/application. Each session is independent of the other, meaning that each session can be used by a different user. The session count is expandable, meaning that you can increase the session count at any time."
+      tip="Here you can determine how many people can connect to your application's VDI service at the same time."
       dataTut="create-environment-vdi-session-count"
       InputProps={formik.getFieldProps("remoteDesktop.sessionCount")}
       min={2}

src/components/CFWorkspaceItem/CFWorkspaceItem.tsx

@@ -1,19 +1,16 @@
-import React, { ReactElement, useState } from "react";
-import Accordion from "../Accordion/AccordionV2";
-import {
-  IRobotWorkspace,
-  IRobotWorkspaces,
-} from "../../interfaces/robotInterfaces";
+import { ReactElement, useState } from "react";
+import CFSection from "../CFSection/CFSection";
 import { FormikProps } from "formik/dist/types";
-import CFWorkspaceItemAccordionHeader from "../CFWorkspaceItemAccordionHeader/CFWorkspaceItemAccordionHeader";
+import Accordion from "../Accordion/AccordionV2";
+import CFRepositoryMapper from "../CFRepositoryMapper/CFRepositoryMapper";
+import { IWorkspace, IWorkspaces } from "../../interfaces/robotInterfaces";
 import CFWorkspaceNameDistro from "../CFWorkspaceNameDistro/CFWorkspaceNameDistro";
-import CFSection from "../CFSection/CFSection";
 import CFDeleteWorkspaceButton from "../CFDeleteWorkspaceButton/CFDeleteWorkspaceButton";
-import CFRepositoryMapper from "../CFRepositoryMapper/CFRepositoryMapper";
+import CFWorkspaceItemAccordionHeader from "../CFWorkspaceItemAccordionHeader/CFWorkspaceItemAccordionHeader";
 
 interface ICFWorkspaceItem {
-  formik: FormikProps<IRobotWorkspaces>;
-  workspace: IRobotWorkspace;
+  formik: FormikProps<IWorkspaces>;
+  workspace: IWorkspace;
   workspaceIndex: number;
   workspaceState: string[];
   disabled?: boolean;

src/components/CFWorkspaceName/CFWorkspaceName.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from "react";
 import FormInputText from "../FormInputText/FormInputText";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFWorkspaceName {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
   disabled?: boolean;
 }
@@ -18,7 +18,9 @@ export default function CFWorkspaceName({
     <FormInputText
       dataTut="create-robot-step2-workspace-name"
       labelName="Workspace Name:"
-      labelInfoTip="Type a workspace name."
+      labelInfoTip="You can specify the name of your workspace here.
+
+"
       inputProps={formik.getFieldProps(`workspaces.${workspaceIndex}.name`)}
       classNameContainer="w-full"
       disabled={disabled}
@@ -27,7 +29,9 @@ export default function CFWorkspaceName({
         formik?.errors?.workspaces?.[workspaceIndex]?.name
       }
       inputTouched={formik?.touched?.workspaces?.[workspaceIndex]?.name}
-      inputHoverText="Type a workspace name."
+      inputHoverText="You can specify the name of your workspace here.
+
+"
     />
   );
 }

src/components/CFWorkspaceNameDistro/CFWorkspaceNameDistro.tsx

@@ -2,11 +2,11 @@ import React, { ReactElement } from "react";
 import CFWorkspaceName from "../CFWorkspaceName/CFWorkspaceName";
 import CFWorkspaceDistro from "../CFWorkspaceDistro/CFWorkspaceDistro";
 import { envOnPremiseRobot } from "../../helpers/envProvider";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFWorkspaceNameDistro {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
   disabled?: boolean;
 }

src/components/CFWorkspacesMapper/CFWorkspacesMapper.tsx

@@ -1,14 +1,11 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
+import { FormikProps } from "formik";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import CFWorkspaceItem from "../CFWorkspaceItem/CFWorkspaceItem";
-import { FormikProps } from "formik";
-import {
-  IRobotWorkspace,
-  IRobotWorkspaces,
-} from "../../interfaces/robotInterfaces";
+import { IWorkspace, IWorkspaces } from "../../interfaces/robotInterfaces";
 
 interface ICFWorkspacesMapper {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   responseRobot: any;
   isImportRobot?: boolean;
 }
@@ -26,7 +23,7 @@ export default function CFWorkspacesMapper({
       className="flex flex-col gap-2"
     >
       {robotData?.step2?.workspaces?.map(
-        (workspace: IRobotWorkspace, workspaceIndex: number) => {
+        (workspace: IWorkspace, workspaceIndex: number) => {
           return (
             <CFWorkspaceItem
               key={workspaceIndex}