Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bump styled-gen from 1.4.8 to 2.0.1 #341

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
50 changes: 40 additions & 10 deletions src/components/Address/Address.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,12 @@ const AddressWrapper = styled.div<any>`
text-align: center;
width: 100%;
${mq.phone(css`
user-select: none !important;
`)}
${mq.upTo(
'sm',
css`
user-select: none !important;
`
)}
`;

const CopyLink = styled.div`
Expand All @@ -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<any>();
const { sizes, width } = useDeviceSize();

Expand All @@ -62,26 +72,46 @@ export const Address = (
return (
<Wrapper {...forwardProps}>
<AddressRow>
{!!currency && <Currency currency={currency} mr={0.5} sHeight={2.375} sWidth={2.375} />}
<CopyToClipboard onCopy={() => setCopied(Date.now())} text={address}>
{!!currency && (
<Currency
currency={currency}
mr={0.5}
sHeight={2.375}
sWidth={2.375}
/>
)}
<CopyToClipboard
onCopy={() => setCopied(Date.now())}
text={address}
>
<AddressWrapper small={small}>
<Copied trigger={copied} />
{forceEllipsis ? (
<span>
{formatAddress(address, [width < sizes.sm ? 8 : 12, width < sizes.sm ? 8 : 12])}
{formatAddress(address, [
width < sizes.sm ? 8 : 12,
width < sizes.sm ? 8 : 12
])}
</span>
) : (
<span>{width < sizes.sm ? formatAddress(address) : address}</span>
<span>
{width < sizes.sm
? formatAddress(address)
: address}
</span>
)}
</AddressWrapper>
</CopyToClipboard>
</AddressRow>
<CopyLink>
<CopyToClipboard onCopy={() => setCopied(Date.now())} text={address}>
<CopyToClipboard
onCopy={() => setCopied(Date.now())}
text={address}
>
{!!renderLabel ? (
renderLabel()
) : (
<Text brandPrimary medium>
<Text brandPrimary sFontWeight={500}>
<String id="copyAddress" />
</Text>
)}
Expand Down
33 changes: 22 additions & 11 deletions src/components/BoldInput/BoldInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,12 @@ const Content = styled.div`
align-items: center;
flex-direction: column;

${mq.tablet(css`
flex-direction: row;
`)}
${mq.from(
'sm',
css`
flex-direction: row;
`
)}
`;

const Input = styled.input`
Expand Down Expand Up @@ -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.from(
'sm',
css`
padding-bottom: unset;
padding-right: 1rem;
font-weight: ${fonts.weights.bold};
font-size: 27px;
`
)}
`;

const Label = styled.div`
Expand All @@ -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 (
<Wrapper>
<Label>{label}</Label>
<Content>
<InputWrapper>
{asStaticValue ? inputProps?.value || 0 : <Input type="number" {...(inputProps as any)} />}
{asStaticValue ? (
inputProps?.value || 0
) : (
<Input type="number" {...(inputProps as any)} />
)}
{inputPrefix && <>{inputPrefix}&nbsp;</>}
</InputWrapper>
{children}
Expand Down
35 changes: 19 additions & 16 deletions src/components/Breakdown/Breakdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -138,7 +141,7 @@ const AirgrabContent = (props: {

return (
<Div column sWidth="100%">
<Text bold>
<Text sFontWeight={700}>
<String id="airgrabReward" />
</Text>
<Text brandSecondary mt={0.5} small>
Expand All @@ -158,7 +161,7 @@ const AirgrabContent = (props: {
onClick={handleAirgrabRewardClaimClick}
smaller
>
<Text semibold span="true">
<Text sFontWeight={600} span="true">
<String id="claim" />
</Text>
</Button>
Expand Down Expand Up @@ -242,7 +245,7 @@ const Rewards = (props: { onUpdate: Function }) => {

return (
<Div column mt={1} sWidth="100%">
<Text bold>
<Text sFontWeight={700}>
<String id="contributionReward" />
</Text>
<Text brandSecondary mt={0.5} small>
Expand All @@ -268,7 +271,7 @@ const Rewards = (props: { onUpdate: Function }) => {
onClick={handleContributionRewardClaimClick}
smaller
>
<Text semibold span="true">
<Text sFontWeight={600} span="true">
<String id="claim" />
</Text>
</Button>
Expand Down Expand Up @@ -367,7 +370,7 @@ const Epoch = () => {
<Div column sWidth="100%">
{rows.map((value, index) => (
<SummaryRow key={index}>
<Text bold>
<Text sFontWeight={700}>
<String
id={`breakdown.airgrab.summary.row${index + 1}`}
/>
Expand Down
38 changes: 29 additions & 9 deletions src/components/CookieConsent/CookieConsent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -39,10 +43,13 @@ const CookiesConsentWrapper = styled.div<CookiesConsentWrapperProps>`
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();
Expand All @@ -66,7 +73,10 @@ export const CookieConsent = () => {
return (
<>
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`} />
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
Expand Down Expand Up @@ -95,13 +105,23 @@ export const CookieConsent = () => {
<Col xs={12}>
<Div
flex
sAlignItems={{ md: 'center', xs: 'flex-start' }}
sAlignItems={{
md: 'center',
xs: 'flex-start'
}}
sJustifyContent="space-between"
>
<RichText XSmall content={cookieConsentText} medium />
<RichText
XSmall
content={cookieConsentText}
sFontWeight={500}
/>
<Div pl={1}>
<Button onClick={handleConsentDismiss}>
<Text sFontSize={1} sFontWeight={500}>
<Text
sFontSize={1}
sFontWeight={500}
>
Ok
</Text>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Copied/Copied.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { String } from '../String/String';
import { colors, fonts } from '../../theme';
import { ease } from 'styled-gen';
import { ease } from 'src/theme/variables/ease';
import { size } from 'polished';
import React, { useEffect, useState } from 'react';
import styled, { keyframes } from 'styled-components';
Expand Down
Loading