Merge pull request #10738 from ethereum/removeZenMode

Remove Zen mode from developer docs

Author: corwintines

src/components/Layout.tsx

@@ -3,7 +3,6 @@ import { ApolloProvider } from "@apollo/client"
 import { Flex } from "@chakra-ui/react"
 
 import Footer from "./Footer"
-import ZenMode from "./ZenMode"
 import Nav from "./Nav"
 import SideNav from "./SideNav"
 import SideNavMobile from "./SideNavMobile"
@@ -12,14 +11,10 @@ import TranslationBannerLegal from "./TranslationBannerLegal"
 import FeedbackWidget from "./FeedbackWidget"
 import { SkipLink } from "./SkipLink"
 
-import { ZenModeContext } from "../contexts/ZenModeContext"
 import { lightTheme as oldTheme } from "../theme"
 
-import { useKeyPress } from "../hooks/useKeyPress"
-
 import { isLangRightToLeft } from "../utils/translations"
 import { scrollIntoView } from "../utils/scrollIntoView"
-import { isMobile } from "../utils/isMobile"
 
 import type { Context } from "../types"
 
@@ -51,23 +46,11 @@ const Layout: React.FC<IProps> = ({
   pageContext,
   children,
 }) => {
-  const [isZenMode, setIsZenMode] = useState<boolean>(false)
   const [shouldShowSideNav, setShouldShowSideNav] = useState<boolean>(false)
 
-  // Exit Zen Mode on 'esc' click
-  useKeyPress(`Escape`, () => handleZenModeChange(false))
-
   useEffect(() => {
     if (path.includes("/docs/")) {
       setShouldShowSideNav(true)
-
-      if (localStorage.getItem("zen-mode") !== null) {
-        setIsZenMode(localStorage.getItem("zen-mode") === "true" && !isMobile())
-      }
-    } else {
-      // isZenMode and shouldShowSideNav only applicable in /docs pages
-      setIsZenMode(false)
-      setShouldShowSideNav(false)
     }
 
     if (location.hash && !location.hash.includes("gatsby")) {
@@ -76,16 +59,6 @@ const Layout: React.FC<IProps> = ({
     }
   }, [path, location])
 
-  const handleZenModeChange = (val?: boolean): void => {
-    // Use 'val' param if provided. Otherwise toggle
-    const newVal = val !== undefined ? val : !isZenMode
-
-    setIsZenMode(newVal)
-    if (localStorage) {
-      localStorage.setItem("zen-mode", String(newVal))
-    }
-  }
-
   const isPageLanguageEnglish = pageContext.isDefaultLang
   const isPageContentEnglish = !!pageContext.isContentEnglish
   const isLegal = !!pageContext.isLegal
@@ -101,61 +74,51 @@ const Layout: React.FC<IProps> = ({
 
   return (
     <ApolloProvider client={client}>
-      <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
-        <SkipLink hrefId="#main-content" />
-        <TranslationBanner
-          shouldShow={shouldShowTranslationBanner}
-          isPageContentEnglish={isPageContentEnglish}
-          isPageRightToLeft={isPageRightToLeft}
-          originalPagePath={pageContext.i18n.originalPath || ""}
-        />
-        <TranslationBannerLegal
-          shouldShow={isLegal}
-          isPageRightToLeft={isPageRightToLeft}
-          originalPagePath={pageContext.i18n.originalPath || ""}
-        />
-
+      <SkipLink hrefId="#main-content" />
+      <TranslationBanner
+        shouldShow={shouldShowTranslationBanner}
+        isPageContentEnglish={isPageContentEnglish}
+        isPageRightToLeft={isPageRightToLeft}
+        originalPagePath={pageContext.i18n.originalPath || ""}
+      />
+      <TranslationBannerLegal
+        shouldShow={isLegal}
+        isPageRightToLeft={isPageRightToLeft}
+        originalPagePath={pageContext.i18n.originalPath || ""}
+      />
+
+      <Flex
+        position="relative"
+        margin="0px auto"
+        minHeight="100vh"
+        flexFlow="column"
+        maxW={{
+          lg: oldTheme.variables.maxPageWidth,
+        }}
+      >
+        <Nav path={path} />
+        {shouldShowSideNav && <SideNavMobile path={path} />}
         <Flex
-          position="relative"
-          margin="0px auto"
-          minHeight="100vh"
-          flexFlow="column"
-          maxW={{
-            lg: oldTheme.variables.maxPageWidth,
-          }}
+          flexDirection={{ base: "column", lg: "row" }}
+          id="main-content"
+          scrollMarginTop={20}
         >
-          <ZenMode>
-            <Nav path={path} />
-            {shouldShowSideNav && <SideNavMobile path={path} />}
-          </ZenMode>
-          <Flex
-            flexDirection={{ base: "column", lg: "row" }}
-            id="main-content"
-            scrollMarginTop={20}
-          >
-            {shouldShowSideNav && (
-              <ZenMode>
-                <SideNav path={path} />
-              </ZenMode>
-            )}
-            <Flex flexDirection="column" width="100%">
-              <Flex
-                justifyContent="space-around"
-                alignItems="flex-start"
-                overflow="visible"
-                width="100%"
-                flexGrow="1"
-              >
-                {children}
-              </Flex>
+          {shouldShowSideNav && <SideNav path={path} />}
+          <Flex flexDirection="column" width="100%">
+            <Flex
+              justifyContent="space-around"
+              alignItems="flex-start"
+              overflow="visible"
+              width="100%"
+              flexGrow="1"
+            >
+              {children}
             </Flex>
           </Flex>
-          <ZenMode>
-            <Footer />
-          </ZenMode>
-          <FeedbackWidget location={path} />
         </Flex>
-      </ZenModeContext.Provider>
+        <Footer />
+        <FeedbackWidget location={path} />
+      </Flex>
     </ApolloProvider>
   )
 }

src/components/TableOfContents/index.tsx

@@ -1,22 +1,18 @@
-import React, { useContext } from "react"
+import React from "react"
 
 import {
   Box,
   BoxProps,
   calc,
   Flex,
-  FormControl,
-  FormLabel,
   Icon,
   List,
   ListItem,
   Show,
-  Switch,
   useToken,
 } from "@chakra-ui/react"
 import { FaGithub } from "react-icons/fa"
 import { useActiveHash } from "../../hooks/useActiveHash"
-import { ZenModeContext } from "../../contexts/ZenModeContext"
 import ButtonLink from "../ButtonLink"
 import Translation from "../Translation"
 
@@ -45,7 +41,6 @@ const TableOfContents: React.FC<IProps> = ({
   isMobile = false,
   ...rest
 }) => {
-  const { isZenMode, handleZenModeChange } = useContext(ZenModeContext)
   // TODO: Replace with direct token implementation after UI migration is completed
   const lgBp = useToken("breakpoints", "lg")
 
@@ -81,8 +76,6 @@ const TableOfContents: React.FC<IProps> = ({
     return <Mobile items={items} maxDepth={maxDepth} />
   }
 
-  const shouldShowZenModeToggle = slug?.includes("/docs/")
-
   return (
     // TODO: Switch to `above="lg"` after completion of Chakra Migration
     <Show above={lgBp}>
@@ -109,34 +102,6 @@ const TableOfContents: React.FC<IProps> = ({
               </ButtonLink>
             </ListItem>
           )}
-          {shouldShowZenModeToggle && (
-            <Flex
-              as={ListItem}
-              alignItems="center"
-              mb={2}
-              py="2px"
-              opacity={0.8}
-              fontSize="sm"
-            >
-              <FormControl as={Flex} alignItems="center">
-                <FormLabel htmlFor="zen-mode" mb={0} me={2} fontSize="sm">
-                  <Translation id="zen-mode" />
-                </FormLabel>
-                <Switch
-                  id="zen-mode"
-                  isChecked={isZenMode}
-                  onChange={() => {
-                    handleZenModeChange()
-                    trackCustomEvent({
-                      eventCategory: "zen mode",
-                      eventAction: "click",
-                      eventName: isZenMode ? "activate" : "deactivate",
-                    })
-                  }}
-                />
-              </FormControl>
-            </Flex>
-          )}
           <ListItem>
             <Box mb={2} textTransform="uppercase">
               <Translation id="on-this-page" />

src/components/ZenMode.tsx

@@ -4,7 +4,6 @@
   "about-us": "نبذة عنا",
   "aria-toggle-search-button": "تبديل زر البحث",
   "aria-toggle-menu-button": "تبديل زر القائمة",
-  "zen-mode": "وضع التأمل",
   "beacon-chain": "سلسلة المنارة",
   "bridges": "جسور سلسلة الكتل",
   "clear": "مسح",

src/contexts/ZenModeContext.tsx

@@ -4,7 +4,6 @@
   "about-us": "Haqqımızda",
   "aria-toggle-search-button": "Axtarış düyməsini aç/bağla",
   "aria-toggle-menu-button": "Menyu düyməsini aç/bağla",
-  "zen-mode": "Vaxt ayırma rejimi",
   "beacon-chain": "İşarə (Beacon) zənciri",
   "bridges": "Blockchain körpüləri",
   "clear": "Təmizlə",

src/intl/ar/common.json

@@ -4,7 +4,6 @@
   "about-us": "За нас",
   "aria-toggle-search-button": "Бутон за търсенеToggle",
   "aria-toggle-menu-button": "Бутон за Toggle меню",
-  "zen-mode": "Дзен режим",
   "beacon-chain": "Сигнална верига",
   "bridges": "Мостове на блокова верига",
   "clear": "Изчистване",

src/intl/az/common.json

@@ -3,7 +3,6 @@
   "about-us": "Sobre nosaltres",
   "aria-toggle-search-button": "Mostrar el botó de cerca",
   "aria-toggle-menu-button": "Mostrar el botó del menú",
-  "zen-mode": "Mode Zen",
   "beacon-chain": "La Cadena de Balisa",
   "bridges": "Ponts que interconnecten les Blockchains",
   "close": "Tancar",

src/intl/bg/common.json

@@ -4,7 +4,6 @@
   "about-us": "O nás",
   "aria-toggle-search-button": "Zobrazit hledání",
   "aria-toggle-menu-button": "Zobrazit menu",
-  "zen-mode": "Režim Zen",
   "beacon-chain": "Řetězová vazba",
   "bridges": "Blockchainové mosty",
   "clear": "Vymazat",

src/intl/ca/common.json

@@ -4,7 +4,6 @@
   "about-us": "Om os",
   "aria-toggle-search-button": "Tænd/sluk søgknappen",
   "aria-toggle-menu-button": "Tænd/sluk menuknappen",
-  "zen-mode": "Zen-tilstand",
   "beacon-chain": "Beacon Chain",
   "bridges": "Blockchain-broer",
   "clear": "Ryd",