fix: community

Author: Holybasil

src/app/community/Join/CardLarge.tsx

@@ -1,9 +1,10 @@
+import Image from "next/image"
 import { makeStyles } from "tss-react/mui"
 
 import { Box, Button, Card, Stack, SvgIcon, Typography } from "@mui/material"
 
+import ScrollGenericIcon from "@/assets/images/community/scroll_generic.png"
 import CombinationMarkIcon from "@/assets/svgs/community/combination_mark.svg"
-import ScrollGenericIcon from "@/assets/svgs/community/scroll_generic.svg"
 import ArrowSvg from "@/assets/svgs/ecosystem/arrow.svg"
 
 const useStyles = makeStyles()(theme => ({
@@ -34,6 +35,14 @@ const useStyles = makeStyles()(theme => ({
       marginBottom: "3.3rem",
     },
   },
+  genericIcon: {
+    maxHeight: "22rem",
+    width: "auto",
+    [theme.breakpoints.down("sm")]: {
+      height: "auto",
+      width: "100%",
+    },
+  },
 }))
 
 const CardLarge = props => {
@@ -43,7 +52,7 @@ const CardLarge = props => {
 
   return (
     <Card {...restProps} elevation={0} classes={{ root: classes.card }}>
-      <Stack direction="row" justifyContent="space-between" position="relative">
+      <Stack direction={["column", "row"]} justifyContent="space-between" position="relative">
         <Box>
           <SvgIcon
             sx={{
@@ -85,8 +94,8 @@ const CardLarge = props => {
             Visit Level Up Site
           </Button>
         </Box>
-        <Box sx={{ justifySelf: "flex-end", position: ["absolute", "unset"], right: "-1.3rem", bottom: "-0.8rem" }}>
-          <SvgIcon sx={{ height: ["10rem", "100%"], width: ["auto", "auto"] }} component={ScrollGenericIcon} inheritViewBox></SvgIcon>
+        <Box sx={{ justifySelf: "flex-end", alignSelf: "end" }}>
+          <Image src={ScrollGenericIcon} className={classes.genericIcon} alt="Scroll Generic Icon" />
         </Box>
       </Stack>
     </Card>

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from "next"
-import React from "react"
+import React, { Suspense } from "react"
 
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter"
 
@@ -43,7 +43,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </AppRouterCacheProvider>
         {process.env.NODE_ENV === "production" && (
           <>
-            <GoogleAnalytics></GoogleAnalytics>
+            <Suspense fallback={null}>
+              <GoogleAnalytics></GoogleAnalytics>
+            </Suspense>
             <WebVitals></WebVitals>
             {/* <SentrySetting></SentrySetting> */}
           </>

src/assets/images/community/scroll_generic.png

@@ -1,6 +1,6 @@
 "use client"
 
-import { usePathname } from "next/navigation"
+import { usePathname, useSearchParams } from "next/navigation"
 import { useEffect } from "react"
 import { isMobile } from "react-device-detect"
 import ReactGA from "react-ga4"
@@ -15,19 +15,20 @@ if (process.env.NODE_ENV === "production" && isMainnet) {
     customBrowserType: !isMobile ? "desktop" : "web3" in window || "ethereum" in window ? "mobileWeb3" : "mobileRegular",
   })
   ReactGA.event("web_version", {
-    version: process.env.NEXT_PUBLIC_APP_VERSION,
+    version: process.env.NEXT_PUBLIC_VERSION,
   })
 }
 
 // gtagOptions https://developers.google.com/analytics/devguides/collection/ga4/reference/config#send_page_view
 
 const GoogleAnalytics = () => {
   const pathname = usePathname()
+  const searchParams = useSearchParams()
   useEffect(() => {
     if (pathname) {
-      ReactGA.send({ hitType: "pageview", page: pathname })
+      ReactGA.send({ hitType: "pageview", page: `${pathname}?${searchParams}` })
     }
-  }, [pathname])
+  }, [pathname, searchParams])
 
   return null
 }

src/assets/svgs/community/combination_mark.svg

@@ -1,9 +1,9 @@
 import ContributeIcon from "@/assets/svgs/community/contribute.svg"
 import DiscordIcon from "@/assets/svgs/community/discord.svg"
-import ForumIcon from "@/assets/svgs/community/forum.svg"
+import GovernanceIcon from "@/assets/svgs/community/governance.svg"
 
 export const DISCORD_LINK = "https://discord.gg/scroll"
-export const COMMUNITY_FORUM_LINK = "https://gov.scroll.io/forum"
+export const COMMUNITY_FORUM_LINK = "https://gov.scroll.io/info"
 export const CONTRIBUTE_TO_SCROLL_LINK = "https://github.com/scroll-tech/contribute-to-scroll"
 
 export const COMMUNITY_EXPLORER_LIST = [
@@ -14,9 +14,9 @@ export const COMMUNITY_EXPLORER_LIST = [
     content: "Connect with other Scroll developers and users",
   },
   {
-    icon: ForumIcon,
+    icon: GovernanceIcon,
     href: COMMUNITY_FORUM_LINK,
-    title: "Governance Forum",
+    title: "Go to Governance",
     content: "Discuss and propose changes to Scroll",
   },
   {