[#391] Create VisualCardWrapper component

frontend/src/App.scss

@@ -389,3 +389,43 @@
   font-family: "TabletGothic" !important;
   font-size: 12px;
 }
+
+.visual-card-wrapper {
+  padding: 0;
+  border-radius: 20px;
+
+  .ant-card-head {
+    padding: 12px 24px;
+    background: #dfdfdf;
+    border-radius: 20px 20px 0px 0px;
+
+    .title {
+      font-family: "RocGrotesk";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 157.15%;
+    }
+
+    .button-export {
+      border: 1px solid #01625f;
+      font-weight: 600;
+      font-size: 12px;
+      background: transparent;
+      color: #01625f;
+      border-radius: 40px;
+
+      &:hover {
+        background: #01625f;
+        border: 1px solid #fff;
+        color: #fff;
+      }
+    }
+  }
+
+  .ant-card-body {
+    padding: 18px 24px;
+    border-radius: 0px 0px 20px 20px;
+    background: #fff;
+  }
+}

frontend/src/pages/cases/components/EnterIncomeDataVisual.js

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import { Card, Row, Col, Space } from "antd";
 import { CaseUIState, CurrentCaseState } from "../store";
 import { thousandFormatter } from "../../../components/chart/options/common";
+import { VisualCardWrapper } from ".";
 
 const EnterIncomeDataVisual = () => {
   const { activeSegmentId } = CaseUIState.useState((s) => s.general);
@@ -34,10 +35,14 @@ const EnterIncomeDataVisual = () => {
         </Card>
       </Col>
       <Col span={24}>
-        <Card>Household Income Bar Chart</Card>
+        <VisualCardWrapper title="Household Income">
+          Household Income Bar Chart
+        </VisualCardWrapper>
       </Col>
       <Col span={24}>
-        <Card>Household Income Table</Card>
+        <VisualCardWrapper title="Household Income">
+          Household Income Table
+        </VisualCardWrapper>
       </Col>
     </Row>
   );

frontend/src/pages/cases/components/VisualCardWrapper.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Row, Col, Card, Space, Button } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+
+const VisualCardWrapper = ({ children, title }) => {
+  return (
+    <Card
+      className="visual-card-wrapper"
+      title={
+        <Row align="middle" gutter={[8, 8]}>
+          <Col span={19}>
+            <Space align="center">
+              <div className="title">{title}</div>
+              <div>
+                <InfoCircleOutlined />
+              </div>
+            </Space>
+          </Col>
+          <Col span={5} align="end">
+            <Button size="small" className="button-export">
+              Export
+            </Button>
+          </Col>
+        </Row>
+      }
+    >
+      {children}
+    </Card>
+  );
+};
+
+export default VisualCardWrapper;

frontend/src/pages/cases/components/index.js

@@ -1,20 +1,9 @@
 export { default as AreaUnitFields } from "./AreaUnitFields";
-// export { default as SideMenu } from "./SideMenu";
-// export { default as CaseProfile } from "./CaseProfile";
-// export { default as DataFields } from "./DataFields";
-// export { default as IncomeDriverDataEntry } from "./IncomeDriverDataEntry";
-// export { default as IncomeDriverForm } from "./IncomeDriverForm";
-// export { default as IncomeDriverTarget } from "./IncomeDriverTarget";
-// export { default as IncomeDriverDashboard } from "./IncomeDriverDashboard";
-// export { default as DashboardIncomeOverview } from "./DashboardIncomeOverview";
-// export { default as DashboardSensitivityAnalysis } from "./DashboardSensitivityAnalysis";
-// export { default as DashboardScenarioModeling } from "./DashboardScenarioModeling";
-// export { default as Questions } from "./Questions";
-// export { default as Scenario } from "./Scenario";
 export { default as DebounceSelect } from "./DebounceSelect";
 export { default as CaseFilter } from "./CaseFilter";
 export { default as CaseSettings } from "./CaseSettings";
 export { default as SegmentForm } from "./SegmentForm";
 export { default as CaseForm } from "./CaseForm";
 export { default as EnterIncomeDataVisual } from "./EnterIncomeDataVisual";
 export { default as EnterIncomeDataForm } from "./EnterIncomeDataForm";
+export { default as VisualCardWrapper } from "./VisualCardWrapper";

frontend/src/pages/cases/steps/steps.scss

@@ -192,10 +192,15 @@
   padding: 40px 0;
 
   .income-target-wrapper {
+    padding: 0;
     border-radius: 20px;
     background: #01625f;
     color: #fff;
 
+    .ant-card-body {
+      padding: 12px 24px;
+    }
+
     .label {
       font-family: "TabletGothic";
       font-size: 14px;