Fixes

impactMarket · Nov 29, 2023 · 1fa9917 · 1fa9917
1 parent 1a228fc
commit 1fa9917
Show file tree

Hide file tree

Showing 51 changed files with 1,023 additions and 422 deletions.
diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx
@@ -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`
@@ -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();
 
@@ -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>
                     )}

diff --git 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 (
         <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}

diff --git 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
@@ -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<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();
@@ -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: `
@@ -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>

diff --git a/src/components/Copied/Copied.tsx b/src/components/Copied/Copied.tsx
@@ -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';

diff --git a/src/components/Header/Header.style.ts b/src/components/Header/Header.style.ts
@@ -1,5 +1,7 @@
 import { colors } from '../../theme';
-import { ease, mq, transitions } from 'styled-gen';
+import { mq } from 'styled-gen';
+import { transitions } from 'src/theme/helpers/transitions';
+import { ease } from 'src/theme/variables/ease';
 import { position, size } from 'polished';
 import styled, { css } from 'styled-components';
 
@@ -18,7 +20,7 @@ export const HeaderWrapper = styled.div<{
 
     ${(props) =>
         mq.upTo(
-            'tabletLandscape',
+            'md',
             css`
                 ${position(
                     'sticky',
@@ -43,7 +45,7 @@ export const HeaderMainRightCol = styled.div`
     height: 1.5rem;
 
     ${mq.upTo(
-        'tabletLandscape',
+        'md',
         css`
             display: none;
         `
@@ -56,7 +58,7 @@ export const HeaderMainBar = styled.div`
     position: relative;
 
     ${mq.upTo(
-        'tabletLandscape',
+        'md',
         css`
             padding: 0;
         `
@@ -72,14 +74,14 @@ export const HeaderBarContent = styled.div`
     padding: 0 2rem;
 
     ${mq.upTo(
-        'desktop',
+        'lg',
         css`
             padding: 0 1rem;
         `
     )}
 
     ${mq.upTo(
-        'tabletLandscape',
+        'md',
         css`
             padding: 1rem 2rem;
         `
@@ -93,18 +95,24 @@ export const HeaderMainBarLeftCol = styled.div`
 export const HeaderMainBarMenu = styled.div`
     display: none;
 
-    ${mq.tabletLandscape(css`
-        display: flex;
-        gap: 1rem;
+    ${mq.from(
+        'md',
+        css`
+            display: flex;
+            gap: 1rem;
 
-        & > a + a {
-            margin-left: 2rem;
-        }
-    `)}
+            & > a + a {
+                margin-left: 2rem;
+            }
+        `
+    )}
 
-    ${mq.desktop(css`
-        gap: 2rem;
-    `)}
+    ${mq.from(
+        'lg',
+        css`
+            gap: 2rem;
+        `
+    )}
 `;
 
 export const HeaderMainBarMobileMenuButton = styled.a`
@@ -118,9 +126,12 @@ export const HeaderMainBarMobileMenuButton = styled.a`
     justify-content: center;
     z-index: 100;
 
-    ${mq.tabletLandscape(css`
-        display: none;
-    `)}
+    ${mq.from(
+        'md',
+        css`
+            display: none;
+        `
+    )}
 `;
 
 export const MobileContent = styled.div``;
@@ -154,9 +165,12 @@ export const HeaderMobileContent = styled.div<{
     width: 100%;
     z-index: 1;
 
-    ${mq.tabletLandscape(css`
-        display: none;
-    `)}
+    ${mq.from(
+        'md',
+        css`
+            display: none;
+        `
+    )}
 `;
 
 export const MobileMenuButtons = styled.div`