From 5b7841c9ad12b70d5eec47d00b50edea1063de96 Mon Sep 17 00:00:00 2001
From: Orlando Valverde <4467518+septum@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:04:52 -0600
Subject: [PATCH] frontend: Adjust workflow layout whitespace (#3155)

---
 .../packages/core/src/AppProvider/index.tsx   |  2 --
 .../core/src/AppProvider/workflow.tsx         |  2 +-
 .../packages/core/src/Breadcrumbs/index.tsx   |  1 -
 .../core/src/WorkflowLayout/index.tsx         | 31 ++++++++++++-------
 4 files changed, 21 insertions(+), 15 deletions(-)

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.component />, {
                                   ...route.componentProps,
-                                  // This is going to be removed to be used in the WorkflowLayout only
                                   heading,
                                 })}
                               </AppNotification>
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<LayoutProps, "workflow">;
 }
 
 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 && (
         <PageHeader $variant={variant}>
           <Breadcrumbs entries={breadcrumbsEntries} />
-          {heading && (
-            <>
-              {React.isValidElement(heading) ? (
-                heading
-              ) : (
-                <HeaderTitle variant="h2">{heading}</HeaderTitle>
-              )}
-            </>
-          )}
+          <PageHeaderMainContainer>
+            {heading && (
+              <>
+                {React.isValidElement(heading) ? (
+                  heading
+                ) : (
+                  <Heading variant="h2">{heading}</Heading>
+                )}
+              </>
+            )}
+          </PageHeaderMainContainer>
         </PageHeader>
       )}
       {children}