From 209542b1fa2b668bb530c271b23f419fbe5beb4e Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:46:46 +0100
Subject: [PATCH 01/18] fix: use destructive style for delete menu items

---
 src/components/sectionList/listActions/DeleteAction.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/sectionList/listActions/DeleteAction.tsx b/src/components/sectionList/listActions/DeleteAction.tsx
index 04975263..017c3a59 100644
--- a/src/components/sectionList/listActions/DeleteAction.tsx
+++ b/src/components/sectionList/listActions/DeleteAction.tsx
@@ -45,6 +45,7 @@ export function DeleteAction({
         <>
             <MenuItem
                 dense
+                destructive
                 disabled={disabled}
                 label={i18n.t('Delete')}
                 icon={<IconDelete16 />}

From fcfc1b5a17cf623638f13c53e932b99ce120f422 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:47:32 +0100
Subject: [PATCH 02/18] fix: adjust table icon button color

---
 .../sectionList/listActions/SectionListActions.tsx           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/sectionList/listActions/SectionListActions.tsx b/src/components/sectionList/listActions/SectionListActions.tsx
index 0a2a112f..d38af604 100644
--- a/src/components/sectionList/listActions/SectionListActions.tsx
+++ b/src/components/sectionList/listActions/SectionListActions.tsx
@@ -10,6 +10,7 @@ import {
     IconTranslate16,
     MenuItem,
     Popover,
+    colors,
 } from '@dhis2/ui'
 import React, { useRef, useState } from 'react'
 import { useHref, useLinkClickHandler } from 'react-router-dom'
@@ -43,7 +44,7 @@ export const ActionEdit = ({
             to={{ pathname: modelId }}
             state={preservedSearchState}
         >
-            <IconEdit24 />
+            <IconEdit24 color={colors.grey600} />
         </LinkButton>
     )
 }
@@ -90,7 +91,7 @@ export const ActionMore = ({
                 small
                 secondary
                 onClick={() => setOpen(!open)}
-                icon={<IconMore24 />}
+                icon={<IconMore24 color={colors.grey600} />}
             />
             {open && (
                 <Popover

From 6e92f6cdeda697db31f96f63dba3ae5bd5cae804 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:53:21 +0100
Subject: [PATCH 03/18] fix: remove global lineheight declaration

---
 src/app/layout/Layout.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
index 06692d4f..bc6f8980 100644
--- a/src/app/layout/Layout.module.css
+++ b/src/app/layout/Layout.module.css
@@ -8,7 +8,6 @@
 .wrapper {
     display: grid;
     grid-template-areas: 'sidebar' 'main';
-    line-height: 20px;
     font-size: 14px;
     height: 100%;
     background: var(--colors-grey900);

From e4b3f0c1cb4783795e983cf36be9613a4fd0b64d Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:14:48 +0100
Subject: [PATCH 04/18] fix: reduce page-title bottom margin

---
 src/app/layout/Layout.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
index bc6f8980..27e13d4e 100644
--- a/src/app/layout/Layout.module.css
+++ b/src/app/layout/Layout.module.css
@@ -44,7 +44,7 @@
     font-size: 28px;
     color: var(--colors-grey900);
     line-height: 40px;
-    padding-bottom: 16px;
+    padding-bottom: 8px;
 }
 
 .footerPlaceholder {

From f96633b181a843b13c97b939869ee29c0983c2e6 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:16:49 +0100
Subject: [PATCH 05/18] fix: reduce sidebar filter padding

---
 src/app/sidebar/sidenav/Sidenav.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/sidebar/sidenav/Sidenav.module.css b/src/app/sidebar/sidenav/Sidenav.module.css
index 42ef07cc..f879be0b 100644
--- a/src/app/sidebar/sidenav/Sidenav.module.css
+++ b/src/app/sidebar/sidenav/Sidenav.module.css
@@ -143,7 +143,7 @@ html {
 }
 
 .sidenav-filter {
-    padding: var(--spacers-dp12) var(--spacers-dp8) var(--spacers-dp16);
+    padding: var(--spacers-dp8);
 }
 .sidenav-filter input {
     background: #131a22;

From 325914705c9ee1ead647a26ca10144a1b7a4aab2 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:18:29 +0100
Subject: [PATCH 06/18] fix: sidebar filter placeholder label

---
 src/app/sidebar/sidenav/SidenavFilter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/sidebar/sidenav/SidenavFilter.tsx b/src/app/sidebar/sidenav/SidenavFilter.tsx
index 87db8975..c4a61d4f 100644
--- a/src/app/sidebar/sidenav/SidenavFilter.tsx
+++ b/src/app/sidebar/sidenav/SidenavFilter.tsx
@@ -26,7 +26,7 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
             dense
             type="text"
             value={value}
-            placeholder={i18n.t('Search for menu items')}
+            placeholder={i18n.t('Search menu items')}
             onChange={handleChange}
         />
     )

From 70664f3bc58fe78b6446d38cec8e1a6bc5cb31be Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:19:33 +0100
Subject: [PATCH 07/18] fix: sidebar filter placeholder style

---
 src/app/sidebar/sidenav/Sidenav.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/sidebar/sidenav/Sidenav.module.css b/src/app/sidebar/sidenav/Sidenav.module.css
index f879be0b..ee5a873f 100644
--- a/src/app/sidebar/sidenav/Sidenav.module.css
+++ b/src/app/sidebar/sidenav/Sidenav.module.css
@@ -152,7 +152,7 @@ html {
 }
 
 .sidenav-filter input::placeholder {
-    color: var(--colors-grey400);
+    color: var(--colors-grey500);
 }
 
 .sidenav-filter input:focus {

From c43aa2a9a62d130427e182c4285d769438e68d4c Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:26:16 +0100
Subject: [PATCH 08/18] fix: prevent sidebar focus styles on mouse click

---
 src/app/sidebar/sidenav/Sidenav.module.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app/sidebar/sidenav/Sidenav.module.css b/src/app/sidebar/sidenav/Sidenav.module.css
index ee5a873f..cd578d8f 100644
--- a/src/app/sidebar/sidenav/Sidenav.module.css
+++ b/src/app/sidebar/sidenav/Sidenav.module.css
@@ -49,6 +49,11 @@ html {
     background: var(--sidenav-dark-bg-hover);
     outline-offset: -2px;
 }
+/* Prevent focus styles when mouse clicking */
+.sidenav-parent button:focus:not(:focus-visible) {
+    outline: none;
+    background: var(--colors-grey900);
+}
 .sidenav-parent button:disabled {
     color: var(--colors-grey500);
     cursor: not-allowed;
@@ -109,6 +114,12 @@ html {
 .sidenav-link.active:hover {
     background: var(--sidenav-dark-bg-selected);
 }
+/* Prevent focus styles when mouse clicking */
+.sidenav-link:focus:not(:focus-visible),
+.sidenav-link a:focus:not(:focus-visible) {
+    outline: none;
+    background: var(--sidenav-dark-bg-selected);
+}
 .sidenav-item-icon {
     margin-right: 8px;
     width: 16px;

From 1be5c3897c5eeebe247e0c357fa2873176588281 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:16:29 +0100
Subject: [PATCH 09/18] fix: adjust form footer styles

---
 src/app/layout/Layout.module.css                    | 7 ++++---
 src/components/form/DefaultFormContents.module.css  | 6 ++++--
 src/components/standardForm/StandardFormActions.tsx | 9 +++++++--
 src/pages/dataElementGroupSets/Edit.module.css      | 6 ++++--
 src/pages/dataElementGroups/Edit.module.css         | 6 ++++--
 src/pages/dataElements/Edit.module.css              | 6 ++++--
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
index 27e13d4e..9cae4688 100644
--- a/src/app/layout/Layout.module.css
+++ b/src/app/layout/Layout.module.css
@@ -17,7 +17,7 @@
 .wrapperWithFooter {
     composes: wrapper;
     grid-template-areas: 'sidebar' 'main' 'footer';
-    grid-template-rows: auto 1fr 68px;
+    grid-template-rows: auto 1fr 44px;
     overflow-y: auto;
 }
 
@@ -50,8 +50,9 @@
 .footerPlaceholder {
     grid-area: footer;
     width: 100vw;
-    padding: var(--spacers-dp16) 0;
+    padding: 0;
     background: var(--colors-white);
+    border-top: 1px solid red;
 }
 
 @media m-medium {
@@ -64,7 +65,7 @@
     }
     .wrapperWithFooter {
         grid-template-areas: 'sidebar main' 'footer footer';
-        grid-template-rows: 1fr 68px;
+        grid-template-rows: 1fr 44px;
     }
     .sidebar {
         width: 240px;
diff --git a/src/components/form/DefaultFormContents.module.css b/src/components/form/DefaultFormContents.module.css
index de17044a..e024e3cc 100644
--- a/src/components/form/DefaultFormContents.module.css
+++ b/src/components/form/DefaultFormContents.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/components/standardForm/StandardFormActions.tsx b/src/components/standardForm/StandardFormActions.tsx
index 27582664..5d2f06a7 100644
--- a/src/components/standardForm/StandardFormActions.tsx
+++ b/src/components/standardForm/StandardFormActions.tsx
@@ -23,12 +23,17 @@ export function StandardFormActions({
 }) {
     return (
         <ButtonStrip>
-            <Button primary disabled={submitting} type="submit">
+            <Button primary small disabled={submitting} type="submit">
                 {submitting && <LoadingIcon />}
                 {submitLabel}
             </Button>
 
-            <Button disabled={submitting} onClick={onCancelClick}>
+            <Button
+                secondary
+                small
+                disabled={submitting}
+                onClick={onCancelClick}
+            >
                 {cancelLabel}
             </Button>
         </ButtonStrip>
diff --git a/src/pages/dataElementGroupSets/Edit.module.css b/src/pages/dataElementGroupSets/Edit.module.css
index de17044a..e024e3cc 100644
--- a/src/pages/dataElementGroupSets/Edit.module.css
+++ b/src/pages/dataElementGroupSets/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/pages/dataElementGroups/Edit.module.css b/src/pages/dataElementGroups/Edit.module.css
index de17044a..e024e3cc 100644
--- a/src/pages/dataElementGroups/Edit.module.css
+++ b/src/pages/dataElementGroups/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }
diff --git a/src/pages/dataElements/Edit.module.css b/src/pages/dataElements/Edit.module.css
index de17044a..e024e3cc 100644
--- a/src/pages/dataElements/Edit.module.css
+++ b/src/pages/dataElements/Edit.module.css
@@ -9,7 +9,9 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    padding: var(--spacers-dp16);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    padding: var(--spacers-dp8) var(--spacers-dp16);
+    box-shadow: 0px 0px 1px 0px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
     background: var(--colors-white);
 }

From ec0e58a099bf57954fed74e6873b2b5caa2171d1 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:20:06 +0100
Subject: [PATCH 10/18] chore: remove footer test style

---
 src/app/layout/Layout.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
index 9cae4688..8ad507e0 100644
--- a/src/app/layout/Layout.module.css
+++ b/src/app/layout/Layout.module.css
@@ -52,7 +52,6 @@
     width: 100vw;
     padding: 0;
     background: var(--colors-white);
-    border-top: 1px solid red;
 }
 
 @media m-medium {

From 6eab28ea268ab0044c5fe0ab09a3ec2b301fc9e8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:28:48 +0100
Subject: [PATCH 11/18] fix: adjust global background color

---
 src/app/layout/Layout.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
index 8ad507e0..98975149 100644
--- a/src/app/layout/Layout.module.css
+++ b/src/app/layout/Layout.module.css
@@ -25,7 +25,7 @@
     padding: var(--spacers-dp16);
     padding-bottom: 0px;
     grid-area: main;
-    background-color: var(--colors-grey100);
+    background-color: var(--colors-grey200);
     width: 100%;
     display: flex;
     flex-direction: column;

From 6d60814971e9265c282dfa5a37594a7101cabb0d Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:29:24 +0100
Subject: [PATCH 12/18] fix: adjust form container styles

---
 src/components/form/DefaultFormContents.module.css | 1 +
 src/components/form/DefaultFormContents.tsx        | 9 ++++-----
 src/pages/dataElementGroupSets/Edit.module.css     | 1 +
 src/pages/dataElementGroupSets/New.module.css      | 1 +
 src/pages/dataElementGroups/Edit.module.css        | 1 +
 src/pages/dataElementGroups/New.module.css         | 1 +
 src/pages/dataElements/Edit.module.css             | 1 +
 src/pages/dataElements/New.module.css              | 1 +
 8 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/form/DefaultFormContents.module.css b/src/components/form/DefaultFormContents.module.css
index e024e3cc..bf5221e7 100644
--- a/src/components/form/DefaultFormContents.module.css
+++ b/src/components/form/DefaultFormContents.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/components/form/DefaultFormContents.tsx b/src/components/form/DefaultFormContents.tsx
index 789679be..855ac2e7 100644
--- a/src/components/form/DefaultFormContents.tsx
+++ b/src/components/form/DefaultFormContents.tsx
@@ -1,5 +1,4 @@
 import i18n from '@dhis2/d2-i18n'
-import { Card } from '@dhis2/ui'
 import React from 'react'
 import { useFormState } from 'react-final-form'
 import { getSectionPath, useNavigateWithSearchState } from '../../lib'
@@ -24,13 +23,13 @@ export function DefaultEditFormContents({
 
     return (
         <>
-            <Card className={classes.form}>
+            <div className={classes.form}>
                 {children}
 
                 <StandardFormSection>
                     <DefaultFormErrorNotice />
                 </StandardFormSection>
-            </Card>
+            </div>
             <div className={classes.formActions}>
                 <StandardFormActions
                     cancelLabel={i18n.t('Cancel')}
@@ -59,7 +58,7 @@ export function DefaultNewFormContents({
     const listPath = `/${getSectionPath(section)}`
 
     return (
-        <Card className={classes.form}>
+        <div className={classes.form}>
             {children}
             <StandardFormSection>
                 <DefaultFormErrorNotice />
@@ -72,6 +71,6 @@ export function DefaultNewFormContents({
                 submitting={submitting}
                 onCancelClick={() => navigate(listPath)}
             />
-        </Card>
+        </div>
     )
 }
diff --git a/src/pages/dataElementGroupSets/Edit.module.css b/src/pages/dataElementGroupSets/Edit.module.css
index e024e3cc..bf5221e7 100644
--- a/src/pages/dataElementGroupSets/Edit.module.css
+++ b/src/pages/dataElementGroupSets/Edit.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/pages/dataElementGroupSets/New.module.css b/src/pages/dataElementGroupSets/New.module.css
index 331dde3d..0c810796 100644
--- a/src/pages/dataElementGroupSets/New.module.css
+++ b/src/pages/dataElementGroupSets/New.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/pages/dataElementGroups/Edit.module.css b/src/pages/dataElementGroups/Edit.module.css
index e024e3cc..bf5221e7 100644
--- a/src/pages/dataElementGroups/Edit.module.css
+++ b/src/pages/dataElementGroups/Edit.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/pages/dataElementGroups/New.module.css b/src/pages/dataElementGroups/New.module.css
index 331dde3d..0c810796 100644
--- a/src/pages/dataElementGroups/New.module.css
+++ b/src/pages/dataElementGroups/New.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/pages/dataElements/Edit.module.css b/src/pages/dataElements/Edit.module.css
index e024e3cc..bf5221e7 100644
--- a/src/pages/dataElements/Edit.module.css
+++ b/src/pages/dataElements/Edit.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }
diff --git a/src/pages/dataElements/New.module.css b/src/pages/dataElements/New.module.css
index 331dde3d..0c810796 100644
--- a/src/pages/dataElements/New.module.css
+++ b/src/pages/dataElements/New.module.css
@@ -1,5 +1,6 @@
 .form {
     background: var(--colors-white);
+    border: 1px solid var(--colors-grey300);
     padding: var(--spacers-dp16);
     padding-bottom: var(--spacers-dp32);
 }

From 501b53c7e67752fd5209612fb105e657dcf122ee Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 20:00:10 +0100
Subject: [PATCH 13/18] fix: sidebar, sidenav style adjustments

---
 src/app/sidebar/sidenav/Sidenav.module.css | 49 ++++++++++++----------
 src/app/sidebar/sidenav/SidenavFilter.tsx  |  2 +-
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/app/sidebar/sidenav/Sidenav.module.css b/src/app/sidebar/sidenav/Sidenav.module.css
index cd578d8f..bd68e993 100644
--- a/src/app/sidebar/sidenav/Sidenav.module.css
+++ b/src/app/sidebar/sidenav/Sidenav.module.css
@@ -2,8 +2,9 @@
 
 /* component-specific variables not defined in ui */
 html {
-    --sidenav-dark-bg-hover: #2c3644;
-    --sidenav-dark-bg-selected: #040506;
+    --sidenav-dark-bg: #040506;
+    --sidenav-dark-bg-hover: #0b0d10;
+    --sidenav-dark-bg-selected: #010101;
 }
 
 /* nuke list styles */
@@ -17,32 +18,35 @@ html {
 .sidenav-wrap {
     width: 100%;
     height: 100%;
-    background: var(--colors-grey900);
+    background: var(--sidenav-dark-bg);
     overflow-y: auto;
-    color: white;
+    color: var(--colors-grey300);
     display: flex;
     flex-direction: column;
 }
 
 .sidenav-items {
     overflow-y: auto;
+    scrollbar-color: var(--colors-grey700) var(--sidenav-dark-bg);
+    scrollbar-width: thin;
 }
 
 /* parent */
 .sidenav-parent button {
     border: none;
-    background: var(--colors-grey900);
-    color: white;
-    font-size: 15px;
+    background: var(--sidenav-dark-bg);
+    color: var(--colors-grey300);
+    font-size: 14px;
     text-align: left;
     display: flex;
     align-items: center;
     width: 100%;
-    min-height: 36px;
+    min-height: 32px;
     padding: 8px 8px 8px 12px;
 }
 .sidenav-parent button:hover {
     background: var(--sidenav-dark-bg-hover);
+    text-decoration: underline;
 }
 .sidenav-parent button:focus {
     outline: 2px solid white;
@@ -52,14 +56,14 @@ html {
 /* Prevent focus styles when mouse clicking */
 .sidenav-parent button:focus:not(:focus-visible) {
     outline: none;
-    background: var(--colors-grey900);
+    background: var(--sidenav-dark-bg);
 }
 .sidenav-parent button:disabled {
     color: var(--colors-grey500);
     cursor: not-allowed;
 }
 .sidenav-parent button:disabled:hover {
-    background: var(--colors-grey900);
+    background: var(--sidenav-dark-bg);
 }
 .sidenav-parent-chevron {
     margin-left: auto;
@@ -77,18 +81,19 @@ html {
 }
 .sidenav-link a {
     display: block;
-    min-height: 36px;
+    min-height: 32px;
     padding: 8px 8px 8px 12px;
-    background: var(--colors-grey900);
+    background: var(--sidenav-dark-bg);
     text-decoration: none;
-    color: white;
-    font-size: 15px;
+    color: var(--colors-grey300);
+    font-size: 14px;
     display: flex;
     align-items: center;
 }
 .sidenav-link:hover,
 .sidenav-link a:hover {
     background: var(--sidenav-dark-bg-hover);
+    text-decoration: underline;
 }
 .sidenav-link:focus,
 .sidenav-link a:focus {
@@ -103,13 +108,15 @@ html {
 }
 .sidenav-link-disabled:hover,
 .sidenav-link-disabled:hover > a {
-    background: var(--colors-grey900);
+    background: var(--sidenav-dark-bg);
 }
 .sidenav-link a.active,
 .sidenav-link :global(.active) {
-    font-weight: 600;
+    font-weight: 700;
+    text-decoration: underline;
+    color: var(--colors-grey300);
     background: var(--sidenav-dark-bg-selected);
-    box-shadow: inset 6px 0px 0px 0px var(--colors-teal500);
+    box-shadow: inset 6px 0px 0px 0px var(--colors-teal400);
 }
 .sidenav-link.active:hover {
     background: var(--sidenav-dark-bg-selected);
@@ -157,8 +164,8 @@ html {
     padding: var(--spacers-dp8);
 }
 .sidenav-filter input {
-    background: #131a22;
-    border: 1px solid #111111;
+    background: var(--sidenav-dark-bg);
+    border: 1px solid var(--colors-grey900);
     color: var(--colors-grey050);
 }
 
@@ -167,7 +174,7 @@ html {
 }
 
 .sidenav-filter input:focus {
-    background: #131a22;
+    background: var(--sidenav-dark-bg);
     border-color: var(--colors-grey700);
-    box-shadow: var(--colors-grey400) 0px 0px 0px 2px inset;
+    box-shadow: var(--colors-grey500) 0px 0px 0px 2px inset;
 }
diff --git a/src/app/sidebar/sidenav/SidenavFilter.tsx b/src/app/sidebar/sidenav/SidenavFilter.tsx
index c4a61d4f..12d238c0 100644
--- a/src/app/sidebar/sidenav/SidenavFilter.tsx
+++ b/src/app/sidebar/sidenav/SidenavFilter.tsx
@@ -24,7 +24,7 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
         <Input
             className={styles['sidenav-filter']}
             dense
-            type="text"
+            type="search"
             value={value}
             placeholder={i18n.t('Search menu items')}
             onChange={handleChange}

From dc1f21fc2239b19c3e1e7035ee1a925ddea0ad15 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 08:40:25 +0100
Subject: [PATCH 14/18] fix: adjust sidebar filter empty state

---
 src/app/sidebar/Sidebar.module.css | 8 ++++----
 src/app/sidebar/Sidebar.tsx        | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/sidebar/Sidebar.module.css b/src/app/sidebar/Sidebar.module.css
index 44a7bc8c..a54fa674 100644
--- a/src/app/sidebar/Sidebar.module.css
+++ b/src/app/sidebar/Sidebar.module.css
@@ -1,9 +1,9 @@
 .noMatchMessage {
-    font-size: 14px;
-    line-height: 19px;
-    color: var(--colors-grey200);
+    font-size: 13px;
+    line-height: 17px;
+    color: var(--colors-grey500);
     text-align: center;
-    padding: var(--spacers-dp24) var(--spacers-dp12);
+    padding: var(--spacers-dp16) var(--spacers-dp8);
     max-width: 100%;
     word-break: break-word;
 }
diff --git a/src/app/sidebar/Sidebar.tsx b/src/app/sidebar/Sidebar.tsx
index 9f14270d..3231d2de 100644
--- a/src/app/sidebar/Sidebar.tsx
+++ b/src/app/sidebar/Sidebar.tsx
@@ -139,8 +139,7 @@ type NoMatchMessageProps = {
 
 const NoMatchMessage = ({ filter }: PropsWithChildren<NoMatchMessageProps>) => (
     <div className={styles.noMatchMessage}>
-        {i18n.t('No menu items found for')} <br />
-        {filter}
+        {i18n.t('No menu items found for')} <br />‘{filter}’
     </div>
 )
 

From 7e5b7a7319ab8f904ac608807843b710cc8a618c Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:02:08 +0100
Subject: [PATCH 15/18] fix: adjust org unit row height, expand button

---
 .../list/OrganisationUnitList.module.css                 | 9 +++++++++
 src/pages/organisationUnits/list/OrganisationUnitRow.tsx | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/pages/organisationUnits/list/OrganisationUnitList.module.css b/src/pages/organisationUnits/list/OrganisationUnitList.module.css
index b841b32f..662a77cd 100644
--- a/src/pages/organisationUnits/list/OrganisationUnitList.module.css
+++ b/src/pages/organisationUnits/list/OrganisationUnitList.module.css
@@ -1,6 +1,10 @@
 .expandButton {
     border: 0 !important;
 }
+.expandButton:hover {
+    background-color: var(--colors-grey300) !important;
+    color: var(--colors-grey900) !important;
+}
 
 .listDetailsWrapper {
     display: grid;
@@ -12,6 +16,11 @@
     margin-top: var(--spacers-dp8);
 }
 
+.orgUnitRow td {
+    padding-block-start: var(--spacers-dp8);
+    padding-block-end: var(--spacers-dp8);
+}
+
 @media (max-width: 1200px) {
     .listDetailsWrapper {
         display: grid;
diff --git a/src/pages/organisationUnits/list/OrganisationUnitRow.tsx b/src/pages/organisationUnits/list/OrganisationUnitRow.tsx
index 49b740bc..ddcaccc4 100644
--- a/src/pages/organisationUnits/list/OrganisationUnitRow.tsx
+++ b/src/pages/organisationUnits/list/OrganisationUnitRow.tsx
@@ -37,7 +37,7 @@ export const OrganisationUnitRow = ({
 
     return (
         <>
-            <DataTableRow key={row.id}>
+            <DataTableRow className={css.orgUnitRow} key={row.id}>
                 <DataTableCell>
                     <span
                         style={{
@@ -70,6 +70,7 @@ export const OrganisationUnitRow = ({
                                 <Button
                                     className={css.expandButton}
                                     secondary
+                                    small
                                     type="button"
                                     dataTest="row-expand-icon"
                                     loading={

From ec0592274004954cdf9b4eedb26130449f921550 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:49:52 +0100
Subject: [PATCH 16/18] fix: adjust help and description texts

---
 src/components/form/attributes/CustomAttributes.tsx       | 2 +-
 src/components/form/fields/ShortNameField.tsx             | 2 +-
 src/pages/categories/form/CategoryFormFields.tsx          | 8 +++-----
 src/pages/categoryCombos/form/CategoryComboFormFields.tsx | 8 +++++---
 .../form/CategoryOptionComboFormFields.tsx                | 4 +++-
 .../form/CategoryOptionGroupSetFormFields.tsx             | 6 +++---
 .../form/CategoryOptionGroupFormFields.tsx                | 4 ++--
 .../categoryOptions/form/CategoryOptionFormFields.tsx     | 2 +-
 .../form/DataElementGroupSetFormFields.tsx                | 4 ++--
 .../dataElementGroups/form/DataElementGroupFormFields.tsx | 2 +-
 src/pages/dataElements/fields/AggregationLevelsField.tsx  | 3 ---
 src/pages/dataElements/fields/CategoryComboField.tsx      | 2 +-
 src/pages/dataElements/fields/OptionSetCommentField.tsx   | 2 +-
 src/pages/dataElements/fields/OptionSetField.tsx          | 2 +-
 src/pages/dataElements/fields/UrlField.tsx                | 2 +-
 src/pages/dataElements/form/DataElementFormFields.tsx     | 6 +++---
 16 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/form/attributes/CustomAttributes.tsx b/src/components/form/attributes/CustomAttributes.tsx
index 08d2e2b4..b40a247d 100644
--- a/src/components/form/attributes/CustomAttributes.tsx
+++ b/src/components/form/attributes/CustomAttributes.tsx
@@ -121,7 +121,7 @@ export function CustomAttributesSection({
 
             <StandardFormSectionDescription>
                 {i18n.t(
-                    'Set up information for the attributes assigned to {{modelName}}',
+                    'Set up information for the attributes assigned to {{modelName}}.',
                     { modelName: schemaSection.titlePlural.toLowerCase() }
                 )}
             </StandardFormSectionDescription>
diff --git a/src/components/form/fields/ShortNameField.tsx b/src/components/form/fields/ShortNameField.tsx
index fa257132..e3f22730 100644
--- a/src/components/form/fields/ShortNameField.tsx
+++ b/src/components/form/fields/ShortNameField.tsx
@@ -49,7 +49,7 @@ export function ShortNameField({
     })
 
     const helpString =
-        helpText || i18n.t('Often used in reports where space is limited')
+        helpText || i18n.t('Often used in reports where space is limited.')
 
     return (
         <FieldRFF<string | undefined>
diff --git a/src/pages/categories/form/CategoryFormFields.tsx b/src/pages/categories/form/CategoryFormFields.tsx
index 1e261bae..d6730ca5 100644
--- a/src/pages/categories/form/CategoryFormFields.tsx
+++ b/src/pages/categories/form/CategoryFormFields.tsx
@@ -42,7 +42,7 @@ export const CategoryFormFields = () => {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose how this category option group will be used to capture and analyze'
+                        'Choose how this category option group will be used to capture and analyze data.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
@@ -72,7 +72,7 @@ export const CategoryFormFields = () => {
                         component={CheckboxFieldFF}
                         label={i18n.t('Use as data dimension')}
                         helpText={i18n.t(
-                            'Category option group will be available to the analytics as another dimension'
+                            'Make available to analytics apps as a selectable dimension.'
                         )}
                     />
                 </StandardFormField>
@@ -85,9 +85,7 @@ export const CategoryFormFields = () => {
                     </label>
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
-                    {i18n.t(
-                        'Choose the category options to include in this category option group.'
-                    )}
+                    {i18n.t('Choose the options to include in this category.')}
                 </StandardFormSectionDescription>
                 <StandardFormField>
                     <StandardFormField>
diff --git a/src/pages/categoryCombos/form/CategoryComboFormFields.tsx b/src/pages/categoryCombos/form/CategoryComboFormFields.tsx
index 298f3f7a..114df371 100644
--- a/src/pages/categoryCombos/form/CategoryComboFormFields.tsx
+++ b/src/pages/categoryCombos/form/CategoryComboFormFields.tsx
@@ -26,7 +26,9 @@ export const CategoryComboFormFields = () => {
                     {i18n.t('Basic information')}
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
-                    {i18n.t('Set up the basic information for this category.')}
+                    {i18n.t(
+                        'Set up the basic information for this category combination.'
+                    )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
                     <NameField schemaSection={section} />
@@ -43,7 +45,7 @@ export const CategoryComboFormFields = () => {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose how this category combo will be used to capture and analyze data.'
+                        'Choose how this category combination will be used to capture and analyze data.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
@@ -84,7 +86,7 @@ export const CategoryComboFormFields = () => {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose the categories to include in this category combo.'
+                        'Choose the categories to include in this category combination.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
diff --git a/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx b/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx
index 68fbfad3..d11af6f0 100644
--- a/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx
+++ b/src/pages/categoryOptionCombos/form/CategoryOptionComboFormFields.tsx
@@ -22,7 +22,9 @@ export const CategoryOptionComboFormFields = () => {
                     {i18n.t('Basic information')}
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
-                    {i18n.t('Set up the basic information for this category.')}
+                    {i18n.t(
+                        'Set up the basic information for this category option combination.'
+                    )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
                     <Field<string | undefined>
diff --git a/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx b/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx
index a1b6b704..6a9f1e65 100644
--- a/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx
+++ b/src/pages/categoryOptionGroupSets/form/CategoryOptionGroupSetFormFields.tsx
@@ -43,7 +43,7 @@ function CategoryOptionGroupSetFormFields() {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose how this category option group set will be used to capture and analyze'
+                        'Choose how this category option group set will be used to capture and analyze data.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
@@ -73,7 +73,7 @@ function CategoryOptionGroupSetFormFields() {
                         component={CheckboxFieldFF}
                         label={i18n.t('Use as data dimension')}
                         helpText={i18n.t(
-                            'Category option group set will be available to the analytics as another dimension'
+                            'Make available to analytics apps as a selectable dimension.'
                         )}
                     />
                 </StandardFormField>
@@ -82,7 +82,7 @@ function CategoryOptionGroupSetFormFields() {
             <StandardFormSection>
                 <StandardFormSectionTitle>
                     <label htmlFor={'categoryOptionGroups'}>
-                        {i18n.t('Category option Groups')}
+                        {i18n.t('Category option groups')}
                     </label>
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
diff --git a/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx b/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx
index 2c5ca915..8f4ad85e 100644
--- a/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx
+++ b/src/pages/categoryOptionGroups/form/CategoryOptionGroupFormFields.tsx
@@ -43,7 +43,7 @@ function CategoryOptionGroupFormFields() {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose how this category option  will be used to capture and analyze'
+                        'Choose how this category option  will be used to capture and analyze data.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
@@ -76,7 +76,7 @@ function CategoryOptionGroupFormFields() {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose the category options to include in this category.'
+                        'Choose the options to include in this category option group.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
diff --git a/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx b/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx
index 2d015116..6af8e337 100644
--- a/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx
+++ b/src/pages/categoryOptions/form/CategoryOptionFormFields.tsx
@@ -55,7 +55,7 @@ export const CategoryOptionFormFields = () => {
                 </StandardFormSectionTitle>
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Choose when, and for which organisation units this category option will be available.'
+                        'Choose when, and for which organisation units, this category option will be available.'
                     )}
                 </StandardFormSectionDescription>
                 <StandardFormField>
diff --git a/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
index da4d5502..d68be089 100644
--- a/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
+++ b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
@@ -30,7 +30,7 @@ export function DataElementGroupSetFormFields() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Set up the information for this data element group'
+                        'Set up the information for this data element group set.'
                     )}
                 </StandardFormSectionDescription>
 
@@ -40,7 +40,7 @@ export function DataElementGroupSetFormFields() {
                     <DescriptionField
                         schemaSection={section}
                         helpText={i18n.t(
-                            'Explain the purpose of this data element group.'
+                            'Explain the purpose of this data element group set.'
                         )}
                     />
                 </StandardFormField>
diff --git a/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
index b52cace5..0c61cbca 100644
--- a/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
+++ b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
@@ -26,7 +26,7 @@ export function DataElementGroupFormFields() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Set up the information for this data element group'
+                        'Set up the information for this data element group.'
                     )}
                 </StandardFormSectionDescription>
 
diff --git a/src/pages/dataElements/fields/AggregationLevelsField.tsx b/src/pages/dataElements/fields/AggregationLevelsField.tsx
index 4f372083..bab3173d 100644
--- a/src/pages/dataElements/fields/AggregationLevelsField.tsx
+++ b/src/pages/dataElements/fields/AggregationLevelsField.tsx
@@ -38,9 +38,6 @@ export function AggregationLevelsField() {
                 <Field
                     name="aggregationLevels"
                     label={i18n.t('Aggregation level(s)')}
-                    helpText={i18n.t(
-                        'Choose how this data element is disaggregated'
-                    )}
                     validationText={meta.touched ? meta.error : undefined}
                     error={meta.touched && !!meta.error}
                     dataTest="formfields-aggregationlevels"
diff --git a/src/pages/dataElements/fields/CategoryComboField.tsx b/src/pages/dataElements/fields/CategoryComboField.tsx
index aa785bb8..40c3b6b2 100644
--- a/src/pages/dataElements/fields/CategoryComboField.tsx
+++ b/src/pages/dataElements/fields/CategoryComboField.tsx
@@ -62,7 +62,7 @@ export function CategoryComboField() {
                         fieldLabel: i18n.t('Category combination'),
                     })}
                     helpText={i18n.t(
-                        'Choose how this data element is disaggregated'
+                        'Choose how this data element is disaggregated.'
                     )}
                     error={meta.touched && !!meta.error}
                     validationText={meta.touched ? meta.error : undefined}
diff --git a/src/pages/dataElements/fields/OptionSetCommentField.tsx b/src/pages/dataElements/fields/OptionSetCommentField.tsx
index 9c9163b3..dbf77a94 100644
--- a/src/pages/dataElements/fields/OptionSetCommentField.tsx
+++ b/src/pages/dataElements/fields/OptionSetCommentField.tsx
@@ -37,7 +37,7 @@ export function OptionSetCommentField() {
                     name="commentOptionSet.id"
                     label={i18n.t('Option set comment')}
                     helpText={i18n.t(
-                        'Choose a set of predefined comment for data entry'
+                        'Choose a set of predefined comments for data entry.'
                     )}
                     validationText={meta.touched ? meta.error : undefined}
                     error={meta.touched && !!meta.error}
diff --git a/src/pages/dataElements/fields/OptionSetField.tsx b/src/pages/dataElements/fields/OptionSetField.tsx
index 9291eb12..5dc794e6 100644
--- a/src/pages/dataElements/fields/OptionSetField.tsx
+++ b/src/pages/dataElements/fields/OptionSetField.tsx
@@ -32,7 +32,7 @@ export function OptionSetField() {
                     name="optionSet.id"
                     label={i18n.t('Option set')}
                     helpText={i18n.t(
-                        'Choose a set of predefined options for data entry'
+                        'Choose a set of predefined options for data entry.'
                     )}
                     validationText={meta.touched ? meta.error : undefined}
                     error={meta.touched && !!meta.error}
diff --git a/src/pages/dataElements/fields/UrlField.tsx b/src/pages/dataElements/fields/UrlField.tsx
index 25c4f274..f20f33c2 100644
--- a/src/pages/dataElements/fields/UrlField.tsx
+++ b/src/pages/dataElements/fields/UrlField.tsx
@@ -18,7 +18,7 @@ export function UrlField() {
             inputWidth="400px"
             name="url"
             label={i18n.t('Url')}
-            helpText={i18n.t('A web link that provides extra information')}
+            helpText={i18n.t('A web link that provides extra information.')}
             validateFields={[]}
             validate={validate}
         />
diff --git a/src/pages/dataElements/form/DataElementFormFields.tsx b/src/pages/dataElements/form/DataElementFormFields.tsx
index 4826c55f..ec7da6b0 100644
--- a/src/pages/dataElements/form/DataElementFormFields.tsx
+++ b/src/pages/dataElements/form/DataElementFormFields.tsx
@@ -40,7 +40,7 @@ export function DataElementFormFields() {
                 </StandardFormSectionTitle>
 
                 <StandardFormSectionDescription>
-                    {i18n.t('Set up the information for this data element')}
+                    {i18n.t('Set up the information for this data element.')}
                 </StandardFormSectionDescription>
 
                 <StandardFormField>
@@ -126,7 +126,7 @@ export function DataElementFormFields() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'Visualize values for this data element in Analytics app. Multiple legendSet can be applied.'
+                        'Visualize values for this data element in Analytics app. Multiple legends can be applied.'
                     )}
                 </StandardFormSectionDescription>
 
@@ -142,7 +142,7 @@ export function DataElementFormFields() {
 
                 <StandardFormSectionDescription>
                     {i18n.t(
-                        'By default, the aggregation will start at the lowest assigned organisation unit. If you for example select "Chiefdom", it means that "Chiefdom", "District" and "National" aggregates use "Chiefdom" (the highest aggregation level available) as the data source, and PHU data will not be included. PHU will still be available for the PHU level, but not included in the aggregations to the levels above.'
+                        'By default, aggregation starts at the lowest assigned organisation unit. You can override this by choosing a different level. Choosing a higher level means that data from lower levels will not be included in the aggregation.'
                     )}
                 </StandardFormSectionDescription>
 

From d15315637b796e0bb2ff55a4d1bedb5a1ca902de Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:59:21 +0100
Subject: [PATCH 17/18] fix: data element group transfers sizing

---
 .../DataElementGroupsTransfer/DataElementGroupsTransfer.tsx    | 3 +++
 .../DataElementsTransfer/DataElementsTransfer.tsx              | 3 +++
 .../fields/DataElementGroupsField.module.css                   | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx b/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx
index 7ac44e19..417010cf 100644
--- a/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx
@@ -148,6 +148,9 @@ export const DataElementGroupsTransfer = forwardRef(
                 rightFooter={rightFooter}
                 leftHeader={leftHeader}
                 leftFooter={leftFooter}
+                height="320px"
+                optionsWidth="480px"
+                selectedWidth="480px"
             />
         )
     }
diff --git a/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx b/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx
index b5e3481e..f1afb148 100644
--- a/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx
+++ b/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx
@@ -145,6 +145,9 @@ export const DataElementsTransfer = forwardRef(function DataElementsSelect(
             rightFooter={rightFooter}
             leftHeader={leftHeader}
             leftFooter={leftFooter}
+            height="320px"
+            optionsWidth="480px"
+            selectedWidth="480px"
         />
     )
 })
diff --git a/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css
index f40ea288..cb604490 100644
--- a/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css
+++ b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css
@@ -1,4 +1,4 @@
-.dataElementsOptionsFooter {
+.dataElementGroupsOptionsFooter {
     padding: var(--spacers-dp8) 0;
 }
 

From f0e6d18327f4f6afa8fa79907893de51bbaaeca8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:17:11 +0100
Subject: [PATCH 18/18] fix: ou-tree field styling

---
 .../fields/OrganisationUnitField.module.css     |  8 ++++++++
 .../form/fields/OrganisationUnitField.tsx       | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/components/form/fields/OrganisationUnitField.module.css

diff --git a/src/components/form/fields/OrganisationUnitField.module.css b/src/components/form/fields/OrganisationUnitField.module.css
new file mode 100644
index 00000000..2b25b25b
--- /dev/null
+++ b/src/components/form/fields/OrganisationUnitField.module.css
@@ -0,0 +1,8 @@
+.OrganisationUnitTreeWrapper {
+    padding: var(--spacers-dp4);
+    border: 1px solid var(--colors-grey300);
+    border-radius: 3px;
+    width: 640px;
+    max-height: 800px;
+    overflow: auto;
+}
diff --git a/src/components/form/fields/OrganisationUnitField.tsx b/src/components/form/fields/OrganisationUnitField.tsx
index c65bff26..46bf1c6b 100644
--- a/src/components/form/fields/OrganisationUnitField.tsx
+++ b/src/components/form/fields/OrganisationUnitField.tsx
@@ -7,6 +7,7 @@ import {
 import React from 'react'
 import { useField } from 'react-final-form'
 import { useCurrentUserRootOrgUnits } from '../../../lib/user/currentUserStore'
+import classes from './OrganisationUnitField.module.css'
 
 type OrganisationUnitFieldProps = {
     name?: string
@@ -66,13 +67,15 @@ export const OrganisationUnitField = ({
             error={meta.touched && meta.error}
             validationText={meta.touched && meta.error}
         >
-            <OrganisationUnitTree
-                roots={rootIds}
-                singleSelection={singleSelection}
-                onChange={handleChange}
-                selected={selectedPaths}
-                initiallyExpanded={rootIds}
-            />
+            <div className={classes.OrganisationUnitTreeWrapper}>
+                <OrganisationUnitTree
+                    roots={rootIds}
+                    singleSelection={singleSelection}
+                    onChange={handleChange}
+                    selected={selectedPaths}
+                    initiallyExpanded={rootIds}
+                />
+            </div>
         </Field>
     )
 }