From e208889d4c05842bbd8eff035b8a027d4178baa2 Mon Sep 17 00:00:00 2001
From: holybasil <holybasil.1128@gmail.com>
Date: Thu, 24 Oct 2024 08:44:38 +0800
Subject: [PATCH 1/2] fix: add governance menu

---
 src/assets/svgs/header/Forum.svg         |  7 +++++
 src/assets/svgs/header/Home.svg          |  3 ++
 src/components/Header/SubmenuLink.tsx    |  2 +-
 src/components/Header/constants.ts       | 40 ++++++++++++++++++++++++
 src/components/Header/desktop_header.tsx |  9 ++++--
 src/components/Header/mobile_header.tsx  | 18 ++++++++++-
 6 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/svgs/header/Forum.svg
 create mode 100644 src/assets/svgs/header/Home.svg

diff --git a/src/assets/svgs/header/Forum.svg b/src/assets/svgs/header/Forum.svg
new file mode 100644
index 00000000..f9a8c988
--- /dev/null
+++ b/src/assets/svgs/header/Forum.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9042 9.37015C18.4464 9.37015 18.086 9.74028 18.086 10.1883C18.086 10.6364 18.4561 11.0065 18.9042 11.0065C20.2581 11.0065 21.3685 12.1072 21.3685 13.4708V20.0357C21.3685 20.4838 20.9983 20.8539 20.5503 20.8539C20.4042 20.8539 20.2678 20.8149 20.1412 20.7468L17.6769 19.3247C17.5503 19.2565 17.4139 19.2175 17.2678 19.2175H12.3393C10.9854 19.2175 9.87497 18.1169 9.87497 16.7533V15.1072C9.87497 14.6494 9.50484 14.289 9.05679 14.289C8.60874 14.289 8.23861 14.6591 8.23861 15.1072V16.7533C8.23861 19.013 10.0795 20.8539 12.3393 20.8539H17.0438L19.3133 22.1688C19.6834 22.3831 20.112 22.5 20.5405 22.5C21.8944 22.5 23.0048 21.3994 23.0048 20.0357V13.4708C23.0048 11.2111 21.1639 9.37015 18.9042 9.37015Z" fill="currentColor"/>
+<path d="M4.4594 14.6299C4.88797 14.6299 5.31654 14.513 5.68667 14.2987L7.95615 12.9838H12.6607C14.9204 12.9838 16.7613 11.1429 16.7613 8.88314V5.60068C16.7613 3.34094 14.9204 1.50004 12.6607 1.50004H6.09576C3.83602 1.4903 1.99512 3.3312 1.99512 5.59094V12.1559C1.99512 13.5098 3.09576 14.6201 4.4594 14.6201V14.6299ZM3.64122 5.60068C3.64122 4.24679 4.74187 3.1364 6.1055 3.1364H12.6704C14.0243 3.1364 15.1347 4.23705 15.1347 5.60068V8.88314C15.1347 10.237 14.0341 11.3474 12.6704 11.3474H7.74186C7.59576 11.3474 7.45939 11.3864 7.33277 11.4546L4.86849 12.8766C4.74187 12.9448 4.6055 12.9838 4.4594 12.9838C4.01135 12.9838 3.64122 12.6137 3.64122 12.1656V5.60068Z" fill="currentColor"/>
+<path d="M6.09576 8.05522C6.54763 8.05522 6.91394 7.68891 6.91394 7.23704C6.91394 6.78517 6.54763 6.41886 6.09576 6.41886C5.64389 6.41886 5.27758 6.78517 5.27758 7.23704C5.27758 7.68891 5.64389 8.05522 6.09576 8.05522Z" fill="currentColor"/>
+<path d="M9.38796 8.05522C9.83983 8.05522 10.2061 7.68891 10.2061 7.23704C10.2061 6.78517 9.83983 6.41886 9.38796 6.41886C8.93609 6.41886 8.56978 6.78517 8.56978 7.23704C8.56978 7.68891 8.93609 8.05522 9.38796 8.05522Z" fill="currentColor"/>
+<path d="M12.6704 8.05522C13.1223 8.05522 13.4886 7.68891 13.4886 7.23704C13.4886 6.78517 13.1223 6.41886 12.6704 6.41886C12.2186 6.41886 11.8522 6.78517 11.8522 7.23704C11.8522 7.68891 12.2186 8.05522 12.6704 8.05522Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/svgs/header/Home.svg b/src/assets/svgs/header/Home.svg
new file mode 100644
index 00000000..2adab7ec
--- /dev/null
+++ b/src/assets/svgs/header/Home.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1411 1.70393C12.3648 1.58201 12.6352 1.58201 12.8589 1.70393L22.6089 7.01745C22.85 7.14883 23 7.40144 23 7.676V9.00002C23 9.41423 22.6642 9.75002 22.25 9.75002H21.5V18.0118H22.25C22.6642 18.0118 23 18.3476 23 18.7618V21.7618C23 22.176 22.6642 22.5118 22.25 22.5118H2.75C2.33579 22.5118 2 22.176 2 21.7618V18.7618C2 18.3476 2.33579 18.0118 2.75 18.0118H3.5V9.75002H2.75C2.33579 9.75002 2 9.41423 2 9.00002V7.676C2 7.40144 2.15002 7.14883 2.3911 7.01745L12.1411 1.70393ZM5 18.0118H6.5V9.75002H5V18.0118ZM8 19.5118H3.5V21.0118H21.5V19.5118H17H14.75H10.25H8ZM10.25 18.0118H8V9.75002H10.25V18.0118ZM11.75 18.0118H13.25V9.75002H11.75V18.0118ZM14.75 18.0118H17V9.75002H14.75V18.0118ZM18.5 18.0118H20V9.75002H18.5V18.0118ZM21.5 8.25002H17H14.75H10.25H8H3.5V8.12141L12.5 3.21663L21.5 8.12141V8.25002Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Header/SubmenuLink.tsx b/src/components/Header/SubmenuLink.tsx
index b575986b..336f704d 100644
--- a/src/components/Header/SubmenuLink.tsx
+++ b/src/components/Header/SubmenuLink.tsx
@@ -67,7 +67,7 @@ const SubmenuLinkContent = ({ icon, label, text, isExternal }: { icon: any; labe
       {icon && <SvgIcon sx={{ fontSize: "2.4rem" }} component={icon} inheritViewBox></SvgIcon>}
       <Box>
         {text && <Typography fontWeight={600}>{text}</Typography>}
-        <Typography>{label}</Typography>
+        <Typography sx={{ whiteSpace: ["pre-wrap", "nowrap"] }}>{label}</Typography>
       </Box>
       {isExternal && (
         <SvgIcon
diff --git a/src/components/Header/constants.ts b/src/components/Header/constants.ts
index c8f9e821..a338b226 100644
--- a/src/components/Header/constants.ts
+++ b/src/components/Header/constants.ts
@@ -3,6 +3,8 @@ import { ReactComponent as CanvasAndBadgesSvg } from "@/assets/svgs/header/Canva
 import { ReactComponent as CommunitySvg } from "@/assets/svgs/header/Community.svg"
 import { ReactComponent as DocsSvg } from "@/assets/svgs/header/Doc.svg"
 import { ReactComponent as EthereumSvg } from "@/assets/svgs/header/Eth.svg"
+import { ReactComponent as ForumSvg } from "@/assets/svgs/header/Forum.svg"
+import { ReactComponent as HomeSvg } from "@/assets/svgs/header/Home.svg"
 import { ReactComponent as IssuesSvg } from "@/assets/svgs/header/Issues.svg"
 import { ReactComponent as LevelUpSvg } from "@/assets/svgs/header/LevelUp.svg"
 import { ReactComponent as ProjectsSvg } from "@/assets/svgs/header/Projects.svg"
@@ -223,6 +225,44 @@ const mainnetNavigations = [
       },
     ],
   },
+  {
+    label: "Governance",
+    key: "governance",
+    new: true,
+    children: [
+      {
+        children: [
+          {
+            text: "Home",
+            label: "Get to know Scroll governance",
+            key: "governance-home",
+            rootKey: "governance",
+            href: "https://gov.scroll.io",
+            icon: HomeSvg,
+            isExternal: true,
+          },
+          {
+            text: "Documentations",
+            label: "Browse all the details about Scroll governance",
+            key: "governance-doc",
+            rootKey: "governance",
+            href: "https://gov.scroll.io/docs",
+            icon: DocsSvg,
+            isExternal: true,
+          },
+          {
+            text: "Forum",
+            label: "Participate in all the governance discussions",
+            key: "governance-forum",
+            rootKey: "governance",
+            href: "https://gov.scroll.io/forum",
+            icon: ForumSvg,
+            isExternal: true,
+          },
+        ],
+      },
+    ],
+  },
   {
     label: "Resources",
     key: "resources",
diff --git a/src/components/Header/desktop_header.tsx b/src/components/Header/desktop_header.tsx
index 4fbbddee..65d30b00 100644
--- a/src/components/Header/desktop_header.tsx
+++ b/src/components/Header/desktop_header.tsx
@@ -172,16 +172,21 @@ const App = ({ currentMenu }) => {
         <SubMenuButton
           direction="row"
           alignItems="center"
-          spacing="6px"
+          // spacing="6px"
           dark={dark}
           className={currentMenu === item.key ? "active" : ""}
           onMouseEnter={e => handleMouseEnter(e, item.key)}
           onMouseLeave={handleMouseLeave}
         >
           <span>{item.label}</span>
+          {item.new && (
+            <Box sx={{ backgroundColor: "#B5F5EC", padding: "0 0.8rem", height: "2rem", lineHeight: "2rem", borderRadius: "0.4rem", ml: "0.4rem" }}>
+              <Typography sx={{ fontSize: "1.2rem", lineHeight: "2rem", fontWeight: 600 }}>NEW</Typography>
+            </Box>
+          )}
           <SvgIcon
             className={cx("expand-more", item.key === checked && "expand-more-reverse")}
-            sx={{ fontSize: "0.9rem" }}
+            sx={{ fontSize: "0.9rem", ml: "1rem" }}
             component={TriangleDownSvg}
             inheritViewBox
           ></SvgIcon>
diff --git a/src/components/Header/mobile_header.tsx b/src/components/Header/mobile_header.tsx
index de7efba3..f3c7eb98 100644
--- a/src/components/Header/mobile_header.tsx
+++ b/src/components/Header/mobile_header.tsx
@@ -148,7 +148,23 @@ const App = ({ currentMenu }) => {
               sx={{ py: "1rem" }}
               onClick={() => toggleCollapse(item.key)}
             >
-              {item.label} <ExpandMoreIcon fontSize="large" className={activeCollapse === item.key ? "active" : ""} />
+              <Stack direction="row" alignItems="center" spacing="0.8rem">
+                <span>{item.label} </span>
+                {item.new && (
+                  <Box
+                    sx={{
+                      backgroundColor: "#B5F5EC",
+                      padding: "0 0.8rem",
+                      height: "2rem",
+                      lineHeight: "2rem",
+                      borderRadius: "0.4rem",
+                    }}
+                  >
+                    <Typography sx={{ fontSize: "1.2rem", lineHeight: "2rem", fontWeight: 600 }}>NEW</Typography>
+                  </Box>
+                )}
+              </Stack>
+              <ExpandMoreIcon fontSize="large" className={activeCollapse === item.key ? "active" : ""} />
             </ListItem>
           ) : (
             <ListItem dark={dark} className={activeCollapse === item.key ? "active" : ""} sx={{ py: "1rem" }} onClick={() => toggleDrawer(false)}>

From 241d31dc519696e3b965cd984bafca31a2e3e894 Mon Sep 17 00:00:00 2001
From: holybasil <holybasil.1128@gmail.com>
Date: Mon, 21 Oct 2024 09:27:12 +0800
Subject: [PATCH 2/2] fix: community form link

---
 src/constants/community.ts         | 17 ++++++++---------
 src/pages/community/Join/index.tsx |  4 ++--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/constants/community.ts b/src/constants/community.ts
index 0288f738..5cdf5138 100644
--- a/src/constants/community.ts
+++ b/src/constants/community.ts
@@ -1,10 +1,9 @@
 import { ReactComponent as ContributeIcon } from "@/assets/svgs/community/contribute.svg"
 import { ReactComponent as DiscordIcon } from "@/assets/svgs/community/discord.svg"
-
-// import { ReactComponent as ForumIcon } from "@/assets/svgs/community/forum.svg"
+import { ReactComponent as ForumIcon } from "@/assets/svgs/community/forum.svg"
 
 export const DISCORD_LINK = "https://discord.gg/scroll"
-export const COMMUNITY_FORUM_LINK = "https://community.scroll.io/"
+export const COMMUNITY_FORUM_LINK = "https://gov.scroll.io/forum"
 export const CONTRIBUTE_TO_SCROLL_LINK = "https://github.com/scroll-tech/contribute-to-scroll"
 
 export const COMMUNITY_EXPLORER_LIST = [
@@ -14,12 +13,12 @@ export const COMMUNITY_EXPLORER_LIST = [
     title: "Join our Discord",
     content: "Connect with other Scroll developers and users",
   },
-  // {
-  //   icon: ForumIcon,
-  //   href: COMMUNITY_FORUM_LINK,
-  //   title: "Community Forum",
-  //   content: "Discuss and propose changes to Scroll",
-  // },
+  {
+    icon: ForumIcon,
+    href: COMMUNITY_FORUM_LINK,
+    title: "Governance Forum",
+    content: "Discuss and propose changes to Scroll",
+  },
   {
     icon: ContributeIcon,
     href: CONTRIBUTE_TO_SCROLL_LINK,
diff --git a/src/pages/community/Join/index.tsx b/src/pages/community/Join/index.tsx
index a0ad04f3..e444cb94 100644
--- a/src/pages/community/Join/index.tsx
+++ b/src/pages/community/Join/index.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles()(theme => ({
   flex: {
     marginTop: "4.8rem",
     display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
+    gridTemplateColumns: "repeat(3, 1fr)",
     gridGap: "3rem",
     [theme.breakpoints.down("md")]: {
       gridTemplateColumns: "100%",
@@ -22,7 +22,7 @@ const useStyles = makeStyles()(theme => ({
     },
   },
   large: {
-    gridColumn: "span 2",
+    gridColumn: "span 3",
     [theme.breakpoints.down("md")]: {
       gridColumn: "span 1",
     },