From 9d2da7b348fd30a076f18d96baa4de990fc8384d Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Mon, 4 Mar 2024 20:20:43 +0530
Subject: [PATCH] fix: font-size in header + spacing (#31462)

Fixes #31252

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Updated the design of the modal headers, including font weight and
variant adjustments.
- Enhanced spacing within modal components for improved visual
structure.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 .../src/components/Modal/src/ModalHeader.tsx  | 16 ++++++++++++++--
 .../components/Modal/src/styles.module.css    | 19 ++++++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/ModalHeader.tsx b/app/client/packages/design-system/widgets/src/components/Modal/src/ModalHeader.tsx
index 2b50fa3e5f..1b18f0c63a 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/src/ModalHeader.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Modal/src/ModalHeader.tsx
@@ -5,6 +5,7 @@ import { Text } from "../../Text";
 import { IconButton } from "../../IconButton";
 import { Flex } from "../../Flex";
 import { useId } from "@floating-ui/react";
+import styles from "./styles.module.css";
 
 import type { ModalHeaderProps } from "./types";
 
@@ -21,8 +22,19 @@ export const ModalHeader = (props: ModalHeaderProps) => {
   }, [id, setLabelId]);
 
   return (
-    <Flex alignItems="center" gap="spacing-4" justifyContent="space-between">
-      <Text id={id} lineClamp={1} title={title} variant="caption">
+    <Flex
+      alignItems="center"
+      className={styles.header}
+      gap="spacing-4"
+      justifyContent="space-between"
+    >
+      <Text
+        fontWeight={600}
+        id={id}
+        lineClamp={1}
+        title={title}
+        variant="subtitle"
+      >
         {title}
       </Text>
       <IconButton icon="x" onPress={() => setOpen(false)} variant="ghost" />
diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
index 1bba515c00..c94576448a 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
@@ -14,22 +14,27 @@
   outline: none;
   display: flex;
   flex-direction: column;
-  gap: var(--outer-spacing-4);
-  padding-inline: var(--outer-spacing-4);
-  padding-block: var(--outer-spacing-4);
+  gap: var(--inner-spacing-3);
+  padding-inline: var(--inner-spacing-4);
+  padding-block: var(--inner-spacing-3);
   flex: 1;
 }
 
+.overlay .content .header {
+  padding-inline: 0 calc(var(--inner-spacing-2));
+  margin-inline: 0 calc(-1 * var(--inner-spacing-4));
+}
+
 .overlay .content .body {
   overflow: auto;
-  padding-inline: var(--outer-spacing-4);
-  margin-inline: calc(var(--outer-spacing-4) * -1);
+  padding-inline: var(--inner-spacing-4);
+  margin-inline: calc(var(--inner-spacing-4) * -1);
 }
 
 .overlay [role="dialog"] {
   display: flex;
-  max-inline-size: calc(100% - var(--outer-spacing-8));
-  max-block-size: calc(100% - var(--outer-spacing-8));
+  max-inline-size: calc(100% - var(--inner-spacing-8));
+  max-block-size: calc(100% - var(--inner-spacing-8));
 }
 
 .overlay [role="dialog"][data-size="small"] {