Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: font-size in header + spacing (#31462)

Browse Source 
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>
This commit is contained in:
Pawan Kumar 2024-03-04 20:20:43 +05:30 committed by GitHub
parent 5fdc0a1ef9
commit 9d2da7b348
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/client/packages/design-system/widgets/src/components/Modal/src/ModalHeader.tsx
View File

@ -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" />

19
app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css
View File

@ -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"] {