fix: UI adjustments [DHIS2-18628]

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);
@@ -18,15 +17,15 @@
 .wrapperWithFooter {
     composes: wrapper;
     grid-template-areas: 'sidebar' 'main' 'footer';
-    grid-template-rows: auto 1fr 68px;
+    grid-template-rows: auto 1fr 44px;
     overflow-y: auto;
 }
 
 .main {
     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;
@@ -45,13 +44,13 @@
     font-size: 28px;
     color: var(--colors-grey900);
     line-height: 40px;
-    padding-bottom: 16px;
+    padding-bottom: 8px;
 }
 
 .footerPlaceholder {
     grid-area: footer;
     width: 100vw;
-    padding: var(--spacers-dp16) 0;
+    padding: 0;
     background: var(--colors-white);
 }
 
@@ -65,7 +64,7 @@
     }
     .wrapperWithFooter {
         grid-template-areas: 'sidebar main' 'footer footer';
-        grid-template-rows: 1fr 68px;
+        grid-template-rows: 1fr 44px;
     }
     .sidebar {
         width: 240px;

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;
 }

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>
 )
 

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,44 +18,52 @@ 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;
     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(--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;
@@ -72,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 {
@@ -98,17 +108,25 @@ 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);
 }
+/* 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;
@@ -143,20 +161,20 @@ html {
 }
 
 .sidenav-filter {
-    padding: var(--spacers-dp12) var(--spacers-dp8) var(--spacers-dp16);
+    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);
 }
 
 .sidenav-filter input::placeholder {
-    color: var(--colors-grey400);
+    color: var(--colors-grey500);
 }
 
 .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;
 }

src/app/sidebar/sidenav/SidenavFilter.tsx

@@ -24,9 +24,9 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
         <Input
             className={styles['sidenav-filter']}
             dense
-            type="text"
+            type="search"
             value={value}
-            placeholder={i18n.t('Search for menu items')}
+            placeholder={i18n.t('Search menu items')}
             onChange={handleChange}
         />
     )

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);
 }
@@ -9,7 +10,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);
 }

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>
     )
 }

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>

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;
+}

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>
     )
 }

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>

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"
             />
         )
     }

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"
         />
     )
 })

src/components/sectionList/listActions/DeleteAction.tsx

@@ -45,6 +45,7 @@ export function DeleteAction({
         <>
             <MenuItem
                 dense
+                destructive
                 disabled={disabled}
                 label={i18n.t('Delete')}
                 icon={<IconDelete16 />}