This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch release-v0.21
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/release-v0.21 by this push:
new 006d13b31 fix: adjust the style for page header (#6886) (#6887)
006d13b31 is described below
commit 006d13b31f2304109169c284f7410c600c2e77d3
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Mon Jan 29 11:06:54 2024 +0800
fix: adjust the style for page header (#6886) (#6887)
Co-authored-by: 青湛 <[email protected]>
---
config-ui/src/components/page-header/index.tsx | 4 +++-
config-ui/src/components/page-header/styled.ts | 4 ++++
config-ui/src/routes/blueprint/home/index.tsx | 12 ++++++------
3 files changed, 13 insertions(+), 7 deletions(-)
diff --git a/config-ui/src/components/page-header/index.tsx
b/config-ui/src/components/page-header/index.tsx
index c4de583d0..3320f2e3f 100644
--- a/config-ui/src/components/page-header/index.tsx
+++ b/config-ui/src/components/page-header/index.tsx
@@ -27,10 +27,11 @@ interface Props {
path: string;
}>;
extra?: React.ReactNode;
+ description?: string;
children: React.ReactNode;
}
-export const PageHeader = ({ breadcrumbs, extra, children }: Props) => {
+export const PageHeader = ({ breadcrumbs, extra, description, children }:
Props) => {
return (
<S.Container>
<S.Title>
@@ -46,6 +47,7 @@ export const PageHeader = ({ breadcrumbs, extra, children }:
Props) => {
</S.Breadcrumbs>
<S.Extra>{extra}</S.Extra>
</S.Title>
+ <S.Description>{description}</S.Description>
<S.Content>{children}</S.Content>
</S.Container>
);
diff --git a/config-ui/src/components/page-header/styled.ts
b/config-ui/src/components/page-header/styled.ts
index 8dbd5bbb4..3dd132e69 100644
--- a/config-ui/src/components/page-header/styled.ts
+++ b/config-ui/src/components/page-header/styled.ts
@@ -24,6 +24,10 @@ export const Title = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
+`;
+
+export const Description = styled.p`
+ margin-top: 12px;
margin-bottom: 36px;
`;
diff --git a/config-ui/src/routes/blueprint/home/index.tsx
b/config-ui/src/routes/blueprint/home/index.tsx
index 44f1c0b3e..4a4853c4b 100644
--- a/config-ui/src/routes/blueprint/home/index.tsx
+++ b/config-ui/src/routes/blueprint/home/index.tsx
@@ -94,11 +94,14 @@ export const BlueprintHomePage = () => {
{ name: 'Advanced', path: PATHS.BLUEPRINTS() },
{ name: 'Blueprints', path: PATHS.BLUEPRINTS() },
]}
+ extra={
+ <Button type="primary" icon={<PlusOutlined />}
onClick={handleShowDialog}>
+ New Blueprint
+ </Button>
+ }
+ description="This is a complete list of all Blueprints you have created,
whether they belong to Projects or not."
>
<Flex vertical gap="middle">
- <p style={{ margin: 0 }}>
- This is a complete list of all Blueprints you have created, whether
they belong to Projects or not.
- </p>
<Flex justify="space-between">
<Radio.Group optionType="button" value={type} onChange={({ target: {
value } }) => setType(value)}>
<Radio value="all">All</Radio>
@@ -108,9 +111,6 @@ export const BlueprintHomePage = () => {
</Radio>
))}
</Radio.Group>
- <Button type="primary" icon={<PlusOutlined />}
onClick={handleShowDialog}>
- New Blueprint
- </Button>
</Flex>
<Table
rowKey="id"
