diff --git a/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png b/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png
index 01359ae14..b3ac8bfff 100644
Binary files a/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png and b/.loki/reference/chrome.laptop/Phones/PhoneField_Basic.png differ
diff --git a/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png b/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png
index bca7fbb00..59b44924c 100644
Binary files a/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png and b/.loki/reference/chrome.laptop/Surfaces/AppBar_Basic.png differ
diff --git a/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png b/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png
index e1ce74808..3f727e27d 100644
Binary files a/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png and b/.loki/reference/chrome.laptop/Surfaces/AppBar_Dense.png differ
diff --git a/packages/ui/src/app-bar/AppBarOverrides.ts b/packages/ui/src/app-bar/AppBarOverrides.ts
index ee3e51cda..9e2ab74ca 100644
--- a/packages/ui/src/app-bar/AppBarOverrides.ts
+++ b/packages/ui/src/app-bar/AppBarOverrides.ts
@@ -1,3 +1,4 @@
+import { ColorDynamic } from '../theme/Color';
import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
export function overrideAppBar(theme: SuperDispatchTheme): void {
@@ -6,4 +7,13 @@ export function overrideAppBar(theme: SuperDispatchTheme): void {
color: 'inherit',
position: 'static',
};
+
+ theme.overrides.MuiAppBar = {
+ root: {
+ '&.MuiPaper-elevation0': {
+ border: 'none',
+ borderBottom: `1px solid ${ColorDynamic.Silver400}`,
+ },
+ },
+ };
}
diff --git a/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx b/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx
index a0ca54c06..78deb88a7 100644
--- a/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx
+++ b/packages/ui/src/app-bar/__tests__/AppBar.spec.tsx
@@ -13,6 +13,15 @@ it('checks default props', () => {
`);
});
+it('renders a bottom border instead of the inherited full box border', () => {
+ // eslint-disable-next-line testing-library/render-result-naming-convention -- renderCSS returns a CSS string, not an RTL render result
+ const css = renderCSS(, ['MuiAppBar']);
+
+ expect(css).toContain('.MuiAppBar-root.MuiPaper-elevation0');
+ expect(css).toContain('border: none');
+ expect(css).toContain('border-bottom: 1px solid ColorDynamic.Silver400');
+});
+
it('checks component css', () => {
expect(renderCSS(, ['MuiAppBar'])).toMatchInlineSnapshot(`
.MuiAppBar-root {
@@ -24,6 +33,11 @@ it('checks component css', () => {
flex-direction: column;
}
+ .MuiAppBar-root.MuiPaper-elevation0 {
+ border: none;
+ border-bottom: 1px solid ColorDynamic.Silver400;
+ }
+
.MuiAppBar-positionFixed {
top: 0;
left: auto;
diff --git a/packages/ui/src/drawer/DrawerActions.tsx b/packages/ui/src/drawer/DrawerActions.tsx
index 83e7bba8a..20bac6483 100644
--- a/packages/ui/src/drawer/DrawerActions.tsx
+++ b/packages/ui/src/drawer/DrawerActions.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles(
'&&': {
bottom: 0,
top: 'auto',
+ borderTop: `1px solid ${ColorDynamic.Silver400}`,
borderLeft: 'none',
borderRight: 'none',
borderBottom: 'none',
diff --git a/packages/ui/src/drawer/__tests__/Drawer.spec.tsx b/packages/ui/src/drawer/__tests__/Drawer.spec.tsx
index bc4eacb5e..8948e2487 100644
--- a/packages/ui/src/drawer/__tests__/Drawer.spec.tsx
+++ b/packages/ui/src/drawer/__tests__/Drawer.spec.tsx
@@ -15,6 +15,15 @@ it('checks default props', () => {
`);
});
+it('DrawerActions declares its own top border rather than the inherited box border', () => {
+ // eslint-disable-next-line testing-library/render-result-naming-convention -- renderCSS returns a CSS string, not an RTL render result
+ const css = renderCSS(, ['SD-DrawerActions']);
+
+ // AppBar no longer ships a full box border, so the action bar must own its
+ // top divider explicitly (width + style), toggling only the color on sticky.
+ expect(css).toContain('border-top: 1px solid ColorDynamic.Silver400');
+});
+
it('checks component css', () => {
expect(
renderCSS(
@@ -106,6 +115,7 @@ it('checks component css', () => {
.SD-DrawerActions-appBar.SD-DrawerActions-appBar {
top: auto;
bottom: 0;
+ border-top: 1px solid ColorDynamic.Silver400;
transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-left: none;
border-right: none;