feat: support custom background color

dhis2 · Sep 26, 2024 · e85a0a4 · e85a0a4
1 parent f11b35b
commit e85a0a4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/...ges/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js b/...ges/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js
@@ -34,6 +34,7 @@ export type ColumnConfig = DefaultWidgetColumnConfig | PluginWidgetColumnConfig;
 
 export type PageLayoutConfig = {
     title?: ?string,
+    backgroundColor?: ?string,
     leftColumn: ?Array<ColumnConfig>,
     rightColumn: ?Array<ColumnConfig>,
 }

diff --git a/...onents/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js b/...onents/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js
@@ -10,6 +10,7 @@ import { DefaultPageTitle, EnrollmentPageKeys } from './DefaultEnrollmentLayout.
 
 const getEnrollmentPageStyles = () => ({
     container: {
+        minHeight: '90vh',
         padding: '16px 24px 16px 24px',
     },
     contentContainer: {
@@ -44,6 +45,9 @@ const getEnrollmentPageStyles = () => ({
     },
 });
 
+// Function to validate hex color
+const isValidHex = (color: string) => /^#[0-9A-F]{6}$/i.test(color);
+
 const getTitle = (inputTitle, page) => {
     const title = inputTitle || i18n.t('Enrollment');
     const titles = {
@@ -83,8 +87,13 @@ const EnrollmentPageLayoutPlain = ({
         props: allProps,
     });
 
+    const containerStyle = useMemo(() => {
+        if (!pageLayout.backgroundColor || !isValidHex(pageLayout.backgroundColor)) return undefined;
+        return { backgroundColor: pageLayout.backgroundColor };
+    }, [pageLayout.backgroundColor]);
+
     return (
-        <div className={classes.container}>
+        <div className={classes.container} style={containerStyle}>
             <AddRelationshipRefWrapper setRelationshipRef={setAddRelationshipContainerElement} />
             <div
                 className={classes.contentContainer}

diff --git a/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js b/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js
@@ -1,8 +1,8 @@
 // @flow
-import React, { useState, useEffect, useRef, type ComponentType } from 'react';
+import React, { type ComponentType, useEffect, useRef, useState } from 'react';
 import { withStyles } from '@material-ui/core';
 import cx from 'classnames';
-import { colors, spacersNum, IconChevronUp24 } from '@dhis2/ui';
+import { colors, IconChevronUp24, spacersNum } from '@dhis2/ui';
 import { IconButton } from 'capture-ui';
 import type { WidgetCollapsibleProps, WidgetCollapsiblePropsPlain } from './widgetCollapsible.types';
 
@@ -127,7 +127,7 @@ const WidgetCollapsiblePlain = ({
     }, [open, animationsReady]);
 
     return (
-        <div style={{ backgroundColor: color }}>
+        <div style={{ backgroundColor: color, borderRadius: 3 }}>
             <div
                 className={cx(classes.headerContainer, {
                     childrenVisible,