[#383] Load cases data in new case page

akvo · Jan 6, 2025 · 460700c · 460700c
1 parent 1d34423
commit 460700c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -47,6 +47,13 @@
     color: #ffffff !important;
     font-weight: 700;
   }
+
+  .button-ghost {
+    background: transparent;
+    border-radius: 20px;
+    border-color: #000;
+    font-weight: 700;
+  }
   // EOL global css setting
 
   header {
@@ -183,12 +190,17 @@
           color: #8c8c8c;
         }
 
-        .title {
+        .title-wrapper {
           padding: 0 $default-padding-size;
+          padding-top: 14px;
+        }
+
+        .title {
           font-family: "TabletGothicBold";
           font-size: 1.5rem;
           font-weight: 600;
           padding-top: 4px;
+          color: $primary-color;
         }
 
         .subTitle {

diff --git a/frontend/src/components/layout/ContentLayout.js b/frontend/src/components/layout/ContentLayout.js
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { Breadcrumb, Card, Tabs, Affix } from "antd";
+import { Breadcrumb, Card, Tabs, Affix, Row, Col } from "antd";
 import { HomeOutlined, RightOutlined } from "@ant-design/icons";
 import { adminRole } from "../../store/static";
 import { UserState } from "../../store";
@@ -33,6 +33,7 @@ const ContentLayout = ({
   title = null,
   subTitle = null,
   breadcrumbRightContent = null,
+  titleRighContent = null,
 }) => {
   const navigate = useNavigate();
   const hasBreadcrumb = breadcrumbItems.length;
@@ -87,24 +88,36 @@ const ContentLayout = ({
           ) : (
             ""
           )}
-          {title ? (
-            <div
-              data-testid="title"
-              className="title"
-              style={{ paddingTop: "14px" }}
-            >
-              {title}
-            </div>
-          ) : (
-            ""
-          )}
-          {subTitle ? (
-            <div data-testid="subTitle" className="subTitle">
-              {subTitle}
-            </div>
-          ) : (
-            ""
-          )}
+          <Row
+            gutter={[12, 12]}
+            align="middle"
+            justify="start"
+            className="title-wrapper"
+          >
+            <Col span={titleRighContent ? 6 : 24}>
+              {title ? (
+                <div data-testid="title" className="title">
+                  {title}
+                </div>
+              ) : (
+                ""
+              )}
+              {subTitle ? (
+                <div data-testid="subTitle" className="subTitle">
+                  {subTitle}
+                </div>
+              ) : (
+                ""
+              )}
+            </Col>
+            {titleRighContent && (
+              <Col span={18}>
+                <Row justify="end">
+                  <Col>{titleRighContent}</Col>
+                </Row>
+              </Col>
+            )}
+          </Row>
           {adminRole.includes(userRole) &&
           currentPath.includes("/admin/") &&
           showTabItemsForPath.includes(window.location.pathname) ? (