From 1a228fc48e54ba5a70f5b489096f2d8c9721a7dc Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 9 Aug 2023 09:47:04 +0000 Subject: [PATCH 1/4] Bump styled-gen from 1.4.8 to 2.0.1 Bumps [styled-gen](https://github.com/psoaresbj/styled-gen) from 1.4.8 to 2.0.1. - [Release notes](https://github.com/psoaresbj/styled-gen/releases) - [Changelog](https://github.com/psoaresbj/styled-gen/blob/main/CHANGELOG.md) - [Commits](https://github.com/psoaresbj/styled-gen/compare/1.4.8...2.0.1) --- updated-dependencies: - dependency-name: styled-gen dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8a7914b..5e06353 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "recharts": "2.9.3", "sharethis-reactjs": "1.6.0", "styled-components": "5.3.10", - "styled-gen": "1.4.8", + "styled-gen": "2.0.1", "styled-reset": "4.5.1", "viem": "1.12.2", "wagmi": "1.4.2" diff --git a/yarn.lock b/yarn.lock index aff27d0..9897874 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4909,7 +4909,14 @@ styled-components@5.3.10: shallowequal "^1.1.0" supports-color "^5.5.0" -styled-gen@1.4.8, styled-gen@^1.4.8: +styled-gen@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/styled-gen/-/styled-gen-2.0.1.tgz#9626906005ba909d003e113d831892a949460199" + integrity sha512-uefhWKXWu1081jHyzTpB2+QV/yiajBwpQZWROLFqPpzAPrsT65NP4yrLTU5oRu+KEUdzab1haAdZU9z1nOLikw== + dependencies: + csstype "^3.1.1" + +styled-gen@^1.4.8: version "1.4.8" resolved "https://registry.yarnpkg.com/styled-gen/-/styled-gen-1.4.8.tgz#35ae520f95b03d59c5edc762f1ba0cb485758a6e" integrity sha512-d2vH5+zghU7csh04HTcv1T2mq0ej3cemhKXJAMlWia2EYMxk6HeFLburgT43p8TKALNxmLBf/oUPp0Vb5Op5Ig== From 1fa99178030c42226aa59923cdd92455b1bfe7c5 Mon Sep 17 00:00:00 2001 From: Hugo Marques Date: Wed, 29 Nov 2023 16:53:01 +0000 Subject: [PATCH 2/4] Fixes --- src/components/Address/Address.tsx | 50 +++- src/components/BoldInput/BoldInput.tsx | 33 ++- src/components/Breakdown/Breakdown.tsx | 25 +- .../CookieConsent/CookieConsent.tsx | 38 ++- src/components/Copied/Copied.tsx | 2 +- src/components/Header/Header.style.ts | 58 ++-- src/components/Header/MenuItem.tsx | 252 +++++++++++------- src/components/Loading/Loading.tsx | 6 +- src/components/SocialMenu/SocialMenu.tsx | 7 +- src/components/Stories/Stories.tsx | 77 +++++- src/components/Tabs/Tabs.tsx | 21 +- src/components/Toaster/Toaster.tsx | 16 +- src/components/Topbar/Topbar.tsx | 6 +- src/modals/BaseModal/BaseModal.style.tsx | 21 +- .../ModalAddressDonation.tsx | 33 ++- src/modals/ModalDonate/DonateOnce.tsx | 2 +- src/modals/ModalDonate/DonateRecurrent.tsx | 2 +- src/modals/ModalDonate/ModalDonate.style.tsx | 9 +- src/modals/ModalDonate/ModalDonate.tsx | 4 +- src/modals/ModalDonate/Thanks.tsx | 6 +- .../Demographics/Beneficiaries.tsx | 185 +++++++++---- .../Governance/Illustration/Illustration.tsx | 22 +- .../Governance/Tokenomics/Tokenomics.tsx | 6 +- src/page-components/Staking/Hero/Summary.tsx | 40 ++- src/pages/_app.tsx | 2 +- src/slices/CardsFromApi.tsx | 7 +- src/slices/Demographics/index.tsx | 11 +- src/slices/Hero/Hero.style.ts.tsx | 30 ++- src/slices/Hero/Hero.tsx | 2 +- src/slices/HeroVideo.tsx | 2 +- src/slices/NumbersFromApi.tsx | 2 +- src/slices/Pact/Deposit/Summary.tsx | 92 +++++-- src/slices/Pact/index.tsx | 2 +- src/slices/Tokenomics.tsx | 6 +- src/theme/components/Button/Button.tsx | 29 +- src/theme/components/Card/Card.tsx | 13 +- .../components/GhostElement/GhostElement.tsx | 12 +- .../components/GlobalStyle/GlobalStyle.tsx | 12 +- src/theme/components/Highlight/Highlight.tsx | 20 +- .../components/IconButton/IconButton.tsx | 21 +- .../components/InfoTooltip/InfoTooltip.tsx | 74 ++--- src/theme/components/Logo/Logo.tsx | 34 ++- src/theme/components/Select/Select.style.tsx | 27 +- src/theme/components/TextLink/TextLink.tsx | 11 +- src/theme/helpers/mq.ts | 8 + src/theme/helpers/transitions.ts | 31 +++ src/theme/index.ts | 14 +- src/theme/variables/breakpoints.ts | 5 +- src/theme/variables/durations.ts | 6 + src/theme/variables/ease.ts | 26 ++ src/theme/variables/generator.ts | 25 +- 51 files changed, 1023 insertions(+), 422 deletions(-) create mode 100644 src/theme/helpers/mq.ts create mode 100644 src/theme/helpers/transitions.ts create mode 100644 src/theme/variables/durations.ts create mode 100644 src/theme/variables/ease.ts diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx index d2fce28..63fee6a 100644 --- a/src/components/Address/Address.tsx +++ b/src/components/Address/Address.tsx @@ -26,9 +26,12 @@ const AddressWrapper = styled.div` text-align: center; width: 100%; - ${mq.phone(css` - user-select: none !important; - `)} + ${mq.upTo( + 'sm', + css` + user-select: none !important; + ` + )} `; const CopyLink = styled.div` @@ -51,7 +54,14 @@ export const Address = ( small?: boolean; } & GeneratedPropsTypes ) => { - const { address, currency, forceEllipsis, renderLabel, small, ...forwardProps } = props; + const { + address, + currency, + forceEllipsis, + renderLabel, + small, + ...forwardProps + } = props; const [copied, setCopied] = useState(); const { sizes, width } = useDeviceSize(); @@ -62,26 +72,46 @@ export const Address = ( return ( - {!!currency && } - setCopied(Date.now())} text={address}> + {!!currency && ( + + )} + setCopied(Date.now())} + text={address} + > {forceEllipsis ? ( - {formatAddress(address, [width < sizes.sm ? 8 : 12, width < sizes.sm ? 8 : 12])} + {formatAddress(address, [ + width < sizes.sm ? 8 : 12, + width < sizes.sm ? 8 : 12 + ])} ) : ( - {width < sizes.sm ? formatAddress(address) : address} + + {width < sizes.sm + ? formatAddress(address) + : address} + )} - setCopied(Date.now())} text={address}> + setCopied(Date.now())} + text={address} + > {!!renderLabel ? ( renderLabel() ) : ( - + )} diff --git a/src/components/BoldInput/BoldInput.tsx b/src/components/BoldInput/BoldInput.tsx index fff2c51..51cef85 100644 --- a/src/components/BoldInput/BoldInput.tsx +++ b/src/components/BoldInput/BoldInput.tsx @@ -18,9 +18,12 @@ const Content = styled.div` align-items: center; flex-direction: column; - ${mq.tablet(css` - flex-direction: row; - `)} + ${mq.upTo( + 'md', + css` + flex-direction: row; + ` + )} `; const Input = styled.input` @@ -55,12 +58,15 @@ const InputWrapper = styled.div` padding-bottom: 1rem; width: 100%; - ${mq.tablet(css` - padding-bottom: unset; - padding-right: 1rem; - font-weight: ${fonts.weights.bold}; - font-size: 27px; - `)} + ${mq.upTo( + 'md', + css` + padding-bottom: unset; + padding-right: 1rem; + font-weight: ${fonts.weights.bold}; + font-size: 27px; + ` + )} `; const Label = styled.div` @@ -75,14 +81,19 @@ const Wrapper = styled.div` `; export const BoldInput = (props: BoldInputProps) => { - const { asStaticValue, children, inputPrefix, label, ...inputProps } = props as any; + const { asStaticValue, children, inputPrefix, label, ...inputProps } = + props as any; return ( - {asStaticValue ? inputProps?.value || 0 : } + {asStaticValue ? ( + inputProps?.value || 0 + ) : ( + + )} {inputPrefix && <>{inputPrefix} } {children} diff --git a/src/components/Breakdown/Breakdown.tsx b/src/components/Breakdown/Breakdown.tsx index 34b8b5f..54e6fd9 100644 --- a/src/components/Breakdown/Breakdown.tsx +++ b/src/components/Breakdown/Breakdown.tsx @@ -50,18 +50,21 @@ const SummaryRow = styled.div` margin-top: 0.5rem; } - ${mq.tablet(css` - flex-direction: row; - justify-content: space-between; - - & + & { - margin-top: 0.5rem; - } + ${mq.upTo( + 'md', + css` + flex-direction: row; + justify-content: space-between; + + & + & { + margin-top: 0.5rem; + } - & > * + * { - margin-top: unset; - } - `)} + & > * + * { + margin-top: unset; + } + ` + )} `; const CountdownWrapper = styled.div` diff --git a/src/components/CookieConsent/CookieConsent.tsx b/src/components/CookieConsent/CookieConsent.tsx index 72466a8..68b3f78 100644 --- a/src/components/CookieConsent/CookieConsent.tsx +++ b/src/components/CookieConsent/CookieConsent.tsx @@ -2,8 +2,12 @@ import { Button, Col, Div, Grid, Row, Text } from '../../theme/components'; import { PrismicRichTextType } from '../../lib/Prismic/types'; import { colors } from '../../theme'; -import { ease, transitions } from 'styled-gen'; -import { hasCookieConsentDismissed, setCookieConsentDismissed } from '../../lib/localStorage'; +import { transitions } from 'src/theme/helpers/transitions'; +import { ease } from 'src/theme/variables/ease'; +import { + hasCookieConsentDismissed, + setCookieConsentDismissed +} from '../../lib/localStorage'; import { usePrismicData } from '../../lib/Prismic/components/PrismicDataProvider'; import Head from 'next/head'; import React, { useEffect, useState } from 'react'; @@ -39,10 +43,13 @@ const CookiesConsentWrapper = styled.div` export const CookieConsent = () => { const { config } = usePrismicData(); - const [isCookiesConsentVisible, setIsCookiesConsentVisible] = useState(false); - const [shouldCookiesConsentAppend, setShouldCookiesConsentAppend] = useState(true); + const [isCookiesConsentVisible, setIsCookiesConsentVisible] = + useState(false); + const [shouldCookiesConsentAppend, setShouldCookiesConsentAppend] = + useState(true); - const cookieConsentText = config?.data?.cookiesConsentText as PrismicRichTextType; + const cookieConsentText = config?.data + ?.cookiesConsentText as PrismicRichTextType; useEffect(() => { const cookieConsentDismissed = hasCookieConsentDismissed(); @@ -66,7 +73,10 @@ export const CookieConsent = () => { return ( <> -