From 807bf3efd545a05b9c2f81dfcf125b27a4491fdb Mon Sep 17 00:00:00 2001 From: Anthony Volk Date: Thu, 11 Sep 2025 20:48:04 +0100 Subject: [PATCH 1/7] fix: Don't use Layout with PolicyParameterSelectorFrame --- app/src/components/Layout.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx index 6044216a..73b86cfa 100644 --- a/app/src/components/Layout.tsx +++ b/app/src/components/Layout.tsx @@ -1,9 +1,19 @@ import { Outlet } from 'react-router-dom'; +import { useSelector } from 'react-redux'; import { AppShell, Box } from '@mantine/core'; import { spacing } from '../designTokens'; import Sidebar from './Sidebar'; +import { RootState } from '@/store'; 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 ; + } + + // Otherwise, render the normal layout with AppShell return ( Date: Thu, 11 Sep 2025 21:28:23 +0100 Subject: [PATCH 2/7] fix: Bring styles of both AppShells in line --- app/src/components/Layout.tsx | 23 +++------------- app/src/components/Sidebar.tsx | 2 +- app/src/designTokens/spacing.ts | 27 +++++++++++++++++++ .../policy/PolicyParameterSelectorFrame.tsx | 7 ----- app/src/styles/components.ts | 22 ++++++++++++++- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx index 73b86cfa..59389869 100644 --- a/app/src/components/Layout.tsx +++ b/app/src/components/Layout.tsx @@ -1,7 +1,6 @@ import { Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; -import { AppShell, Box } from '@mantine/core'; -import { spacing } from '../designTokens'; +import { AppShell } from '@mantine/core'; import Sidebar from './Sidebar'; import { RootState } from '@/store'; @@ -15,27 +14,13 @@ export default function Layout() { // Otherwise, render the normal layout with AppShell return ( - - + + - - - + ); diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx index 53e38ec6..5307209e 100644 --- a/app/src/components/Sidebar.tsx +++ b/app/src/components/Sidebar.tsx @@ -55,7 +55,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) { bg="white" style={{ borderRight: `1px solid ${colors.border.light}`, - width: parseInt(spacing.layout.sidebarWidth, 10), + width: parseInt(spacing.appShell.navbar.width, 10), position: 'fixed', left: 0, top: 0, diff --git a/app/src/designTokens/spacing.ts b/app/src/designTokens/spacing.ts index fd07bbbd..295616b3 100644 --- a/app/src/designTokens/spacing.ts +++ b/app/src/designTokens/spacing.ts @@ -46,6 +46,33 @@ export const spacing = { sideGutter: '200px', // TODO: Make this responsive/attempt to use 'container' }, + // AppShell design tokens + appShell: { + header: { + height: '60px', + padding: '12px 24px', + }, + navbar: { + width: '300px', + padding: '0px', + breakpoint: 'sm', + }, + aside: { + width: '300px', + padding: '16px', + breakpoint: 'md', + }, + footer: { + height: '48px', + padding: '12px 24px', + }, + main: { + padding: '24px', + minHeight: '100vh', + backgroundColor: '#f9fafb', + }, + }, + // Container padding container: { xs: '16px', diff --git a/app/src/frames/policy/PolicyParameterSelectorFrame.tsx b/app/src/frames/policy/PolicyParameterSelectorFrame.tsx index cf7972b0..bdd20538 100644 --- a/app/src/frames/policy/PolicyParameterSelectorFrame.tsx +++ b/app/src/frames/policy/PolicyParameterSelectorFrame.tsx @@ -49,13 +49,6 @@ export default function PolicyParameterSelectorFrame({ return ( diff --git a/app/src/styles/components.ts b/app/src/styles/components.ts index fac89698..11f89ae6 100644 --- a/app/src/styles/components.ts +++ b/app/src/styles/components.ts @@ -1,5 +1,5 @@ // Components submodule for Mantine theme -import { Card, Container, Title } from '@mantine/core'; +import { Card, Container, Title, AppShell } from '@mantine/core'; import { colors, spacing, typography } from '../designTokens'; import { themeDefaults } from './defaults'; @@ -217,4 +217,24 @@ export const themeComponents = { return {}; }, }), + + AppShell: AppShell.extend({ + defaultProps: { + navbar: { + width: parseInt(spacing.appShell.navbar.width, 10), + breakpoint: spacing.appShell.navbar.breakpoint, + }, + padding: spacing.appShell.main.padding, + withBorder: true, + }, + styles: { + main: { + minHeight: spacing.appShell.main.minHeight, + backgroundColor: spacing.appShell.main.backgroundColor, + }, + navbar: { + padding: spacing.appShell.navbar.padding, + }, + }, + }), }; From 66cc68d23e51b337becf10df9ed7d57bfd4c619c Mon Sep 17 00:00:00 2001 From: Anthony Volk Date: Thu, 11 Sep 2025 21:34:49 +0100 Subject: [PATCH 3/7] fix: Use correct design tokens in sidebar --- app/src/components/Sidebar.tsx | 11 ++++------- app/src/designTokens/spacing.ts | 1 - app/src/styles/components.ts | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx index 5307209e..b19a2fdf 100644 --- a/app/src/components/Sidebar.tsx +++ b/app/src/components/Sidebar.tsx @@ -64,7 +64,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) { gap={0} > - + @@ -76,12 +76,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 +124,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) { - + Running 2 items @@ -165,7 +162,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) { View Report - + diff --git a/app/src/designTokens/spacing.ts b/app/src/designTokens/spacing.ts index 295616b3..96b8157a 100644 --- a/app/src/designTokens/spacing.ts +++ b/app/src/designTokens/spacing.ts @@ -69,7 +69,6 @@ export const spacing = { main: { padding: '24px', minHeight: '100vh', - backgroundColor: '#f9fafb', }, }, diff --git a/app/src/styles/components.ts b/app/src/styles/components.ts index 11f89ae6..26230a35 100644 --- a/app/src/styles/components.ts +++ b/app/src/styles/components.ts @@ -230,7 +230,7 @@ export const themeComponents = { styles: { main: { minHeight: spacing.appShell.main.minHeight, - backgroundColor: spacing.appShell.main.backgroundColor, + backgroundColor: colors.gray[50], }, navbar: { padding: spacing.appShell.navbar.padding, From ca3f4baa0c1f9b411fd09b92cbfbb918015cd5c0 Mon Sep 17 00:00:00 2001 From: Anthony Volk Date: Thu, 11 Sep 2025 21:54:59 +0100 Subject: [PATCH 4/7] fix: Move policy param setter items to footer --- .../policyParameterSelectorFrame/Footer.tsx | 33 +++++++++++++++++ .../policyParameterSelectorFrame/Header.tsx | 37 +++---------------- .../policy/PolicyParameterSelectorFrame.tsx | 17 +++++---- 3 files changed, 47 insertions(+), 40 deletions(-) create mode 100644 app/src/components/policyParameterSelectorFrame/Footer.tsx diff --git a/app/src/components/policyParameterSelectorFrame/Footer.tsx b/app/src/components/policyParameterSelectorFrame/Footer.tsx new file mode 100644 index 00000000..f98bb4c2 --- /dev/null +++ b/app/src/components/policyParameterSelectorFrame/Footer.tsx @@ -0,0 +1,33 @@ +import { useDispatch } from 'react-redux'; +import { Button, Group } from '@mantine/core'; +import { clearPolicy } from '@/reducers/policyReducer'; +import { FlowComponentProps } from '@/types/flow'; + +export default function PolicyParameterSelectorFooter({ + onNavigate, + onReturn, +}: FlowComponentProps) { + const dispatch = useDispatch(); + + function handleNext() { + // Dispatch an action to move to the next step + onNavigate('next'); + } + + function handleCancel() { + // Clear policy state and return to the previous step + dispatch(clearPolicy()); + onReturn(); + } + + return ( + + + + + ); +} \ No newline at end of file diff --git a/app/src/components/policyParameterSelectorFrame/Header.tsx b/app/src/components/policyParameterSelectorFrame/Header.tsx index 86b797b8..38bec7af 100644 --- a/app/src/components/policyParameterSelectorFrame/Header.tsx +++ b/app/src/components/policyParameterSelectorFrame/Header.tsx @@ -1,36 +1,9 @@ -import { useDispatch } from 'react-redux'; -import { Button, Group, Text } from '@mantine/core'; -import { clearPolicy } from '@/reducers/policyReducer'; -import { FlowComponentProps } from '@/types/flow'; - -export default function PolicyParameterSelectorHeader({ - onNavigate, - onReturn, -}: FlowComponentProps) { - // TODO: Determine how to handle policy number - - const dispatch = useDispatch(); - - function handleNext() { - // Dispatch an action to move to the next step - onNavigate('next'); - } - - function handleCancel() { - // Clear policy state and return to the previous step - dispatch(clearPolicy()); - onReturn(); - } +import { Text } from '@mantine/core'; +export default function PolicyParameterSelectorHeader() { return ( - - - Policy #NUMBER - - + + Policy Parameters + ); } diff --git a/app/src/frames/policy/PolicyParameterSelectorFrame.tsx b/app/src/frames/policy/PolicyParameterSelectorFrame.tsx index bdd20538..cecdb06f 100644 --- a/app/src/frames/policy/PolicyParameterSelectorFrame.tsx +++ b/app/src/frames/policy/PolicyParameterSelectorFrame.tsx @@ -3,6 +3,7 @@ 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'; @@ -52,13 +53,7 @@ export default function PolicyParameterSelectorFrame({ padding="md" > -
+
@@ -80,7 +75,13 @@ export default function PolicyParameterSelectorFrame({ - TODO: Footer +