Fix to improve user experience In Application Process

Author: Mugisha146

src/components/TraineeApply/TraineeApply.tsx

@@ -84,7 +84,7 @@ const TraineeApplicationForm: React.FC = () => {
         </div>
       ) : (
         <div className={getContainerClassName(isDarkMode)}>
-          <h2 className={getTitleClassName(isDarkMode)}>Trainee Application</h2>
+          <h2 className={getTitleClassName(isDarkMode)}>Application To Become Trainee</h2>
           <form onSubmit={handleSubmit} className="space-y-4 pt-5">
             <div className="flex">
               <div className="flex-1 p-4">

src/components/TraineeApply/TraineeAttributeForm.tsx

@@ -91,10 +91,10 @@ const TraineeAttributeForm = ({ traineeId }) => {
     <div className={`min-h-screen w-full flex flex-col ${
       isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
     }`}>
-      <div className="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="flex-grow flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
         <h3 className={`text-3xl font-semibold mb-8 text-center ${
           isDarkMode ? 'text-white' : 'text-gray-800'
-        }`}>Fill the form for more information</h3>
+        }`}>Provide more information to continue application</h3>
         <div className="w-full max-w-4xl">
           {page === 1 ? (
             <TraineeFormPage1

src/components/sidebar/sidebarItems.tsx

@@ -42,7 +42,7 @@ export const sidebarItems1 = [
   {
     path: "Trainee-applicants",
     icon: <Icon icon="ic:round-people"></Icon>,
-    title: "Trainees-Applicants",
+    title: "Trainees",
   },
   // {
   //   path: "Applicant-Stages",

src/pages/Applications/ApplicantApplication.tsx

@@ -93,7 +93,7 @@ export const ApplicantApplication = () => {
             to="/applicant/available-jobs/trainee-apply"
             className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 mt-2 px-4 text-white font-medium cursor-pointer"
           >
-            Become trainee
+            Apply To Become Trainee
           </Link>
           <Link
             to="/applicant/myapplication"

src/pages/TraineApplicant/Trainee.tsx

@@ -255,7 +255,7 @@ const AddTrainee = (props: any) => {
                         className="inline-flex items-center justify-center bg-primary dark:bg-[#56C870] rounded-md py-2 px-3 sm:px-4 text-white font-medium cursor-pointer text-sm sm:text-base whitespace-nowrap"
                       >
                         <icons.AiOutlinePlus className="mr-1.5 text-lg flex-shrink-0" />
-                        <span className="truncate">Trainee-applicant</span>
+                        <span className="truncate">Trainee</span>
                       </button>
                       <Select
                         menuPlacement="auto"