Merge pull request #9519 from ethereum/naked-button

Deprecate NakedButton component

Author: pettinarip

src/components/NakedButton.tsx

@@ -1,38 +1,19 @@
 import React from "react"
+import { Box, IconButton } from "@chakra-ui/react"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 
 import Emoji from "../OldEmoji"
 import Icon from "../Icon"
 import Link from "../Link"
-import NakedButton from "../NakedButton"
 import Search from "../Search"
 import Translation from "../Translation"
 import { NavLink } from "../SharedStyledComponents"
 import { translateMessageId } from "../../utils/translations"
 
 import { ISections } from "./types"
 
-const Container = styled.div`
-  display: none;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: flex;
-  }
-`
-
-const MenuIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-`
-
-const MenuButton = styled(NakedButton)`
-  margin-left: 1rem;
-`
-
-const OtherIcon = styled(MenuIcon)`
-  margin-right: 1rem;
-`
-
 const MobileModal = styled(motion.div)`
   position: fixed;
   background: ${(props) => props.theme.colors.modalBackground};
@@ -290,25 +271,33 @@ const MobileNavMenu: React.FC<IProps> = ({
   }
 
   return (
-    <Container>
-      <MenuButton
+    <Box
+      display={{ base: "flex", lg: "none" }}
+      gap={4}
+      sx={{ svg: { fill: "body" } }}
+    >
+      <IconButton
+        icon={<Icon name="search" />}
         onClick={() => toggleMenu("search")}
         aria-label={translateMessageId("aria-toggle-search-button", intl)}
-      >
-        <OtherIcon name="search" />
-      </MenuButton>
-      <MenuButton
+        variant="icon"
+        _hover={{ svg: { fill: "primary" } }}
+      />
+      <IconButton
+        icon={
+          <GlyphButton viewBox="0 0 24 40">
+            <motion.path
+              variants={glyphPathVariants}
+              initial={false}
+              animate={isOpen ? "open" : "closed"}
+            />
+          </GlyphButton>
+        }
         onClick={() => toggleMenu("menu")}
-        aria-label={translateMessageId("aria-toggle-menu-button", intl)}
-      >
-        <GlyphButton viewBox="0 0 24 40">
-          <motion.path
-            variants={glyphPathVariants}
-            initial={false}
-            animate={isOpen ? "open" : "closed"}
-          />
-        </GlyphButton>
-      </MenuButton>
+        aria-label={translateMessageId("aria-toggle-search-button", intl)}
+        variant="icon"
+        _hover={{ svg: { fill: "primary" } }}
+      />
       <MobileModal
         animate={isOpen ? "open" : "closed"}
         variants={mobileModalVariants}
@@ -381,20 +370,20 @@ const MobileNavMenu: React.FC<IProps> = ({
         initial="closed"
       >
         <BottomItem onClick={() => toggleMenu("search")}>
-          <MenuIcon name="search" />
+          <Icon name="search" />
           <BottomItemText>
             <Translation id="search" />
           </BottomItemText>
         </BottomItem>
         <BottomItem onClick={toggleTheme}>
-          <MenuIcon name={isDarkTheme ? "darkTheme" : "lightTheme"} />
+          <Icon name={isDarkTheme ? "darkTheme" : "lightTheme"} />
           <BottomItemText>
             <Translation id={isDarkTheme ? "dark-mode" : "light-mode"} />
           </BottomItemText>
         </BottomItem>
         <BottomItem onClick={handleClick}>
           <BottomLink to={`/languages/${fromPageParameter}`}>
-            <MenuIcon name="language" />
+            <Icon name="language" />
             <BottomItemText>
               <Translation id="languages" />
             </BottomItemText>
@@ -418,7 +407,7 @@ const MobileNavMenu: React.FC<IProps> = ({
           <Translation id="search-box-blank-state-text" />
         </BlankSearchState>
       </SearchContainer>
-    </Container>
+    </Box>
   )
 }
 

src/components/Nav/Mobile.tsx

@@ -18,6 +18,7 @@
   "brand-assets": "Brand assets",
   "bridges": "Blockchain bridges",
   "bug-bounty": "Bug bounty",
+  "clear": "Clear",
   "close": "Close",
   "coinbase-logo": "Coinbase logo",
   "coinmama-logo": "Coinmama logo",

src/intl/en/common.json

@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import { IconButton } from "@chakra-ui/react"
 import styled from "@emotion/styled"
 import { useLocation } from "@reach/router"
 import { useIntl } from "react-intl"
@@ -12,7 +13,6 @@ import { Language, languageMetadata } from "../utils/languages"
 import { translateMessageId, TranslationKey } from "../utils/translations"
 import { CardItem as LangItem } from "../components/SharedStyledComponents"
 import Icon from "../components/Icon"
-import NakedButton from "../components/NakedButton"
 
 const StyledPage = styled(Page)`
   margin-top: 4rem;
@@ -58,17 +58,6 @@ const StyledInput = styled.input`
   }
 `
 
-const IconButton = styled(NakedButton)`
-  position: absolute;
-  top: 50%;
-  margin-top: -12px;
-  right: 6px;
-`
-
-const ResetIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-`
-
 const LanguagesPage = () => {
   const intl = useIntl()
   const location = useLocation()
@@ -140,10 +129,16 @@ const LanguagesPage = () => {
               placeholder={searchString}
               onChange={(e) => setKeyword(e.target.value)}
             />
-            {keyword === "" ? null : (
-              <IconButton onClick={resetKeyword}>
-                <ResetIcon name="close" />
-              </IconButton>
+            {keyword !== "" && (
+              <IconButton
+                icon={<Icon name="close" />}
+                onClick={resetKeyword}
+                position="absolute"
+                insetInlineEnd={1}
+                aria-label={translateMessageId("clear", intl)}
+                variant="icon"
+                _hover={{ svg: { fill: "primary" } }}
+              />
             )}
           </Form>
           <LangContainer>

src/pages/languages.tsx

@@ -40,7 +40,6 @@ import Link from "../components/Link"
 import ButtonLink from "../components/ButtonLink"
 import FeedbackCard from "../components/FeedbackCard"
 import Icon from "../components/Icon"
-import NakedButton from "../components/NakedButton"
 
 // Utils
 import { translateMessageId, TranslationKey } from "../utils/translations"
@@ -319,14 +318,6 @@ const StyledEmoji = styled(Emoji)`
   margin-right: 1rem;
 `
 
-const ScrollLink = styled(NakedButton)`
-  text-align: start;
-  color: ${({ theme }) => theme.colors.primary};
-  &.active {
-    color: ${({ theme }) => theme.colors.primary};
-  }
-`
-
 const BuildContainer = styled(Container)`
   flex: 1;
   padding: 2rem;
@@ -760,16 +751,14 @@ const RunANodePage = ({ data }: PageProps<Queries.RunANodePageQuery>) => {
                     <Translation id="page-run-a-node-build-your-own-min-ram" />
                   </p>
                   <p>
-                    <ScrollLink
-                      onClick={() => scrollIntoView("plan-on-staking")}
-                    >
+                    <Link href="#plan-on-staking">
                       <Translation id="page-run-a-node-build-your-own-ram-note-1" />
-                    </ScrollLink>
+                    </Link>
                   </p>
                   <p>
-                    <ScrollLink onClick={() => scrollIntoView("rasp-pi")}>
+                    <Link href="#rasp-pi">
                       <Translation id="page-run-a-node-build-your-own-ram-note-2" />
-                    </ScrollLink>
+                    </Link>
                   </p>
                 </li>
                 <li>