fix: adjust the style for page header (#6886)

apache · Jan 29, 2024 · 352cfe4 · 352cfe4
1 parent 21eb4ca
commit 352cfe4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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"