[CMG-178][CMG-177]

ui/src/cmsData/legacyCms.json

@@ -350,7 +350,7 @@
         "uid": "cs7c935e15de9ea7c8"
       },
       "title": "File Format",
-      "description": "Click to read the document and subsequently continue with migration process.",
+      "description": "The file format compatible with the above cms is as follows.",
       "step_lock_text": "Editing this step is currently disabled. To make changes in Draft mode, please deactivate the migration.",
       "lock": false,
       "active": true,
@@ -362,7 +362,7 @@
         "uid": "cs0279f1f0ce13e83e"
       },
       "title": "Imported File",
-      "description": "Select File to upload CMS Data.",
+      "description": "The uploaded file is as follows.",
       "step_lock_text": "Editing this step is currently disabled. To make changes in Draft mode, please deactivate the migration.",
       "lock": false,
       "active": true,

ui/src/components/Common/Card/card.tsx

@@ -1,4 +1,4 @@
-import { Icon, Radio, Tooltip } from '@contentstack/venus-components';
+import { Icon, Paragraph, Radio, Tooltip } from '@contentstack/venus-components';
 import { MouseEvent, useState } from 'react';
 import WordWrapper from '../WordWrapper/WordWrapper';
 import { addDomainInPath } from '../../../utilities/functions';
@@ -72,7 +72,7 @@ const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: Car
       <div className="service_icon">
       </div>
       <div className="centered-card-title">
-        <WordWrapper tooltipcontent={data.title} text={data.title} maxLength={12} position="top" />
+        <Paragraph variantStyle={'bold'} variant={'p2'} text={data.title}/>
       </div>
     </div>
   );

ui/src/components/DestinationStack/index.tsx

@@ -215,6 +215,7 @@ const DestinationStackComponent = ({
             description={migrationData?.destinationStackData?.description}
             ref={autoVerticalStepperComponent}
             isEdit={!isMigrationLocked}
+            isRequired={false}
             handleOnAllStepsComplete={handleAllStepsComplete}
           />
         </div>

ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx

@@ -101,7 +101,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
 
   return (
     <div className="row">
-        <div className="service_list">
+        <div className="service_list_legacy">
           {validateArray(allowed_file_formats) ? (
             allowed_file_formats?.map((data: ICardType, index: number) => (
               <div key={data?.fileformat_id || index}>             

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -204,7 +204,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
            :
           (
             cmsData && validateArray(cmsData) && (
-            <div className="service_list">
+            <div className="service_list_legacy">
               {cmsData?.map((data: ICMSType) => (
                 <Card
                   key={data?.title}

ui/src/components/LegacyCms/index.tsx

@@ -237,6 +237,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted
                   migrationData?.legacyCMSData?.all_steps
                 )}
                 isEdit={!isMigrationLocked}
+                isRequired={true}
                 handleOnAllStepsComplete={handleAllStepsComplete}
                 stepComponentProps={{
                   handleDeleteFile: handleOnClickDeleteUploadedFile

ui/src/components/LegacyCms/legacyCms.scss

@@ -1,10 +1,10 @@
 @import '../../scss/variables';
-.service_list {
+.service_list_legacy {
   text-align: center;
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin: 20px 20px !important;
+  gap: 12px ;
+  margin: 20px 20px ;
 }
 
 .pl-40 {
@@ -105,6 +105,7 @@
 }
 .validation-cta{
   margin: $space-24 $space-20 0;
+  line-height: 24px;
 }
 .success{
   color: $color-brand-success-base;

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss

@@ -41,7 +41,7 @@
   }
   &.active .badge {
     background-color: white;
-    border: 0.063rem solid $color-brand-primary-base;
+    border: $px-2 solid $color-brand-primary-base;
     color: #6E6B86;
     width: 40px;
     height: 40px;
@@ -52,7 +52,7 @@
     justify-content: center;
     align-items: center;
     background-color: white;
-    border: 0.063rem solid $color-brand-primary-base;
+    border: 0.063rem solid $color-stepper-title;
     color: #6E6B86;
     width: 40px;
     height: 40px;
@@ -66,6 +66,7 @@
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
+    font-family: Inter;
 
   }
   &.disableEvents{

ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss

@@ -13,16 +13,17 @@
 .migration-vertical-stepper .stepper-title {
   margin-bottom: $space-10;
   margin: 10px 20px;
-
+  color: $color-font-base;
+  line-height: 21px;
 
 }
 
 .migration-vertical-stepper .stepper-discription {
-  font-family: $font-family-primary;
+  font-family: 'Inter';
   font-style: normal;
   font-weight: $font-weight-regular;
   font-size: $size-font-large;
-  line-height: 185%;
+  line-height: 21px;
   color: $color-base-gray-20;
   margin-bottom: $space-10;
   margin: 10px 20px;
@@ -45,6 +46,7 @@
   height: 2rem;
   left: -17px;
   overflow-y: auto;
+  color: #475161 !important;
 }
 
 .stepper-titleNote {
@@ -116,4 +118,12 @@
     font-size: 14px;
     color: $color-stepper-title;
   }
+}
+.asterisk_input::after {
+  content:" *"; 
+  color: $color-brand-warning-medium;
+  margin: 2px 0px 0px -15px; 
+  font-size:medium; 
+  padding: 10px 5px 0 0 !important; 
+  padding-left: .25em;
 }

ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import './AutoVerticalStepper.scss';
-import { Tooltip, Heading } from '@contentstack/venus-components';
-import { addDomainInPath } from '../../../utilities/functions';
+import { Heading, Paragraph } from '@contentstack/venus-components';
 
 
 export enum StepStatus {
@@ -16,6 +15,7 @@ type AutoVerticalStepperProps = {
   description?: string;
   stepComponentProps?: any;
   isEdit: boolean;
+  isRequired:boolean;
   handleOnAllStepsComplete: (flag: boolean) => void;
 };
 
@@ -76,14 +76,16 @@ const AutoVerticalStepper = React.forwardRef<
       }
     };
 
-    const StepperStepTitleCreator: (data: any) => JSX.Element = (data: any) => {
+    const StepperStepTitleCreator: (data: any,isRequired:boolean) => JSX.Element = (data: any, isRequired:boolean) => {
       const showSpan = data?.title == 'Orgnization' ? <span>(read only)</span> : ''
       return (
         <>
           <div className="migration-vertical-stepper-container">
             <div>
               <div className='orgWrapper'>
                 <Heading className='stepper-title' tagName='h3' text={data.title} />
+                {isRequired && <span className="asterisk_input">  </span>  }    
+
                 {data?.ifReadonly && <span>(read only)</span>}
               </div>
               <span className="stepper-titleNote">{data.titleNote ? data.titleNote : ''}</span>
@@ -153,7 +155,6 @@ const AutoVerticalStepper = React.forwardRef<
       const getStepStatus = (idx: number) => {
         return stepStatus[idx];
       };
-
       return (
         <div className={`migration-vertical-stepper  ${className}`}>
           {props?.description && <div>{props?.description}</div>}
@@ -173,7 +174,7 @@ const AutoVerticalStepper = React.forwardRef<
                   style={{ paddingBottom: '10px' }}
                 >
                   <div className={`step__title `}>
-                    {StepperStepTitleCreator(step)}
+                    {StepperStepTitleCreator(step, props?.isRequired)}
                   </div>
                   <div className="step-content-wrapper">
                     <div className="action-content step-content">