diff --git a/frontend/src/pages/cases/layout/CaseWrapper.js b/frontend/src/pages/cases/layout/CaseWrapper.js index 88826cec..a46b12c6 100644 --- a/frontend/src/pages/cases/layout/CaseWrapper.js +++ b/frontend/src/pages/cases/layout/CaseWrapper.js @@ -58,15 +58,17 @@ const CaseSidebar = ({ step, caseId }) => { )?.value; return ( - - navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`) - } - current={findStepPathValue ? findStepPathValue - 1 : 1} - /> +
+ + navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`) + } + current={findStepPathValue ? findStepPathValue - 1 : 1} + /> +
); }; diff --git a/frontend/src/pages/cases/layout/case-wrapper.scss b/frontend/src/pages/cases/layout/case-wrapper.scss index 8622d2df..4b187d9f 100644 --- a/frontend/src/pages/cases/layout/case-wrapper.scss +++ b/frontend/src/pages/cases/layout/case-wrapper.scss @@ -11,71 +11,73 @@ z-index: 2; overflow: auto; - .case-step-wrapper { + .case-step-container { min-height: 100vh; - padding-bottom: 75px !important; + padding-bottom: 75px; - .ant-steps-item { - // not active - .ant-steps-item-tail::after { - border: 1px solid #e1e0da; - } + .case-step-wrapper { + .ant-steps-item { + // not active + .ant-steps-item-tail::after { + border: 1px solid #e1e0da; + } - .ant-steps-item-icon { - border: 1px solid #e3e3e3; + .ant-steps-item-icon { + border: 1px solid #e3e3e3; + + .ant-steps-icon { + color: #979797; + text-align: center; + font-family: "RocGrotesk"; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 24px; + } + } - .ant-steps-icon { - color: #979797; - text-align: center; + .ant-steps-item-title { font-family: "RocGrotesk"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 24px; } - } - - .ant-steps-item-title { - font-family: "RocGrotesk"; - font-size: 14px; - font-style: normal; - font-weight: 700; - line-height: 24px; - } - .ant-steps-item-description { - color: #475467; - font-family: "TabletGothic"; - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 24px; - } - - // when active - &.ant-steps-item-active { - .ant-steps-item-tail::after { - border: 1px solid $primary-color; + .ant-steps-item-description { + color: #475467; + font-family: "TabletGothic"; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 24px; } - .ant-steps-item-icon { - border: 1px solid $primary-color; - box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1); - background: #eaf2f2; + // when active + &.ant-steps-item-active { + .ant-steps-item-tail::after { + border: 1px solid $primary-color; + } - .ant-steps-icon { - color: $primary-color; + .ant-steps-item-icon { + border: 1px solid $primary-color; + box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1); + background: #eaf2f2; + + .ant-steps-icon { + color: $primary-color; + } } } - } - // when finished - &.ant-steps-item-finish { - .ant-steps-item-icon { - border: 1px solid #48d985; - background: #48d985; + // when finished + &.ant-steps-item-finish { + .ant-steps-item-icon { + border: 1px solid #48d985; + background: #48d985; - .ant-steps-icon { - color: #fff; + .ant-steps-icon { + color: #fff; + } } } } diff --git a/frontend/src/pages/cases/steps/AssessImpactMitigationStrategies.js b/frontend/src/pages/cases/steps/AssessImpactMitigationStrategies.js index c69feeaf..8d76730e 100644 --- a/frontend/src/pages/cases/steps/AssessImpactMitigationStrategies.js +++ b/frontend/src/pages/cases/steps/AssessImpactMitigationStrategies.js @@ -1,4 +1,10 @@ -import React, { useCallback, useEffect, useState, useMemo } from "react"; +import React, { + useCallback, + useEffect, + useState, + useMemo, + useRef, +} from "react"; import { useNavigate } from "react-router-dom"; import { stepPath, @@ -36,6 +42,7 @@ import { determineDecimalRound, } from "../../../lib"; import { thousandFormatter } from "../../../components/chart/options/common"; +import { LeftOutlined, RightOutlined } from "@ant-design/icons"; /** * STEP 4 @@ -57,6 +64,8 @@ const AssessImpactMitigationStrategies = ({ const [percentageSensitivity, setPercentageSensitivity] = useState(true); const [adjustedValues, setAdjustedValues] = useState({}); + const carouselChartRef = useRef(null); + const [messageApi, contextHolder] = message.useMessage(); // initial load adjusted income target @@ -433,8 +442,26 @@ const AssessImpactMitigationStrategies = ({ {/* Carousel */} - - + +
+
+
+
+
+
+
diff --git a/frontend/src/pages/cases/steps/steps.scss b/frontend/src/pages/cases/steps/steps.scss index 72ad38f8..b9f977d7 100644 --- a/frontend/src/pages/cases/steps/steps.scss +++ b/frontend/src/pages/cases/steps/steps.scss @@ -361,6 +361,27 @@ } #assess-impact-mitigation-strategies { + .carousel-container { + width: 100%; + position: relative; + + .carousel-arrows-wrapper { + position: absolute; + z-index: 2; + height: 100%; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-left: -12px; + + .button-arrow-carousel { + border-radius: 22px; + background: #01625f; + color: #fff; + } + } + } .ant-carousel { .slick-dots { li {