From ca9cf23a5cb63caa8fe2627b03c4595d6489d231 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Mar 2024 15:03:58 +0700
Subject: [PATCH 1/4] feat: page header component

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/PageContainer.tsx          |  7 +----
 src/lib/components/PageHeaderContainer.tsx    | 28 +++++++++++++++++++
 .../components/validator-top/index.tsx        | 10 ++-----
 src/lib/pages/validator-details/index.tsx     | 13 +++++----
 src/lib/pages/validators/index.tsx            | 11 ++------
 6 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/components/PageHeaderContainer.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ee2ac43f..0fc0b7e52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#852](https://github.com/alleslabs/celatone-frontend/pull/852) Create PageHeaderContainer component
 - [#851](https://github.com/alleslabs/celatone-frontend/pull/851) Add amp validator list page
 - [#848](https://github.com/alleslabs/celatone-frontend/pull/848) Change Initia's config to use the new chain IDs (mahalo-2, minimove-2, miniwasm-2)
 - [#847](https://github.com/alleslabs/celatone-frontend/pull/847) Add amp proposal details page
diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
index 8abb443e7..9a634f182 100644
--- a/src/lib/components/PageContainer.tsx
+++ b/src/lib/components/PageContainer.tsx
@@ -1,12 +1,7 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
-import type { ReactNode } from "react";
 
-interface PageContainerProps extends BoxProps {
-  children: ReactNode;
-}
-
-const PageContainer = ({ children, ...containerProps }: PageContainerProps) => (
+const PageContainer = ({ children, ...containerProps }: BoxProps) => (
   <Box
     as="main"
     p={{ base: "16px", md: "48px" }}
diff --git a/src/lib/components/PageHeaderContainer.tsx b/src/lib/components/PageHeaderContainer.tsx
new file mode 100644
index 000000000..2fda030ec
--- /dev/null
+++ b/src/lib/components/PageHeaderContainer.tsx
@@ -0,0 +1,28 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
+
+const PageHeaderContainer = ({
+  children,
+  bgColor,
+  ...containerProps
+}: FlexProps) => (
+  <Flex
+    as="header"
+    direction="column"
+    gap={{ base: "24px", md: "32px" }}
+    px={{ base: "16px", md: "48px" }}
+    pt={{ base: "16px", md: "48px" }}
+    bgGradient={
+      bgColor
+        ? {
+            md: `linear(to-b, ${bgColor}, transparent)`,
+          }
+        : undefined
+    }
+    {...containerProps}
+  >
+    {children}
+  </Flex>
+);
+
+export default PageHeaderContainer;
diff --git a/src/lib/pages/validator-details/components/validator-top/index.tsx b/src/lib/pages/validator-details/components/validator-top/index.tsx
index e1184e06f..ff40e973f 100644
--- a/src/lib/pages/validator-details/components/validator-top/index.tsx
+++ b/src/lib/pages/validator-details/components/validator-top/index.tsx
@@ -22,13 +22,7 @@ export const ValidatorTop = ({
   totalVotingPower,
   singleStakingDenom,
 }: ValidatorTopProps) => (
-  <Flex
-    direction="column"
-    gap={5}
-    px={{ base: "16px", md: "48px" }}
-    pt={{ base: "16px", md: "48px" }}
-    bgGradient="linear(to-b, success.background, transparent)"
-  >
+  <>
     <Breadcrumb
       items={[
         {
@@ -97,5 +91,5 @@ export const ValidatorTop = ({
         />
       </Flex>
     </Flex>
-  </Flex>
+  </>
 );
diff --git a/src/lib/pages/validator-details/index.tsx b/src/lib/pages/validator-details/index.tsx
index 706e14d26..961c33964 100644
--- a/src/lib/pages/validator-details/index.tsx
+++ b/src/lib/pages/validator-details/index.tsx
@@ -12,6 +12,7 @@ import {
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import PageHeaderContainer from "lib/components/PageHeaderContainer";
 import { ErrorFetching, InvalidState } from "lib/components/state";
 import { useAssetInfos } from "lib/services/assetService";
 import { useValidatorData } from "lib/services/validatorService";
@@ -71,11 +72,13 @@ const ValidatorDetailsBody = ({
 
   return (
     <>
-      <ValidatorTop
-        info={data.info}
-        totalVotingPower={data.totalVotingPower}
-        singleStakingDenom={singleStakingDenom}
-      />
+      <PageHeaderContainer bgColor="success.background">
+        <ValidatorTop
+          info={data.info}
+          totalVotingPower={data.totalVotingPower}
+          singleStakingDenom={singleStakingDenom}
+        />
+      </PageHeaderContainer>
       <PageContainer>
         <Tabs
           index={Object.values(TabIndex).indexOf(tab)}
diff --git a/src/lib/pages/validators/index.tsx b/src/lib/pages/validators/index.tsx
index 202ad1d58..fadb2a7b4 100644
--- a/src/lib/pages/validators/index.tsx
+++ b/src/lib/pages/validators/index.tsx
@@ -6,6 +6,7 @@ import { AmpEvent, track } from "lib/amplitude";
 import { useGovConfig, useMobile } from "lib/app-provider";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
+import PageHeaderContainer from "lib/components/PageHeaderContainer";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { useDebounce } from "lib/hooks";
@@ -65,13 +66,7 @@ const Validators = () => {
   const scrollComponentId = "validator-table-header";
   return (
     <>
-      <Flex
-        direction="column"
-        gap={{ base: "24px", md: "32px" }}
-        px={{ base: "16px", md: "48px" }}
-        pt={{ base: "16px", md: "48px" }}
-        bgGradient={{ md: "linear(to-b, success.background, transparent)" }}
-      >
+      <PageHeaderContainer bgColor="success.background">
         <Flex direction="column" gap={1}>
           <Heading as="h5" variant="h5" color="text.main" fontWeight={600}>
             Validators
@@ -115,7 +110,7 @@ const Validators = () => {
             amptrackSection="validator-list-search"
           />
         </Flex>
-      </Flex>
+      </PageHeaderContainer>
       <PageContainer>
         <ValidatorsTable
           data={data}

From 2de50caef337eb18f2aacf5ebe2e40bd7e8915ce Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Mar 2024 15:05:18 +0700
Subject: [PATCH 2/4] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fc0b7e52..14c51db1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#852](https://github.com/alleslabs/celatone-frontend/pull/852) Create PageHeaderContainer component
+- [#854](https://github.com/alleslabs/celatone-frontend/pull/854) Create PageHeaderContainer component
 - [#851](https://github.com/alleslabs/celatone-frontend/pull/851) Add amp validator list page
 - [#848](https://github.com/alleslabs/celatone-frontend/pull/848) Change Initia's config to use the new chain IDs (mahalo-2, minimove-2, miniwasm-2)
 - [#847](https://github.com/alleslabs/celatone-frontend/pull/847) Add amp proposal details page

From d05118d89a7aebcbbf5f3620321c6ba48ac66e43 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Mar 2024 16:46:07 +0700
Subject: [PATCH 3/4] fix: margin

---
 src/lib/layout/SubHeader.tsx | 84 +++++++++++++++++-------------------
 src/lib/layout/index.tsx     |  3 +-
 2 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index 6f6229591..fcb5d62cd 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -70,52 +70,48 @@ const SubHeader = () => {
   };
 
   return (
-    <Flex px={6} alignItems="center" h="full" justifyContent="space-between">
-      <Flex h="full">
-        {subHeaderMenu.map((item) => (
-          <AppLink
-            href={item.slug}
-            key={item.slug}
-            onClick={() => trackOnClick(item.name)}
-          >
-            <Flex
-              alignItems="center"
-              px={4}
-              gap={2}
-              h="full"
-              borderBottomWidth={2}
-              borderColor={
-                isCurrentPage(item.slug) ? activeColor : "transparent"
-              }
-              transition="all 0.25s ease-in-out"
-              _hover={{ borderColor: activeColor }}
-              sx={{
-                _hover: {
-                  "> svg, > p": {
-                    color: activeColor,
-                    transition: "all .25s ease-in-out",
-                  },
-                  borderBottomWidth: 2,
-                  borderColor: activeColor,
+    <Flex px={6} h="full">
+      {subHeaderMenu.map((item) => (
+        <AppLink
+          href={item.slug}
+          key={item.slug}
+          onClick={() => trackOnClick(item.name)}
+        >
+          <Flex
+            alignItems="center"
+            px={4}
+            gap={2}
+            h="full"
+            borderBottomWidth={2}
+            borderColor={isCurrentPage(item.slug) ? activeColor : "transparent"}
+            transition="all 0.25s ease-in-out"
+            _hover={{ borderColor: activeColor }}
+            sx={{
+              _hover: {
+                "> svg, > p": {
+                  color: activeColor,
+                  transition: "all .25s ease-in-out",
                 },
-              }}
+                borderBottomWidth: 2,
+                borderColor: activeColor,
+              },
+            }}
+          >
+            <CustomIcon
+              boxSize={3}
+              name={item.icon}
+              color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
+            />
+            <Text
+              variant="body2"
+              fontWeight={700}
+              color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
             >
-              <CustomIcon
-                boxSize={3}
-                name={item.icon}
-                color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
-              />
-              <Text
-                variant="body2"
-                fontWeight={700}
-                color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
-              >
-                {item.name}
-              </Text>
-            </Flex>
-          </AppLink>
-        ))}
-      </Flex>
+              {item.name}
+            </Text>
+          </Flex>
+        </AppLink>
+      ))}
     </Flex>
   );
 };
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 5066eb63a..1e54b3bea 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -65,7 +65,7 @@ const Layout = ({ children }: LayoutProps) => {
           <GridItem
             bg={{ base: "background.main", md: "gray.900" }}
             area="subheader"
-            mb="1"
+            mb={1}
             py={{ base: 2, md: 0 }}
             px={{ base: 4, md: 0 }}
           >
@@ -75,6 +75,7 @@ const Layout = ({ children }: LayoutProps) => {
             bg={{ base: "background.main", md: "gray.900" }}
             area="nav"
             overflowY="auto"
+            mr={1}
           >
             <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
           </GridItem>

From b3fc2de8a2451587b862a8398ae7d1c9cd1af2aa Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 27 Mar 2024 16:52:31 +0700
Subject: [PATCH 4/4] fix: change as

---
 src/lib/components/PageHeaderContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/PageHeaderContainer.tsx b/src/lib/components/PageHeaderContainer.tsx
index 2fda030ec..88147faf4 100644
--- a/src/lib/components/PageHeaderContainer.tsx
+++ b/src/lib/components/PageHeaderContainer.tsx
@@ -7,7 +7,7 @@ const PageHeaderContainer = ({
   ...containerProps
 }: FlexProps) => (
   <Flex
-    as="header"
+    as="section"
     direction="column"
     gap={{ base: "24px", md: "32px" }}
     px={{ base: "16px", md: "48px" }}