style(Page): change padding and margin

yuntijs · May 20, 2024 · 75dcbdf · 75dcbdf
1 parent 61c1343
commit 75dcbdf
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 24 deletions.
diff --git a/src/Page/Breadcrumb/style.ts b/src/Page/Breadcrumb/style.ts
diff --git a/src/Page/Content/style.ts b/src/Page/Content/style.ts
@@ -4,7 +4,7 @@ export const useStyles = createStyles(
   ({ css, token }) => {
     return {
       root: css`
-        padding: 24px;
+        padding: ${token.padding}px;
         background-color: ${token.colorBgBase};
         border-radius: ${token.borderRadius}px;
         box-shadow: ${token.boxShadowTertiary};

diff --git a/src/Page/Header/index.tsx b/src/Page/Header/index.tsx
@@ -27,7 +27,7 @@ export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElemen
       content: React.ReactNode;
       // @Todo
       // tooltip: string | TooltipProps;
-      tooltip: string;
+      tooltip?: string;
     };
     text: React.ReactNode;
   }[];
@@ -115,8 +115,8 @@ export const PageHeader: React.FC<PageHeaderProps> = props => {
   return (
     <Flex className={cx(styles.root, className)} gap={20} {...otherProps}>
       {icon && <img alt="icon" className={styles.icon} src={icon} />}
-      <Flex flex="2" justify="space-between" vertical>
-        {renderTitle()}
+      <Flex className={styles.content} flex="2" justify="space-between" vertical>
+        <div className={styles.titleBox}>{renderTitle()}</div>
         <Flex align="center" className={styles.descriptions} gap={4}>
           {status && <Badge size="small" {...status} />}
           {renderDescriptions()}

diff --git a/src/Page/Header/style.ts b/src/Page/Header/style.ts
@@ -4,7 +4,7 @@ export const useStyles = createStyles(
   ({ css, token, prefixCls }) => {
     return {
       root: css`
-        padding: 16px 24px;
+        padding: ${token.padding}px;
         background-color: ${token.colorBgBase};
         border-radius: ${token.borderRadius}px;
         box-shadow: ${token.boxShadowTertiary};
@@ -15,6 +15,12 @@ export const useStyles = createStyles(
         background-color: ${token.colorFillTertiary};
         border-radius: ${token.borderRadiusLG}px;
       `,
+      content: css`
+        padding: ${token.paddingXXS}px 0;
+      `,
+      titleBox: css`
+        margin-bottom: ${token.marginSM}px;
+      `,
       title: css`
         font-size: ${token.fontSizeHeading5}px;
         font-weight: 700;

diff --git a/src/Page/style.ts b/src/Page/style.ts
@@ -7,13 +7,7 @@ export const useStyles = createStyles(
         width: inherit;
         height: 100%;
         min-height: inherit;
-        padding: 20px 20px 32px;
-      `,
-      content: css`
-        padding: 16px 24px;
-        background-color: ${token.colorBgBase};
-        border-radius: ${token.borderRadius}px;
-        box-shadow: ${token.boxShadowTertiary};
+        padding: ${token.padding}px ${token.paddingLG}px ${token.paddingXL}px;
       `,
     };
   },