From 5ca5d63d7dcecf0270a2cc6e9a54d1c7cf5df685 Mon Sep 17 00:00:00 2001 From: soheil Date: Fri, 3 Feb 2023 18:43:24 +0330 Subject: [PATCH 1/7] refactor(find-wallet-page): migrate the page to Chakra --- src/pages/wallets/find-wallet.tsx | 649 ++++++++++++++---------------- 1 file changed, 291 insertions(+), 358 deletions(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 23f8759d82d..6e01716787c 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -1,17 +1,25 @@ // Libraries -import React, { useState, useRef } from "react" +import React, { useState, useRef, ReactNode } from "react" +import { + Flex, + Box, + Image, + Icon, + Text, + Center, + Heading, + useTheme, +} from "@chakra-ui/react" import { graphql } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" import { useIntl } from "react-intl" -import styled from "@emotion/styled" import { shuffle } from "lodash" +import { MdOutlineCancel } from "react-icons/md" +import { BsArrowCounterclockwise } from "react-icons/bs" // Components import Breadcrumbs from "../../components/Breadcrumbs" -import Icon from "../../components/Icon" -import Link from "../../components/Link" import PageMetadata from "../../components/PageMetadata" -import { Content, Page } from "../../components/SharedStyledComponents" import Translation from "../../components/Translation" import WalletFilterSidebar from "../../components/FindWallet/WalletFilterSidebar" import WalletPersonasSidebar from "../../components/FindWallet/WalletPersonasSidebar" @@ -29,304 +37,51 @@ import { trackCustomEvent } from "../../utils/matomo" import { getImage } from "../../utils/image" import { useOnClickOutside } from "../../hooks/useOnClickOutside" -// Styles -const PageStyled = styled(Page)<{ showMobileSidebar: boolean }>` - ${({ showMobileSidebar }) => - showMobileSidebar && - ` - pointer-events: none; - `} -` - -const HeroContainer = styled.div` - position: relative; - width: 100%; - display: flex; - padding: 3rem; - background: ${(props) => props.theme.colors.layer2Gradient}; - margin-bottom: 44px; - - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - flex-direction: column-reverse; - } -` - -const HeroContent = styled.div` - width: 50%; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - margin-top: 2rem; - width: 100%; - } -` - -const Subtitle = styled.div` - font-size: 1.25rem; - line-height: 140%; - color: ${(props) => props.theme.colors.text200}; - &:last-of-type { - margin-bottom: 2rem; - } -` - -const HeroImage = styled(GatsbyImage)` - width: 50%; - - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - width: 100%; - } -` - -const TableContent = styled(Content)` - display: flex; - gap: 24px; - height: 90vh; - overflow: hidden; - position: sticky; - top: 76px; - margin-bottom: 150px; - border-bottom: 1px solid ${(props) => props.theme.colors.secondary}; - padding-bottom: 0; - - @media (max-width: ${(props) => props.theme.breakpoints.l}) { - padding: 1rem 0 0; - margin-bottom: 120px; - } - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - padding: 1rem 0 0; - margin-bottom: 230px; - } -` - -const MobileFilterToggleContainer = styled.div` - position: sticky; - top: 76px; - background: ${(props) => props.theme.colors.background}; - width: 100%; - z-index: 1; - padding: 5px 0; -` - -const MobileFilterToggle = styled.div<{ showMobileSidebar: boolean }>` - display: none; - @media (max-width: ${(props) => props.theme.breakpoints.l}) { - display: flex; - gap: 1rem; - justify-content: space-between; - align-items: center; - border: 1px solid ${(props) => props.theme.colors.primary}; - border-left: none; - border-radius: 0px 4px 4px 0px; - padding: 6px 20px 10px 20px; - margin: auto; - margin-left: 0; - z-index: 1; - width: 100%; - max-width: ${(props) => (props.showMobileSidebar ? "330px" : "150px")}; - background: ${(props) => - props.showMobileSidebar - ? props.theme.colors.background - : props.theme.colors.background}; - } - - p { - margin: 0; - } - - svg { - width: 32px; - height: 32px; - line { - stroke: ${(props) => props.theme.colors.primary}; - } - circle { - stroke: ${(props) => props.theme.colors.primary}; - } - } -` - -const StyledIcon = styled(Icon)` - fill: ${(props) => props.theme.colors.primary}; - width: 24; - height: 24; - pointer-events: none; -` - -const FilterBurgerStyled = styled(FilterBurgerIcon)` - pointer-events: none; -` - -const SecondaryText = styled.p` - font-size: 14px; - line-height: 14px; - color: ${(props) => props.theme.colors.text200}; -` - -const FilterSidebar = styled.div<{ showMobileSidebar: boolean }>` - max-width: 330px; - width: 100%; - display: flex; - flex-direction: column; - gap: 0.55rem; - overflow-y: scroll; - background: ${(props) => props.theme.colors.background}; - transition: 0.5s all; - z-index: 20; - border-radius: 0px 8px 0px 0px; - scrollbar-width: thin; - pointer-events: auto; - scrollbar-color: ${(props) => props.theme.colors.lightBorder} - ${(props) => props.theme.colors.background}; - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-track { - background: ${(props) => props.theme.colors.background}; - } - ::-webkit-scrollbar-thumb { - background-color: ${(props) => props.theme.colors.lightBorder}; - border-radius: 4px; - border: 2px solid ${(props) => props.theme.colors.background}; - } - - @media (max-width: ${(props) => props.theme.breakpoints.l}) { - width: ${(props) => (props.showMobileSidebar ? "350px" : "350px")}; - left: ${(props) => (props.showMobileSidebar ? "0" : "-400px")}; - height: ${(props) => (props.showMobileSidebar ? "100%" : "100%")}; - display: ${(props) => (props.showMobileSidebar ? "flex" : "none")}; - position: ${(props) => (props.showMobileSidebar ? "absolute" : "relative")}; - box-shadow: ${(props) => - props.showMobileSidebar ? "0 800px 0 800px rgb(0 0 0 / 65%)" : "none"}; - } - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - width: ${(props) => (props.showMobileSidebar ? "90%" : "90%")}; - height: ${(props) => (props.showMobileSidebar ? "100%" : "100%")}; - display: ${(props) => (props.showMobileSidebar ? "flex" : "none")}; - } -` - -const FilterTabs = styled.div` - display: flex; - border-bottom: 1px solid ${(props) => props.theme.colors.primary}; - cursor: pointer; - position: sticky; - top: 0; - background: ${(props) => props.theme.colors.background}; - z-index: 1; - - p { - margin: 0; - letter-spacing: 0.02rem; - font-size: 0.9rem; - width: 100%; - } -` +const Subtitle: React.FC<{ children: ReactNode }> = ({ children }) => { + return ( + + {children} + + ) +} -const FilterTab = styled.div<{ +const FilterTab: React.FC<{ + children: ReactNode active: boolean -}>` - width: 50%; - text-align: center; - background: ${(props) => - props.active === true ? props.theme.colors.primary : "none"}; - border-radius: 8px 0px 0px 0px; - padding: 0.9rem 0.4rem; - display: flex; - justify-items: center; - align-items: center; - - color: ${(props) => - props.active === true - ? props.theme.colors.background - : props.theme.colors.text}; - - :last-child { - border-radius: 0px 8px 0px 0px; - } - - :hover { - background: ${(props) => - props.active === true - ? props.theme.colors.primary - : props.theme.colors.selectHover}; - } -` - -const WalletContent = styled.div<{ showMobileSidebar: boolean }>` - width: 100%; - overflow-y: scroll; - scrollbar-width: thin; - scrollbar-color: ${(props) => props.theme.colors.lightBorder} - ${(props) => props.theme.colors.background}; - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-track { - background: ${(props) => props.theme.colors.background}; - } - ::-webkit-scrollbar-thumb { - background-color: ${(props) => props.theme.colors.lightBorder}; - border-radius: 4px; - border: 2px solid ${(props) => props.theme.colors.background}; - } - table { - margin: 0; - } - - @media (max-width: ${(props) => props.theme.breakpoints.l}) { - width: 100%; - } - - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - width: 100%; - display: ${(props) => (props.showMobileSidebar ? "none" : "")}; - } -` - -const Note = styled.div` - text-align: center; - padding: 20px; - - p { - font-size: 14px; - line-height: 23px; - margin: 0; - padding-top: 0.2rem; - } -` - -const ResetContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 2px 4px; - border-radius: 4px; - width: 100%; - margin: 0 auto; - gap: 0.25rem; - font-size: 0.75rem; - cursor: pointer; - :hover { - p { - color: ${(props) => props.theme.colors.selectHover}; - } - svg { - fill: ${(props) => props.theme.colors.selectHover}; - } - } - - p { - margin: 0; - color: ${(props) => props.theme.colors.primary}; - } - svg { - fill: ${(props) => props.theme.colors.primary}; - } -` - -const ResetIcon = styled(Icon)` - fill: ${(props) => props.theme.colors.primary}; -` + onClick: React.MouseEventHandler | undefined +}> = ({ children, active, onClick }) => { + return ( + + {children} + + ) +} const filterDefault = { android: false, @@ -360,6 +115,7 @@ const filterDefault = { const randomizedWalletData = shuffle(walletData) const FindWalletPage = ({ data, location }) => { + const theme = useTheme() const intl = useIntl() const resetWalletFilter = React.useRef(() => {}) const wrapperRef = useRef(null) @@ -393,7 +149,13 @@ const FindWalletPage = ({ data, location }) => { useOnClickOutside(wrapperRef, () => setShowMobileSidebar(false), ["mouseup"]) return ( - + { )} /> - - + + -

+ -

+ - - + - - - + + { setShowMobileSidebar(!showMobileSidebar) trackCustomEvent({ @@ -433,12 +227,27 @@ const FindWalletPage = ({ data, location }) => { eventName: `show mobile filters ${!showMobileSidebar}`, }) }} + sx={{ + p: { + m: 0, + }, + svg: { + pointerEvents: "none", + boxSize: 8, + line: { + stroke: "primary", + }, + circle: { + stroke: "primary", + }, + }, + }} > -
-

+ + -

- + + {Object.values(filters).reduce((acc, filter) => { if (filter) { acc += 1 @@ -446,18 +255,87 @@ const FindWalletPage = ({ data, location }) => { return acc }, 0)}{" "} {translateMessageId("page-find-wallet-active", intl)} - -
+ + {showMobileSidebar ? ( - + ) : ( - + )} - - - - - + + + + + { @@ -469,9 +347,9 @@ const FindWalletPage = ({ data, location }) => { }) }} > -

+ -

+ { }) }} > -

+ {translateMessageId("page-find-wallet-feature-filters", intl)} ( {Object.values(filters).reduce((acc, filter) => { if (filter) { @@ -493,10 +371,18 @@ const FindWalletPage = ({ data, location }) => { return acc }, 0)} ) -

+ - - +
{ @@ -508,17 +394,26 @@ const FindWalletPage = ({ data, location }) => { eventName: `reset filters`, }) }} + data-group > -
+ {showFeatureFilters ? ( { setSelectedPersona={setSelectedPersona} /> )} - - - + + + - - - -

- + + + + + - -

-

- + + + + - -

-

- + + + + - -

- - + + + + ) } From 0ea42ab7c2a506bcf81091a92b33c56a953f9d7f Mon Sep 17 00:00:00 2001 From: soheil Date: Mon, 6 Feb 2023 21:48:38 +0330 Subject: [PATCH 2/7] fix(find-wallet-page): heading font size --- src/pages/wallets/find-wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 6e01716787c..27aa8f9bf49 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -174,7 +174,7 @@ const FindWalletPage = ({ data, location }) => { > - + From 0d8158ffe77ac2f19acaaa66c8ddf120c1eeee17 Mon Sep 17 00:00:00 2001 From: soheil Date: Tue, 7 Feb 2023 19:15:36 +0330 Subject: [PATCH 3/7] fix(find-wallet-page): font size --- src/pages/wallets/find-wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 27aa8f9bf49..6e01716787c 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -174,7 +174,7 @@ const FindWalletPage = ({ data, location }) => { > - + From 7e39228e06a2b51dcad2c65f2503d0bb1abb2da4 Mon Sep 17 00:00:00 2001 From: soheil Date: Tue, 7 Feb 2023 20:16:22 +0330 Subject: [PATCH 4/7] fix(find-wallet-page): fix bugs --- src/pages/wallets/find-wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 6e01716787c..1deac2c551d 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -174,7 +174,7 @@ const FindWalletPage = ({ data, location }) => { > - + From 521c4d77fbf6e0e053560a80e2956e23d11051c3 Mon Sep 17 00:00:00 2001 From: Soheil Date: Sun, 19 Feb 2023 14:01:34 +0330 Subject: [PATCH 5/7] Apply suggestions from code review Co-authored-by: Pablo Pettinari --- src/pages/wallets/find-wallet.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 1deac2c551d..512ffc18931 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -190,7 +190,9 @@ const FindWalletPage = ({ data, location }) => { image={getImage(data.hero)!} alt="" loading="eager" - objectFit="contain" + imgStyle={{ + objectFit: "contain", + }} /> { }, }} display={{ - base: showMobileSidebar ? "none" : "", - sm: "", + base: showMobileSidebar ? "none" : "block", + sm: "block", }} > Date: Sun, 19 Feb 2023 14:05:19 +0330 Subject: [PATCH 6/7] refactor(find-wallet): move out from React.FC --- src/pages/wallets/find-wallet.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 512ffc18931..e72ab501063 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -37,7 +37,9 @@ import { trackCustomEvent } from "../../utils/matomo" import { getImage } from "../../utils/image" import { useOnClickOutside } from "../../hooks/useOnClickOutside" -const Subtitle: React.FC<{ children: ReactNode }> = ({ children }) => { +type ChildOnlyProp = { children: ReactNode } + +const Subtitle = ({ children }: ChildOnlyProp) => { return ( = ({ children }) => { ) } -const FilterTab: React.FC<{ +interface IFilterTabProps { children: ReactNode active: boolean - onClick: React.MouseEventHandler | undefined -}> = ({ children, active, onClick }) => { + onClick?: React.MouseEventHandler +} + +const FilterTab = ({ children, active, onClick }: IFilterTabProps) => { return ( Date: Tue, 21 Feb 2023 16:34:57 -0300 Subject: [PATCH 7/7] fixes --- src/pages/wallets/find-wallet.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index e72ab501063..652941403aa 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -37,7 +37,7 @@ import { trackCustomEvent } from "../../utils/matomo" import { getImage } from "../../utils/image" import { useOnClickOutside } from "../../hooks/useOnClickOutside" -type ChildOnlyProp = { children: ReactNode } +import type { ChildOnlyProp } from "../../types" const Subtitle = ({ children }: ChildOnlyProp) => { return ( @@ -178,7 +178,11 @@ const FindWalletPage = ({ data, location }) => { > - + @@ -271,7 +275,9 @@ const FindWalletPage = ({ data, location }) => {