Layout changes

ui/src/components/Card/card.scss

@@ -36,7 +36,7 @@
   border-top: 1px solid $color-brand-secondary-lightest;
   border-radius: 0 0 0.5rem 0.5rem;
   height: 59.008px;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 0.9375rem 1.875rem;
   align-items: center;
 }
@@ -45,7 +45,11 @@
   padding: 0;
   text-align: center;
 }
+.ProjectCard__Staus-unit {
+  padding: 0 1em;
+}
 .ProjectCard__unit {
+  border-left: 1px solid $color-brand-secondary-lightest;
   padding: 0 1em;
 }
 .ProjectCard__unit:not(:last-child) {
@@ -57,25 +61,51 @@
   justify-content: center;
 }
 .ProjectCard__stats-category {
-  color: $color-font-active;
-  font-size: $size-font-small;
-  font-weight: $font-weight-regular;
-  line-height: 1.42;
+  border: 1px solid $color-brand-secondary-lightest;
+  border-radius: 8px;
+  font-size: $size-font-large;
+  color: $color-black-2121;
+  padding: 4px 8px;
+  text-transform: capitalize;
+  svg {
+    margin-right: 5px;
+  }
+  &.draft {
+    border-color: $color-brand-draft-base;
+    background-color: $color-brand-draft-light;
+    svg {
+      stroke: $color-brand-draft-base;
+      fill: none;
+    }
+  }
+  &.completed {
+    background-color: $color-brand-success-light;
+    border-color: $color-brand-success-base;
+  }
+  &.failed {
+    background-color: $color-brand-fail-light;
+    border-color: $color-brand-fail-base;
+  }
+  &.pending {
+    background-color: $color-brand-attention-light;
+    border-color: $color-brand-attention-base;
+  }
 }
-.ProjectCard__stats-number {
+.ProjectCard__stats-Title {
+  color: $color-stepper-title;
   display: block;
-  font-size: $size-font-large;
-  font-weight: $font-weight-semi-bold;
-  letter-spacing: 0.00875rem;
-  line-height: 150%;
+  font-size: $size-font-small;
   margin-bottom: $space-4;
 }
 .validation-color {
   color: $color-brand-warning-medium;
 }
 .ProjectCard__cms {
-  font-size: $size-font-small;
-  color: $color-font-black;
+  border: 1px solid $color-brand-secondary-lightest;
+  border-radius: 8px;
+  font-size: $size-font-large;
+  color: $color-font-base;
+  padding: 4px 8px;
   text-transform: capitalize;
 }
 .ProjectCard__modified-date {

ui/src/components/Card/index.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Tooltip, Icon } from '@contentstack/venus-components';
 import { useNavigate } from 'react-router-dom';
 // Utilities
-import { PROJECT_STATUS } from '../../utilities/constants';
+import { NEW_PROJECT_STATUS } from '../../utilities/constants';
 import { getDays, isEmptyString } from '../../utilities/functions';
 import { AppContext } from '../../context/app/app.context';
 // Interface
@@ -23,6 +23,29 @@ const CardList = ({ project }: ProjectType) => {
     if (isEmptyString(id)) return;
     navigate(`/projects/${id}/migration/steps/1`);
   };
+  const iconMapping: { [key: string]: string } = {
+    '0': 'Information',
+    '1': 'WarningBold',
+    '2': 'WarningBold',
+    '3': 'WarningBold',
+    '4': 'WarningBold',
+    '5': 'CheckCircle',
+    '6': 'CloseBorder',
+  };
+  const statusClassMapping: { [key: string]: string } = {
+    '0': 'draft',
+    '1': 'pending',
+    '2': 'pending',
+    '3': 'pending',
+    '4': 'pending',
+    '5': 'completed',
+    '6': 'failed',
+  };
+  const status = project?.status ?? '0';
+  const statusClass = statusClassMapping[status] || '';
+  const icon = iconMapping[status] || '';
+  const statusText = NEW_PROJECT_STATUS[status];
+
   useEffect(() => {
     const fetchProject = async () => {
       if (selectedOrganisation?.value && project?.id) {
@@ -35,7 +58,6 @@ const CardList = ({ project }: ProjectType) => {
     fetchProject();
   }, [selectedOrganisation?.value, project?.id]);
 
-
   return (
     <div style={{ padding: '0 20px 20px 0' }}>
       <div onClick={() => onClickProject(project?.id || '')}>
@@ -46,17 +68,21 @@ const CardList = ({ project }: ProjectType) => {
             </div>
             <div className="ProjectCard__content">
               <div className="ProjectCard__stats">
+                <div className='ProjectCard__Staus-unit'>
+                  <span className="ProjectCard__stats-Title">Source</span>
+                  <div className="ProjectCard__cms">{projectDetails ? projectDetails : '-'}</div>
+                </div>
                 <div className="ProjectCard__unit">
-                  <span className="ProjectCard__stats-number">Project Status</span>
-                  <span className="ProjectCard__stats-category">
-                    {PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]}
-                  </span>
+                  <span className="ProjectCard__stats-Title">Project Status</span>
+                  <div className={`ProjectCard__stats-category ${statusClass}`}>
+                    {icon && <Icon size="small" icon={icon} version="v2" />}
+                    {statusText}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div className="ProjectCard__footer">
-            <div className="ProjectCard__cms">{projectDetails}</div>
             <div className="tippy-wrapper" data-test-id="cs-tooltip">
               <div className="ProjectCard__modified flex-v-center">
                 <Tooltip content="Last Modified" position="top" type="primary" variantType="basic">

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

@@ -55,7 +55,10 @@
 }
 
 .PageLayout--full-screen .PageLayout__head {
+  position: relative;
   border-bottom: 1px solid rgb(226, 235, 248);
   box-shadow: rgba(226, 235, 248, 0.15) 0 $space-10 15px;
   border: 1px solid rgba(204, 204, 204, 0.6);
+  margin-top: 3.5rem;
+  z-index: 8;
 }

ui/src/components/DestinationStack/index.tsx

@@ -4,8 +4,7 @@ import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper'
 import { getDestinationStackSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button, CircularLoader } from '@contentstack/venus-components';
-//import { getEntries } from '../../services/contentstackSDK';
-import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
+import { CS_ENTRIES } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
 import {
   DEFAULT_DESTINATION_STACK_DATA,

ui/src/components/LegacyCms/index.tsx

@@ -5,7 +5,7 @@ import { getLegacyCMSSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button, CircularLoader } from '@contentstack/venus-components';
 // import { getEntries } from '../../services/contentstackSDK';
-import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
+import { CS_ENTRIES } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
 import {
   DEFAULT_CMS_TYPE,

ui/src/components/MainHeader/index.tsx

@@ -96,39 +96,38 @@ const MainHeader = () => {
     dispatch(setSelectedOrganisation(data));
     setDataInLocalStorage('organization', data?.value);
   };
-
   return (
     <div className="mainheader">
       <div className="container-fluid">
         <div className="row align-items-center">
           <div className="col-6 d-flex align-items-center">
             {logo?.image?.url ? (
               <div className="logo">
-                <Tooltip position="right" content="Stacks" wrapperElementType="div">
+                <Tooltip position="right" content="Projects" wrapperElementType="div">
                   <Link to={`${logo?.url}`}>
-                    <img src={logo?.image?.url} className="w-100" alt="Contentstack Logo" />
+                    <img src={logo?.image?.url} width={26} alt="Contentstack Logo" />
                   </Link>
                 </Tooltip>
               </div>
             ) : (
               ''
             )}
 
-            <div className="organisationWrapper">
-              <Dropdown
-                withSearch
-                headerLabel={organizationLabel}
-                closeAfterSelect
-                highlightActive
-                list={orgsList}
-                type="select"
-                withArrow
-                onChange={handleOnDropDownChange}
-              ></Dropdown>
-            </div>
+            {location.pathname === '/projects' && <div className="organisationWrapper">
+            <Dropdown
+              withSearch
+              headerLabel={organizationLabel}
+              closeAfterSelect
+              highlightActive
+              list={orgsList}
+              type="select"
+              withArrow
+              onChange={handleOnDropDownChange}
+            ></Dropdown>
+            </div>}
           </div>
 
-          <div className="col-6 flex-end">
+          {(location.pathname == '/projects' || location.pathname.includes('/projects/')) && <div className="col-6 flex-end">
             <div className="Dropdown-wrapper">
               <Dropdown
                 list={[
@@ -143,7 +142,7 @@ const MainHeader = () => {
                 <div className="user-short-name flex-v-center flex-h-center">{name}</div>
               </Dropdown>
             </div>
-          </div>
+          </div>}
         </div>
       </div>
     </div>

ui/src/components/ProjectsHeader/index.tsx

@@ -67,7 +67,7 @@ const ProjectsHeader = ({
           className="ml-10"
           onClick={handleModal}
           version="v2"
-          size="small"
+          size="medium"
           aria-label={cta?.title}
         >
           {cta?.with_icon && (

ui/src/components/SideBar/index.scss

@@ -0,0 +1,6 @@
+@import '../../scss/variables';
+.recycle-wrapper {
+    margin-top: -1px;
+    background-color: $color-brand-white-base;
+    z-index: 99;
+}

ui/src/components/SideBar/index.tsx

@@ -0,0 +1,15 @@
+// Libraries
+import { Icon } from '@contentstack/venus-components';
+// Styles
+import './index.scss';
+
+const SideBar = () => {
+  return (
+    <div className="side-nav side-nav--full recycle-wrapper" style={{ width: '56px', padding: '20px' }}>
+        {location.pathname == '/projects' && <Icon size="small" icon="Restore" version="v2" />}
+        {location.pathname.includes('/projects/') && <Icon size='small' icon='StackSettings' version="v2" />}
+    </div>
+  );
+};
+
+export default SideBar;

ui/src/components/layout/AppLayout/index.tsx

@@ -1,9 +1,9 @@
 // Libraries
 import { FC, ReactNode, useEffect } from 'react';
 import { useLocation } from 'react-router';
-
 // Component
 import MainHeader from '../../MainHeader';
+import SideBar from '../../SideBar';
 import { getUserDetails } from '../../../store/slice/authSlice';
 import { useDispatch } from 'react-redux';
 
@@ -22,8 +22,13 @@ const AppLayout: FC<IProps> = ({ children }) => {
 
   return (
     <>
-      {location.pathname === '/projects' && <MainHeader />}
-      <div className="page-wrapper">
+      {location.pathname.includes('projects') && 
+        <>
+        <MainHeader />
+        <SideBar /> 
+        </>
+      }
+      <div className={`${(location.pathname.includes('projects')) ? 'sidebarWrapper' : ''} page-wrapper`}>
         <div
           className={
             location.pathname !== '/login' && location.pathname !== '/forgot-password'

ui/src/pages/Projects/index.scss

@@ -26,6 +26,8 @@
       .PageLayout__head {
         border-top: 0 none;
         height: auto;
+        border-bottom: 1px solid $color-brand-secondary-lightest;
+        padding:20px;
       }
     }
   }

ui/src/scss/App.scss

@@ -41,15 +41,18 @@
 }
 
 .page-wrapper {
-  // align-items: center;
   background-color: $color-base-white-10;
   display: flex;
   height: 100vh;
+  margin-left: auto;
   .Icon--original {
     height: 1.25rem;
     width: 1.25rem;
   }
 }
+.sidebarWrapper {
+  width: calc(100% - 55px);
+}
 .section {
   padding-bottom: 90px;
   padding-top: 90px;
@@ -340,7 +343,7 @@ h2 {
     }
     .PageLayout__head {
       & > .PageHeader {
-        padding-right: $px-20;
+        padding-right: $px-10;
       }
     }
   }

ui/src/scss/_variables.scss

@@ -11,10 +11,15 @@ $color-base-black-51: #00000033;
 $color-base-black-31: #0000001f;
 $color-base-black-36: #00000024;
 $color-base-purple: #c33cf8;
+$color-brand-draft-base: #0469E3;
+$color-brand-draft-light: #F5FDFF;
 $color-brand-success-base: #007a52;
+$color-brand-success-light: #f5fffc;
 $color-brand-attention-base: #ffae0a;
 $color-brand-attention-dark: #704b00;
 $color-brand-attention-light: #fff8eb;
+$color-brand-fail-base: #A31B00;
+$color-brand-fail-light: #FFF0ED;
 $color-font-white: #ffffff;
 $color-font-mercury: #ebebeb;
 $color-font-base: #475161;

ui/src/utilities/constants.ts

@@ -73,6 +73,16 @@ export const PROJECT_STATUS: ObjectType = {
   '6': 'Migration terminated'
 };
 
+export const NEW_PROJECT_STATUS: ObjectType = {
+  '0': 'Draft',
+  '1': 'In progress',
+  '2': 'In progress',
+  '3': 'In progress',
+  '4': 'In progress',
+  '5': 'Completed',
+  '6': 'Failed'
+};
+
 export const isOfflineCMSDataRequired = process.env.REACT_APP_OFFLINE_CMS
   ? process.env.REACT_APP_OFFLINE_CMS
   : true;