fix: adaptation

Holybasil · Holybasil · commit b7261d50b53f · 2025-01-26T10:46:06.000+08:00
diff --git a/src/app/SCR-sSCR/Explaination/index.tsx b/src/app/SCR-sSCR/Explaination/index.tsx
@@ -13,7 +13,7 @@ import SectionHeader from "@/components/SectionHeader"
 import data from "./data"
 
 const Explaination = () => {
-  const wrapperRef = useRef()
+  const wrapperRef = useRef<HTMLDivElement>(null)
 
   return (
     <ScrollExpandedBg sx={{ pt: ["6rem", "9.6rem"], pb: ["8rem", "14rem"] }} anchorEl={wrapperRef} fastScrollIn>
diff --git a/src/app/_canvas/components/Tooltip/index.tsx b/src/app/_canvas/components/Tooltip/index.tsx
@@ -12,8 +12,8 @@ const ToolTip = props => {
       disableFocusListener={!isDesktop}
       disableTouchListener={!isDesktop}
       followCursor
-      PopperProps={{
-        popperOptions: {
+      slotProps={{
+        popper: {
           modifiers: [
             {
               name: "offset",
@@ -29,8 +29,6 @@ const ToolTip = props => {
             },
           ],
         },
-      }}
-      slotProps={{
         tooltip: {
           sx: {
             [`&.${tooltipClasses.tooltip}`]: {
diff --git a/src/app/developer-nft/coming-soon/Stepper/index.tsx b/src/app/developer-nft/coming-soon/Stepper/index.tsx
@@ -91,7 +91,7 @@ const NFTStepper = () => {
                 labelContainer: classes.stepLabelContainer,
                 label: classes.stepLabelText,
               }}
-              StepIconComponent={PhraseStepIcon}
+              slots={{ stepIcon: PhraseStepIcon }}
               optional={
                 // TODO: NumberTypography not allow component="span"
                 <Typography
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Metadata } from "next"
 import React, { Suspense } from "react"
 
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
+import InitColorSchemeScript from "@mui/material/InitColorSchemeScript"
 
 import GlobalComponents from "@/components/GlobalComponents"
 // import GoogleAnalytics from "@/components/GoogleAnalytics"
@@ -21,13 +22,14 @@ export const metadata: Metadata = ROOT_METADATA
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link rel="preconnect" href={process.env.NEXT_PUBLIC_API_BASE_URI} crossOrigin="anonymous" />
         <link rel="dns-prefetch" href={process.env.NEXT_PUBLIC_API_BASE_URI} crossOrigin="anonymous" />
         <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
       </head>
       <body>
+        <InitColorSchemeScript attribute="class"></InitColorSchemeScript>
         <AppRouterCacheProvider options={{ key: "css" }}>
           <ScrollThemeProvider>
             <VersionChecker>
diff --git a/src/app/scrETH/Explaination/index.tsx b/src/app/scrETH/Explaination/index.tsx
@@ -13,7 +13,7 @@ import SectionHeader from "@/components/SectionHeader"
 import data from "./data"
 
 const Explaination = () => {
-  const wrapperRef = useRef()
+  const wrapperRef = useRef<HTMLDivElement>(null)
 
   return (
     <ScrollExpandedBg sx={{ pt: ["6.4rem", "9.6rem"], pb: ["8rem", "14rem"] }} anchorEl={wrapperRef} fastScrollIn>
diff --git a/src/app/sessions/Header/TotalMarks.tsx b/src/app/sessions/Header/TotalMarks.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useQuery } from "@tanstack/react-query"
-import { motion } from "framer-motion"
+import { motion } from "motion/react"
 
 import { Box, Divider, Skeleton, Stack, Typography } from "@mui/material"
 
@@ -115,9 +115,7 @@ const TotalPoints = () => {
                 How does this work
               </Typography>
               <QATooltip title="Providing liquidity in listed DEXs boosts your accrual rate. The more useful and volatile your liquidity pair, the higher the boost. Additional boosts will be introduced by Scroll’s upcoming LRTs soon.">
-                <span className="text-[0] cursor-pointer">
-                  <QaSvg></QaSvg>
-                </span>
+                <QaSvg className="cursor-pointer"></QaSvg>
               </QATooltip>
             </Stack>
             <Typography></Typography>
diff --git a/src/app/sessions/Protocols/ProtocolSection.tsx b/src/app/sessions/Protocols/ProtocolSection.tsx
@@ -42,9 +42,7 @@ const ProtocolSection = (props: ProtocolSectionProps) => {
               <span>{tag}</span>
               {!!PROTOCOL_MARKS_TOOLTIP_MAP[title] && (
                 <QATooltip disabled={!PROTOCOL_MARKS_TOOLTIP_MAP[title]} title={PROTOCOL_MARKS_TOOLTIP_MAP[title]}>
-                  <span className="text-[0] cursor-pointer">
-                    <QaSvg className="w-[1.6rem]"></QaSvg>
-                  </span>
+                  <QaSvg className="w-[1.6rem] cursor-pointer"></QaSvg>
                 </QATooltip>
               )}
             </Stack>
diff --git a/src/app/sessions/TotalMarks/index.tsx b/src/app/sessions/TotalMarks/index.tsx
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -2,14 +2,15 @@
 
 // @ts-ignore
 import { ThemeProvider, createTheme } from "@mui/material/styles"
-import { getInitColorSchemeScript } from "@mui/material/styles"
 
 // import darkTheme from "./dark"
 import lightTheme from "./light"
 
 const ScrollThemeProvider = ({ children }) => {
   const theme = createTheme({
-    cssVariables: true,
+    cssVariables: {
+      colorSchemeSelector: "class",
+    },
     colorSchemes: {
       light: lightTheme,
       dark: lightTheme,
@@ -18,11 +19,7 @@ const ScrollThemeProvider = ({ children }) => {
 
   // not use StyledEngineProvider, so mui style > tailwind style
   return (
-    <ThemeProvider theme={theme}>
-      {getInitColorSchemeScript({
-        // colorSchemeStorageKey: "mui-mode",
-        // defaultMode: "system",
-      })}
+    <ThemeProvider disableTransitionOnChange theme={theme}>
       {children}
     </ThemeProvider>
   )
