frontend: Adjust workflow layout whitespace (#3155)

lyft · Oct 23, 2024 · 5b7841c · 5b7841c
1 parent f24f53d
commit 5b7841c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}