Merge pull request #11174 from ethereum/find-wallet-remove-scroling

Find wallet > remove all the scrolls > quick fix

Author: corwintines

src/components/FindWallet/WalletFilterSidebar/WalletFilterFeature/index.tsx

@@ -56,7 +56,7 @@ const WalletFilterFeature: React.FC<WalletFilterFeatureProps> = ({
 }) => {
   const { filterOptions, setShowOptions } = useWalletFilterFeature(restProps)
 
-  const filterPanelBg = useColorModeValue("primary100", "black400")
+  const filterPanelBg = useColorModeValue("chakra-subtle-bg", "black400")
   return (
     <Accordion
       as={VStack}
@@ -85,23 +85,30 @@ const WalletFilterFeature: React.FC<WalletFilterFeatureProps> = ({
                   color="primary.base"
                   borderBottom={isExpanded ? "1px" : "none"}
                   borderColor="currentColor"
-                  fontSize="2xl"
+                  fontSize="lg"
                   fontWeight={600}
                   lineHeight={1.4}
-                  pb={isExpanded ? 3 : 0}
+                  py={1}
                   px={4}
+                  borderRadius={1}
+                  _hover={{ color: "primary.hover" }}
                 >
                   <AccordionButton
                     color="inherit"
                     fontWeight="inherit"
                     fontSize="inherit"
                     p={0}
                     textAlign="initial"
+                    _hover={{ background: "transparent" }}
                   >
                     <Box as="span" flex={1}>
                       {filterOption.title}
                     </Box>
-                    <AccordionIcon color="primary.base" boxSize={9} />
+                    <AccordionIcon
+                      color="primary.base"
+                      boxSize={9}
+                      _hover={{ color: "primary.hover" }}
+                    />
                   </AccordionButton>
                 </Heading>
                 <AccordionPanel as={List} p={0} m={0}>

src/components/FindWallet/WalletFilterSidebar/WalletFilterProfile/index.tsx

@@ -30,12 +30,12 @@ const WalletFilterProfile = ({
 
   const getContainerBg = (idx: number) =>
     useColorModeValue(
-      selectedPersona === idx ? "primary200" : "primary100",
+      selectedPersona === idx ? "primary100" : "chakra-subtle-bg",
       selectedPersona === idx ? "primary900" : "black400"
     )
   const getContainerHoverBg = (idx: number) =>
     useColorModeValue(
-      "primary200",
+      "primary100",
       selectedPersona === idx ? "primary900" : "black500"
     )
 
@@ -86,7 +86,7 @@ const WalletFilterProfile = ({
               }
             }}
           >
-            <Flex alignItems="center" gap={2} mb="0.6rem" pt={2} pb={0} px={2}>
+            <Flex alignItems="center" gap={2} mb="0.2rem" pt={0} pb={0} px={2}>
               <Box
                 boxSize="1.3rem"
                 role="checkbox"
@@ -95,7 +95,7 @@ const WalletFilterProfile = ({
                 <Icon
                   as={MdCircle}
                   borderRadius="full"
-                  boxSize={4}
+                  boxSize={3}
                   my={0}
                   mx={1}
                   fill={
@@ -110,46 +110,45 @@ const WalletFilterProfile = ({
                   }
                   outline="1.5px solid"
                   outlineColor={
-                    selectedPersona === idx ? "primary.base" : "text"
+                    selectedPersona === idx ? "primary.base" : "primary.base"
                   }
                   outlineOffset="3px"
                   fontSize={8}
                 />
               </Box>
               <Heading
                 as="h3"
-                ml={2}
-                fontSize="1.3rem"
+                ml={0}
+                fontSize="1.2rem"
                 py={0}
                 pr={1}
                 pl={0}
                 lineHeight="1.7rem"
-                color="text"
+                color="primary.base"
               >
                 {persona.title}
               </Heading>
             </Flex>
             <Box
               as="span"
-              m="0.5rem 0 0.8rem 0"
-              p="0.7rem 0.6rem 0"
+              m="0.8rem 0 0.8rem 0"
+              p="0.8rem 0.6rem 0"
               color={selectedPersona === idx ? "text" : "text200"}
               fontSize="0.9rem"
               fontWeight="normal"
               transition="0.5s all"
               lineHeight={1.3}
               borderTop="1px solid"
-              borderTopColor="lightBorder"
+              borderTopColor="primary.base"
             >
               {persona.description}
             </Box>
             <UnorderedList
               m={0}
               display="grid"
-              gridTemplateColumns="50% 50%"
               width="full"
               columnGap="0.2rem"
-              rowGap={2}
+              rowGap="0.4rem"
               aria-label={`${persona.title} filters`}
             >
               {persona.featureHighlight.map((feature) => (
@@ -160,6 +159,7 @@ const WalletFilterProfile = ({
                   lineHeight="0.95rem"
                   margin="0.1rem"
                   alignItems="center"
+                  wordBreak={"break-word"}
                   sx={{
                     p: {
                       mb: 0,

src/components/FindWallet/WalletFilterSidebar/index.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { forwardRef } from "react"
+import React from "react"
 import {
   Icon,
   Center,
@@ -9,6 +9,8 @@ import {
   Tab,
   TabPanels,
   TabPanel,
+  Box,
+  type TabsProps,
 } from "@chakra-ui/react"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import { BsArrowCounterclockwise } from "react-icons/bs"
@@ -52,8 +54,7 @@ const FilterTab = ({
   />
 )
 
-interface WalletFilterSidebarProps {
-  showMobileSidebar: boolean
+interface WalletFilterSidebarProps extends Omit<TabsProps, "children"> {
   filters: FiltersType
   resetWalletFilter: React.MutableRefObject<() => void>
   resetFilters: () => void
@@ -64,74 +65,47 @@ interface WalletFilterSidebarProps {
   updateFilterOptions: (keys: any, value: any) => void
 }
 
-const WalletFilterSidebar = forwardRef<
-  HTMLDivElement,
-  WalletFilterSidebarProps
->(
-  /**
-   * Note: forwardRef here comes from React and not Chakra
-   * Chakra's version throws error of `children` prop missing
-   */
-  (props, ref) => {
-    const {
-      showMobileSidebar,
-      filters,
-      resetWalletFilter,
-      resetFilters,
-      setFilters,
-      selectedPersona,
-      setSelectedPersona,
-      updateFilterOption,
-      updateFilterOptions,
-    } = props
+const WalletFilterSidebar: React.FC<WalletFilterSidebarProps> = ({
+  filters,
+  resetWalletFilter,
+  resetFilters,
+  setFilters,
+  selectedPersona,
+  setSelectedPersona,
+  updateFilterOption,
+  updateFilterOptions,
+  top,
+  ...tabsProps
+}) => {
+  const theme = useTheme()
+  const { t } = useTranslation()
+  return (
+    <Tabs
+      bg="background.base"
+      transition="0.5s all"
+      sx={{
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme.colors.lightBorder} ${theme.colors.background}`,
 
-    const theme = useTheme()
-    const { t } = useTranslation()
-    return (
-      <Tabs
-        ref={ref}
-        maxW="330px"
-        overflowY="scroll"
-        bg="background.base"
-        transition="0.5s all"
-        zIndex={20}
-        borderTopRightRadius="lg"
-        pointerEvents="auto"
-        sx={{
-          scrollbarWidth: "thin",
-          scrollbarColor: `${theme.colors.lightBorder} ${theme.colors.background}`,
-
-          "::-webkit-scrollbar": {
-            width: 2,
-          },
-          "::-webkit-scrollbar-track": {
-            bg: "background.base",
-          },
-          "::-webkit-scrollbar-thumb": {
-            bgColor: "lightBorder",
-            borderRadius: "base",
-            border: "2px solid",
-            borderColor: "background.base",
-          },
-        }}
-        width={{ base: "90%", sm: "350px", lg: "full" }}
-        height={{ base: "full", lg: "auto" }}
-        hideBelow={!showMobileSidebar ? "lg" : undefined}
-        position={{
-          base: showMobileSidebar ? "absolute" : "relative",
-          lg: "static",
-        }}
-        boxShadow={{
-          base: showMobileSidebar ? "0 800px 0 800px rgb(0 0 0 / 65%)" : "none",
-          lg: "none",
-        }}
-        left={showMobileSidebar ? 0 : "-400px"}
-      >
+        "::-webkit-scrollbar": {
+          width: 2,
+        },
+        "::-webkit-scrollbar-track": {
+          bg: "background.base",
+        },
+        "::-webkit-scrollbar-thumb": {
+          bgColor: "lightBorder",
+          borderRadius: "base",
+          border: "2px solid",
+          borderColor: "background.base",
+        },
+      }}
+      {...tabsProps}
+    >
+      <Box position="sticky" top={top ?? 0}>
         <TabList
           borderBottom="1px solid"
           borderBottomColor="primary.base"
-          position="sticky"
-          top={0}
           bg="background.base"
           sx={{
             ".chakra-tabs__tab": {
@@ -162,63 +136,63 @@ const WalletFilterSidebar = forwardRef<
             )
           </FilterTab>
         </TabList>
-        <Center
-          as="button"
-          borderRadius="base"
-          color="primary.base"
-          fontSize="xs"
-          gap={1}
-          mx="auto"
-          my="0.55rem"
-          py={0.5}
-          px={1}
-          _hover={{
-            color: "selectHover",
-          }}
-          onClick={() => {
-            resetFilters()
-            resetWalletFilter.current()
-            trackCustomEvent({
-              eventCategory: "WalletFilterReset",
-              eventAction: `WalletFilterReset clicked`,
-              eventName: `reset filters`,
-            })
-          }}
-        >
-          <Icon as={BsArrowCounterclockwise} aria-hidden="true" fontSize="sm" />
-          {"Reset filters".toUpperCase()}
-        </Center>
-        <TabPanels
-          m={0}
-          sx={{
-            ".chakra-tabs__tab-panel": {
-              bg: "transparent",
-              border: "none",
-              p: 0,
-            },
-          }}
-        >
-          <TabPanel>
-            <WalletFilterPersonas
-              resetFilters={resetFilters}
-              setFilters={setFilters}
-              selectedPersona={selectedPersona}
-              setSelectedPersona={setSelectedPersona}
-            />
-          </TabPanel>
-          <TabPanel>
-            <WalletFilterProfile
-              resetWalletFilter={resetWalletFilter}
-              filters={filters}
-              updateFilterOption={updateFilterOption}
-              updateFilterOptions={updateFilterOptions}
-            />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    )
-  }
-)
+      </Box>
+      <Center
+        as="button"
+        borderRadius="base"
+        color="primary.base"
+        fontSize="xs"
+        gap={1}
+        mx="auto"
+        mt="0.55rem"
+        py={0.5}
+        px={1}
+        _hover={{
+          color: "selectHover",
+        }}
+        onClick={() => {
+          resetFilters()
+          resetWalletFilter.current()
+          trackCustomEvent({
+            eventCategory: "WalletFilterReset",
+            eventAction: `WalletFilterReset clicked`,
+            eventName: `reset filters`,
+          })
+        }}
+      >
+        <Icon as={BsArrowCounterclockwise} aria-hidden="true" fontSize="sm" />
+        {"Reset filters".toUpperCase()}
+      </Center>
+      <TabPanels
+        m={0}
+        sx={{
+          ".chakra-tabs__tab-panel": {
+            bg: "transparent",
+            border: "none",
+            p: 0,
+          },
+        }}
+      >
+        <TabPanel>
+          <WalletFilterPersonas
+            resetFilters={resetFilters}
+            setFilters={setFilters}
+            selectedPersona={selectedPersona}
+            setSelectedPersona={setSelectedPersona}
+          />
+        </TabPanel>
+        <TabPanel>
+          <WalletFilterProfile
+            resetWalletFilter={resetWalletFilter}
+            filters={filters}
+            updateFilterOption={updateFilterOption}
+            updateFilterOptions={updateFilterOptions}
+          />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  )
+}
 
 WalletFilterSidebar.displayName = "WalletFilterSidebar"