diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index 336343444..a16bbc3a9 100644 --- a/ui/src/components/Card/card.scss +++ b/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 { diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx index 4f934159d..a2acbb4ae 100644 --- a/ui/src/components/Card/index.tsx +++ b/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 (
onClickProject(project?.id || '')}> @@ -46,17 +68,21 @@ const CardList = ({ project }: ProjectType) => {
+
+ Source +
{projectDetails ? projectDetails : '-'}
+
- Project Status - - {PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]} - + Project Status +
+ {icon && } + {statusText} +
-
{projectDetails}
diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss index 288599138..9e57a1630 100644 --- a/ui/src/components/Common/Card/card.scss +++ b/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; } diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx index 2384efbc3..edab50b29 100644 --- a/ui/src/components/DestinationStack/index.tsx +++ b/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, diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx index 31275556c..8aea035b1 100644 --- a/ui/src/components/LegacyCms/index.tsx +++ b/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, diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index baf94b403..9882334d0 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -96,7 +96,6 @@ const MainHeader = () => { dispatch(setSelectedOrganisation(data)); setDataInLocalStorage('organization', data?.value); }; - return (
@@ -104,9 +103,9 @@ const MainHeader = () => {
{logo?.image?.url ? (
- + - Contentstack Logo + Contentstack Logo
@@ -114,21 +113,21 @@ const MainHeader = () => { '' )} -
- -
+ {location.pathname === '/projects' &&
+ +
}
-
+ {(location.pathname == '/projects' || location.pathname.includes('/projects/')) &&
{
{name}
-
+
}
diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index 4d7b0f45d..0a2683734 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/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 && ( diff --git a/ui/src/components/SideBar/index.scss b/ui/src/components/SideBar/index.scss new file mode 100644 index 000000000..dc581bd62 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/ui/src/components/SideBar/index.tsx b/ui/src/components/SideBar/index.tsx new file mode 100644 index 000000000..880f49d1e --- /dev/null +++ b/ui/src/components/SideBar/index.tsx @@ -0,0 +1,15 @@ +// Libraries +import { Icon } from '@contentstack/venus-components'; +// Styles +import './index.scss'; + +const SideBar = () => { + return ( +
+ {location.pathname == '/projects' && } + {location.pathname.includes('/projects/') && } +
+ ); +}; + +export default SideBar; diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx index 24477fb06..e50e7c546 100644 --- a/ui/src/components/layout/AppLayout/index.tsx +++ b/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 = ({ children }) => { return ( <> - {location.pathname === '/projects' && } -
+ {location.pathname.includes('projects') && + <> + + + + } +
.PageHeader { - padding-right: $px-20; + padding-right: $px-10; } } } diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index 2943765e9..9be2eea79 100644 --- a/ui/src/scss/_variables.scss +++ b/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; diff --git a/ui/src/utilities/constants.ts b/ui/src/utilities/constants.ts index 41b947b3f..b41d375bc 100644 --- a/ui/src/utilities/constants.ts +++ b/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;