Correct param setter sizing

app/src/components/Layout.tsx

@@ -1,31 +1,39 @@
+import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
-import { AppShell, Box } from '@mantine/core';
-import { spacing } from '../designTokens';
+import { AppShell } from '@mantine/core';
+import { spacing } from '@/designTokens';
+import { RootState } from '@/store';
+import HeaderBar from './shared/HeaderBar';
 import Sidebar from './Sidebar';
 
 export default function Layout() {
+  const { currentFrame } = useSelector((state: RootState) => state.flow);
+
+  // If PolicyParameterSelectorFrame is active, let it manage its own layout completely
+  if (currentFrame === 'PolicyParameterSelectorFrame') {
+    return <Outlet />;
+  }
+
+  // Otherwise, render the normal layout with AppShell
   return (
     <AppShell
-      padding={0}
+      layout="default"
+      header={{ height: parseInt(spacing.appShell.header.height, 10) }}
       navbar={{
-        width: parseInt(spacing.layout.sidebarWidth, 10),
-        breakpoint: 'sm',
+        width: parseInt(spacing.appShell.navbar.width, 10),
+        breakpoint: spacing.appShell.navbar.breakpoint,
       }}
     >
-      <AppShell.Navbar p={0} withBorder={false}>
+      <AppShell.Header p={0}>
+        <HeaderBar showLogo />
+      </AppShell.Header>
+
+      <AppShell.Navbar>
         <Sidebar />
       </AppShell.Navbar>
 
       <AppShell.Main>
-        <Box
-          style={{
-            minHeight: '100vh',
-            backgroundColor: '#f9fafb',
-            padding: '24px',
-          }}
-        >
-          <Outlet />
-        </Box>
+        <Outlet />
       </AppShell.Main>
     </AppShell>
   );

app/src/components/Sidebar.tsx

@@ -12,7 +12,6 @@ import { useLocation } from 'react-router-dom';
 import { Box, Button, Divider, Stack, Text } from '@mantine/core';
 import { colors, spacing, typography } from '../designTokens';
 import SidebarDivider from './sidebar/SidebarDivider';
-import SidebarLogo from './sidebar/SidebarLogo';
 import SidebarNavItem from './sidebar/SidebarNavItem';
 import SidebarSection from './sidebar/SidebarSection';
 import SidebarUser from './sidebar/SidebarUser';
@@ -55,18 +54,14 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
       bg="white"
       style={{
         borderRight: `1px solid ${colors.border.light}`,
-        width: parseInt(spacing.layout.sidebarWidth, 10),
-        position: 'fixed',
+        width: parseInt(spacing.appShell.navbar.width, 10),
         left: 0,
         top: 0,
         overflowY: 'auto',
       }}
       gap={0}
     >
       <Stack gap={0}>
-        <Box bg={colors.primary[500]} px={16} py={20}>
-          <SidebarLogo />
-        </Box>
         <Box px={16} py={16}>
           <Button
             leftSection={<IconPlus size={16} stroke={2} />}
@@ -76,12 +71,9 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
             h={36}
             styles={{
               root: {
-                backgroundColor: colors.primary[500],
+                backgroundColor: colors.primary[600],
                 fontSize: typography.fontSize.sm,
                 fontWeight: typography.fontWeight.medium,
-                '&:hover': {
-                  backgroundColor: colors.primary[600],
-                },
               },
             }}
           >
@@ -127,7 +119,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
       </Stack>
 
       <Box p={16}>
-        <Divider mb={16} color="#E2E8F0" />
+        <Divider mb={16} color={colors.border.light} />
         <Stack gap={8}>
           <Text size="xs" c={colors.text.secondary} style={{ fontSize: 10 }}>
             Running 2 items
@@ -165,7 +157,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
             View Report
           </Button>
         </Stack>
-        <Divider my={16} color="#E2E8F0" />
+        <Divider my={16} color={colors.border.light} />
         <SidebarUser name="Olivia Rhye" initials="OR" />
       </Box>
     </Stack>

app/src/components/policyParameterSelectorFrame/Header.tsx → app/src/components/policyParameterSelectorFrame/Footer.tsx

@@ -1,14 +1,12 @@
 import { useDispatch } from 'react-redux';
-import { Button, Group, Text } from '@mantine/core';
+import { Button, Group } from '@mantine/core';
 import { clearPolicy } from '@/reducers/policyReducer';
 import { FlowComponentProps } from '@/types/flow';
 
-export default function PolicyParameterSelectorHeader({
+export default function PolicyParameterSelectorFooter({
   onNavigate,
   onReturn,
 }: FlowComponentProps) {
-  // TODO: Determine how to handle policy number
-
   const dispatch = useDispatch();
 
   function handleNext() {
@@ -27,7 +25,6 @@ export default function PolicyParameterSelectorHeader({
       <Button variant="default" onClick={handleCancel}>
         Cancel
       </Button>
-      <Text fw={700}>Policy #NUMBER</Text>
       <Button variant="filled" onClick={handleNext}>
         Next
       </Button>

app/src/components/shared/HeaderBar.tsx

@@ -0,0 +1,45 @@
+import { Box, Text } from '@mantine/core';
+import PolicyEngineLogo from '@/assets/policyengine-logo.svg';
+import { colors, spacing } from '@/designTokens';
+
+interface HeaderBarProps {
+  title?: string;
+  children?: React.ReactNode;
+  showLogo?: boolean;
+}
+
+export default function HeaderBar({ title, children, showLogo = false }: HeaderBarProps) {
+  return (
+    <Box
+      bg={colors.primary[900]}
+      px={spacing.appShell.header.padding.split(' ')[1]}
+      py={spacing.appShell.header.padding.split(' ')[0]}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minHeight: spacing.appShell.header.height,
+      }}
+    >
+      <Box style={{ display: 'flex', alignItems: 'center' }}>
+        {showLogo && (
+          <img
+            src={PolicyEngineLogo}
+            alt="PolicyEngine"
+            style={{
+              height: 20,
+              width: 'auto',
+              marginRight: title ? 12 : 0,
+            }}
+          />
+        )}
+        {title && (
+          <Text c="white" fw={700} size="md">
+            {title}
+          </Text>
+        )}
+      </Box>
+      {children}
+    </Box>
+  );
+}

app/src/designTokens/spacing.ts

@@ -46,6 +46,32 @@ export const spacing = {
     sideGutter: '200px', // TODO: Make this responsive/attempt to use 'container'
   },
 
+  // AppShell design tokens
+  appShell: {
+    header: {
+      height: '40px',
+      padding: '8px 16px',
+    },
+    navbar: {
+      width: '300px',
+      padding: '0px',
+      breakpoint: 'sm',
+    },
+    aside: {
+      width: '300px',
+      padding: '16px',
+      breakpoint: 'md',
+    },
+    footer: {
+      height: '60px',
+      padding: '12px 24px',
+    },
+    main: {
+      padding: '24px',
+      minHeight: '100vh',
+    },
+  },
+
   // Container padding
   container: {
     xs: '16px',

app/src/frames/policy/PolicyParameterSelectorFrame.tsx

@@ -2,10 +2,12 @@ import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppShell, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import Header from '@/components/policyParameterSelectorFrame/Header';
+import Footer from '@/components/policyParameterSelectorFrame/Footer';
 import Main from '@/components/policyParameterSelectorFrame/Main';
 import MainEmpty from '@/components/policyParameterSelectorFrame/MainEmpty';
 import Menu from '@/components/policyParameterSelectorFrame/Menu';
+import HeaderBar from '@/components/shared/HeaderBar';
+import { spacing } from '@/designTokens';
 import { RootState } from '@/store';
 import { FlowComponentProps } from '@/types/flow';
 import { ParameterMetadata } from '@/types/metadata/parameterMetadata';
@@ -49,23 +51,17 @@ export default function PolicyParameterSelectorFrame({
 
   return (
     <AppShell
-      header={{ height: 60 }}
+      layout="default"
+      padding="md"
+      header={{ height: parseInt(spacing.appShell.header.height, 10) }}
       navbar={{
-        width: 300,
-        breakpoint: 'sm',
-        collapsed: { mobile: !mobileOpened },
+        width: parseInt(spacing.appShell.navbar.width, 10),
+        breakpoint: spacing.appShell.navbar.breakpoint,
       }}
-      footer={{ height: 60 }}
-      padding="md"
+      footer={{ height: parseInt(spacing.appShell.footer.height, 10) }}
     >
-      <AppShell.Header p="md">
-        <Header
-          onNavigate={onNavigate}
-          onReturn={onReturn}
-          flowConfig={flowConfig}
-          isInSubflow={isInSubflow}
-          flowDepth={flowDepth}
-        />
+      <AppShell.Header p={0}>
+        <HeaderBar showLogo />
       </AppShell.Header>
 
       <AppShell.Navbar p="md" bg="gray.0">
@@ -87,7 +83,13 @@ export default function PolicyParameterSelectorFrame({
       </AppShell.Main>
 
       <AppShell.Footer p="md">
-        <Text fw={700}>TODO: Footer</Text>
+        <Footer
+          onNavigate={onNavigate}
+          onReturn={onReturn}
+          flowConfig={flowConfig}
+          isInSubflow={isInSubflow}
+          flowDepth={flowDepth}
+        />
       </AppShell.Footer>
     </AppShell>
   );

app/src/styles/components.ts

@@ -1,5 +1,5 @@
 // Components submodule for Mantine theme
-import { Card, Container, Title } from '@mantine/core';
+import { AppShell, Card, Container, Title } from '@mantine/core';
 import { colors, spacing, typography } from '../designTokens';
 import { themeDefaults } from './defaults';
 
@@ -217,4 +217,20 @@ export const themeComponents = {
       return {};
     },
   }),
+
+  AppShell: AppShell.extend({
+    defaultProps: {
+      padding: spacing.appShell.main.padding,
+      withBorder: true,
+    },
+    styles: {
+      main: {
+        minHeight: spacing.appShell.main.minHeight,
+        backgroundColor: colors.gray[50],
+      },
+      navbar: {
+        padding: spacing.appShell.navbar.padding,
+      },
+    },
+  }),
 };