diff --git a/frontend/packages/core/src/AppProvider/index.tsx b/frontend/packages/core/src/AppProvider/index.tsx index c3c4a5162d..7aca4801aa 100644 --- a/frontend/packages/core/src/AppProvider/index.tsx +++ b/frontend/packages/core/src/AppProvider/index.tsx @@ -216,7 +216,6 @@ const ClutchApp = ({ ? `${workflow.displayName}: ${route.displayName}` : workflow.displayName; - // We define these props in order to avoid UI changes before refactoring const workflowLayoutProps: LayoutProps = { ...route.layoutProps, heading: route.layoutProps?.heading || heading, @@ -231,7 +230,6 @@ const ClutchApp = ({ > {React.cloneElement(, { ...route.componentProps, - // This is going to be removed to be used in the WorkflowLayout only heading, })} diff --git a/frontend/packages/core/src/AppProvider/workflow.tsx b/frontend/packages/core/src/AppProvider/workflow.tsx index cd5865fae0..8d0e40357e 100644 --- a/frontend/packages/core/src/AppProvider/workflow.tsx +++ b/frontend/packages/core/src/AppProvider/workflow.tsx @@ -92,7 +92,7 @@ export interface Route { */ featureFlag?: string; - layoutProps?: LayoutProps; + layoutProps?: Omit; } export interface ConfiguredRoute extends Route { diff --git a/frontend/packages/core/src/Breadcrumbs/index.tsx b/frontend/packages/core/src/Breadcrumbs/index.tsx index c04b486691..c463ea04d2 100644 --- a/frontend/packages/core/src/Breadcrumbs/index.tsx +++ b/frontend/packages/core/src/Breadcrumbs/index.tsx @@ -12,7 +12,6 @@ interface BreadcrumbsProps { } const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }: { theme: Theme }) => ({ - margin: theme.spacing(theme.clutch.spacing.sm, theme.clutch.spacing.none), "& .MuiBreadcrumbs-separator": { color: alpha(theme.colors.neutral[900], 0.6), }, diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx index 97733a9a14..bdfcd5fff9 100644 --- a/frontend/packages/core/src/WorkflowLayout/index.tsx +++ b/frontend/packages/core/src/WorkflowLayout/index.tsx @@ -56,13 +56,20 @@ const LayoutContainer = styled("div")( const PageHeader = styled("div")(({ $variant, theme }: StyledVariantComponentProps) => ({ padding: theme.spacing( - theme.clutch.spacing.base, + theme.clutch.spacing.none, $variant === "wizard" ? theme.clutch.spacing.md : theme.clutch.spacing.none ), + paddingBottom: theme.spacing(theme.clutch.spacing.base), width: "100%", })); -const HeaderTitle = styled(Typography)({ +const PageHeaderMainContainer = styled("div")({ + display: "flex", + alignItems: "center", + height: "70px", +}); + +const Heading = styled(Typography)({ lineHeight: 1, }); @@ -88,15 +95,17 @@ const WorkflowLayout = ({ {!hideHeader && ( - {heading && ( - <> - {React.isValidElement(heading) ? ( - heading - ) : ( - {heading} - )} - - )} + + {heading && ( + <> + {React.isValidElement(heading) ? ( + heading + ) : ( + {heading} + )} + + )} + )} {children}