Governance menu

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

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",

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>

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)}>

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,

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",
     },