fix: style

Author: Holybasil

src/app/cloak/LearnMore/index.tsx

@@ -1,18 +1,22 @@
+"use client"
+
 import { Box, Container } from "@mui/material"
 
 import Button from "@/components/Button"
 import { CLOAK_HERO_LINKS } from "@/constants"
+import useCheckViewport from "@/hooks/useCheckViewport"
 
 const LearnMore = () => {
+  const { isMobile } = useCheckViewport()
   return (
-    <Box sx={{ backgroundColor: "themeBackground.brand", py: "6rem" }}>
+    <Box sx={{ backgroundColor: "themeBackground.highlight", py: "5.6rem" }}>
       <Container
         sx={{
           display: "flex",
           justifyContent: "center",
         }}
       >
-        <Button size="small" whiteButton href={CLOAK_HERO_LINKS[0].href} className="!w-[280px]">
+        <Button size={isMobile ? "small" : "medium"} whiteButton href={CLOAK_HERO_LINKS[0].href} className="!w-[280px] md:!w-[340px]">
           Learn more about Cloak’s design
         </Button>
       </Container>

src/app/cloak/Workflow/AppCard/index.tsx

@@ -24,7 +24,7 @@ const AppCard = props => {
           "list image"
         `,
         ],
-        p: ["1.5rem 1.5rem 2rem", "2rem 3rem 2.4rem", "2rem 3rem 2.4rem", "2.7rem 4.5rem"],
+        p: ["1.5rem 1.1rem 2rem", "2rem 3rem 2.4rem", "2rem 3rem 2.4rem", "2.7rem 4.5rem 2.7rem 5.2rem"],
         borderRadius: "2rem",
         backgroundColor: "rgba(235, 194, 142, 0.23)",
         rowGap: ["0.8rem", "1.4rem"],
@@ -38,6 +38,7 @@ const AppCard = props => {
           lineHeight: 1.4,
           fontWeight: 500,
           pt: [0, 0, "0.5rem"],
+          pl: ["8px", 0],
           gridArea: "title",
         }}
       >
@@ -62,13 +63,12 @@ const AppCard = props => {
         component="ul"
         sx={{
           gridArea: "list",
-          gap: "3px",
+          gap: ["3px", "3px", "6px"],
           listStyle: "none",
           "& li": {
             position: "relative",
             whiteSpace: "nowrap",
             pl: ["10px", "12px"],
-            ml: ["-4px", "-8px"],
             "&::before": {
               content: '""',
               position: "absolute",

src/app/template.tsx

@@ -6,19 +6,15 @@ import { Box } from "@mui/material"
 
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
-import useHideFooter from "@/hooks/useHideFooter"
-import { isSepolia } from "@/utils"
 
 import "./global"
 
 export default function RootTemplate({ children }: { children: ReactNode }) {
-  const hideFooter = useHideFooter()
-
   return (
     <Box sx={{ minHeight: "100vh" }}>
       <Header></Header>
       {children}
-      {!(isSepolia || hideFooter) && <Footer />}
+      <Footer />
     </Box>
   )
 }

src/components/Button/index.tsx

@@ -29,7 +29,7 @@ const sizes = {
   small: {
     height: "4rem",
     fontSize: { desktop: "1.4rem", mobile: "1.4rem" },
-    fontWeight: 500,
+    fontWeight: 600,
   },
   medium: {
     height: "4.8rem",

src/components/Footer/index.tsx

@@ -1,10 +1,20 @@
+"use client"
+
+import useHideFooter from "@/hooks/useHideFooter"
+import { isSepolia } from "@/utils"
+
 import PureFooter from "./PureFooter"
 import Support from "./Support"
 
 const Footer = () => {
+  const { hideSupport } = useHideFooter()
+
+  if (isSepolia) {
+    return null
+  }
   return (
     <>
-      <Support />
+      {!hideSupport && <Support />}
       <PureFooter></PureFooter>
     </>
   )

src/hooks/useHideFooter.ts

@@ -1,15 +1,13 @@
-// import { usePathname } from "next/navigation"
-// import { useMemo } from "react"
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useMemo } from "react"
 
 const useHideFooter = () => {
-  // const pathname = usePathname()
-
-  // const hidden = useMemo(
-  //   () => pathname.match(/^\/canvas(\/\w*)?$/g),
-  //   [pathname],
-  // )
-  // return hidden
-  return false
+  const pathname = usePathname()
+
+  const hideSupport = useMemo(() => pathname.match(/^\/cloak(\/\w*)?$/g), [pathname])
+  return { hideSupport }
 }
 
 export default useHideFooter

src/types/css.d.ts

@@ -0,0 +1,25 @@
+declare module "*.css" {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module "*.scss" {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module "*.sass" {
+  const content: { [className: string]: string }
+  export default content
+}
+
+// 为第三方库的 CSS 导入添加声明
+declare module "swiper/css" {
+  const content: any
+  export default content
+}
+
+declare module "swiper/css/*" {
+  const content: any
+  export default content
+}