Fixes

impactMarket · Nov 24, 2023 · 4f14b96 · 4f14b96
1 parent f21bd74
commit 4f14b96
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 98 deletions.
diff --git a/src/components/Stories/StoryInfo.tsx b/src/components/Stories/StoryInfo.tsx
@@ -27,59 +27,71 @@ const GridStyled = styled.div`
         }
     }
 
-    ${mq.phone(css`
-        grid-template-areas: 'love comment report' 'numbers numbers numbers';
-        grid-template-columns: repeat(3, auto);
-
-        .numbers {
-            flex-direction: row;
-            justify-content: center;
-
-            .dot {
-                display: block;
+    ${mq.from(
+        'xs',
+        css`
+            grid-template-areas: 'love comment report' 'numbers numbers numbers';
+            grid-template-columns: repeat(3, auto);
+
+            .numbers {
+                flex-direction: row;
+                justify-content: center;
+
+                .dot {
+                    display: block;
+                }
             }
-        }
-    `)}
+        `
+    )}
 
-    ${mq.tablet(css`
-        grid-template-areas: 'love comment' 'numbers report';
-        grid-template-columns: repeat(2, auto);
+    ${mq.from(
+        'sm',
+        css`
+            grid-template-areas: 'love comment' 'numbers report';
+            grid-template-columns: repeat(2, auto);
 
-        .numbers {
-            flex-direction: column;
+            .numbers {
+                flex-direction: column;
 
-            .dot {
-                display: none;
+                .dot {
+                    display: none;
+                }
             }
-        }
-    `)}
-
-    ${mq.tabletLandscape(css`
-        grid-template-areas: 'love comment report' 'numbers numbers numbers';
-        grid-template-columns: repeat(3, auto);
-
-        .numbers {
-            flex-direction: row;
-            justify-content: center;
-
-            .dot {
-                display: block;
+        `
+    )}
+
+    ${mq.from(
+        'md',
+        css`
+            grid-template-areas: 'love comment report' 'numbers numbers numbers';
+            grid-template-columns: repeat(3, auto);
+
+            .numbers {
+                flex-direction: row;
+                justify-content: center;
+
+                .dot {
+                    display: block;
+                }
             }
-        }
-    `)}
+        `
+    )}
 
-    ${mq.desktop(css`
-        grid-template-areas: 'love comment numbers report';
-        grid-template-columns: repeat(4, auto);
+    ${mq.from(
+        'lg',
+        css`
+            grid-template-areas: 'love comment numbers report';
+            grid-template-columns: repeat(4, auto);
 
-        .numbers {
-            flex-direction: column;
+            .numbers {
+                flex-direction: column;
 
-            .dot {
-                display: none;
+                .dot {
+                    display: none;
+                }
             }
-        }
-    `)}
+        `
+    )}
 `;
 
 const StoryInfo = (props: any) => {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -9,11 +9,14 @@ import {
 } from '@impact-market/ui';
 import { PrismicDataProvider } from '../libs/Prismic/components/PrismicDataProvider';
 import { Provider, useSelector } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
 import { WagmiConfig, useAccount } from 'wagmi';
 import { getCookie, hasCookie } from 'cookies-next';
-import { handleFirebaseServiceWorker } from 'src/hooks/firebase/handleFirebaseServiceWorker';
+import { handleFirebaseServiceWorker } from '../hooks/firebase/handleFirebaseServiceWorker';
 import { isSupported } from 'firebase/messaging';
-import { registerFirebaseSW } from 'src/hooks/useServiceWorker';
+import { registerFirebaseSW } from '../hooks/useServiceWorker';
+import { theme } from '../theme/theme';
+
 import {
     selectCurrentUser,
     setSignature,
@@ -156,9 +159,11 @@ const App = (props: AppProps) => {
                     <WrapperProvider>
                         <Provider store={store}>
                             <ApolloProvider client={apolloClient}>
-                                <ModalManager modals={modals} />
-                                <Toaster />
-                                <InnerApp {...props} />
+                                <ThemeProvider theme={theme}>
+                                    <ModalManager modals={modals} />
+                                    <Toaster />
+                                    <InnerApp {...props} />
+                                </ThemeProvider>
                                 <GoogleAnalytics />
                             </ApolloProvider>
                         </Provider>

diff --git a/src/theme/helpers/mq.ts b/src/theme/helpers/mq.ts
@@ -0,0 +1,8 @@
+import { mq as baseMq } from 'styled-gen';
+import { theme } from '../theme';
+
+export const mq = Object.keys(theme).reduce(
+    // @ts-ignore
+    (result, bp) => ({ ...result, [bp]: (style: any) => baseMq.bp(bp, style) }),
+    {}
+) as { [bp in keyof typeof theme]: Function };
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -0,0 +1,10 @@
+const breakpoints = {
+    lg: 76,
+    md: 64,
+    sm: 48,
+    xs: 0
+};
+
+export const theme = {
+    breakpoints
+};
diff --git a/src/views/MicroCredit/Application/FormSection.tsx b/src/views/MicroCredit/Application/FormSection.tsx
@@ -2,28 +2,35 @@ import { Box, Card, Col, Row } from '@impact-market/ui';
 import { mq } from 'styled-gen';
 import FullWidthField from './FullWidthField';
 import MobileBankerSelector from './MobileBankerSelector';
+import React from 'react';
 import RichText from '../../../libs/Prismic/components/RichText';
 import styled, { css } from 'styled-components';
 
 const Section = styled(Row)`
-    ${mq.phone(css`
-        margin-bottom: 3rem;
+    ${mq.from(
+        'xs',
+        css`
+            margin-bottom: 3rem;
 
-        .section-info {
-            margin-bottom: 1rem;
-        }
-    `)};
+            .section-info {
+                margin-bottom: 1rem;
+            }
+        `
+    )};
 `;
 
 const DoubleInputWrapper = styled(Row)`
-    ${mq.phone(css`
-        flex-direction: column;
+    ${mq.from(
+        'xs',
+        css`
+            flex-direction: column;
 
-        > .column {
-            flex-basis: 100% !important;
-            width: 100%;
-        }
-    `)};
+            > .column {
+                flex-basis: 100% !important;
+                width: 100%;
+            }
+        `
+    )};
 `;
 
 export interface FormSectionProps {

diff --git a/src/views/MicroCredit/Application/FullWidthField.tsx b/src/views/MicroCredit/Application/FullWidthField.tsx
@@ -14,7 +14,7 @@ import { getCookie } from 'cookies-next';
 import { mq } from 'styled-gen';
 import { selectCurrentUser } from '../../../state/slices/auth';
 import { useEffect, useState } from 'react';
-import { useGetMicrocreditPreSignedMutation } from 'src/api/microcredit';
+import { useGetMicrocreditPreSignedMutation } from '../../../api/microcredit';
 import { useSelector } from 'react-redux';
 
 import RichText from '../../../libs/Prismic/components/RichText';
@@ -67,9 +67,12 @@ const CheckBox = styled(Box)`
 `;
 
 const Spacer = styled(Box)`
-    ${mq.phone(css`
-        display: none;
-    `)};
+    ${mq.from(
+        'xs',
+        css`
+            display: none;
+        `
+    )};
 `;
 
 const CurrencySelector = styled(DropdownMenu)`
@@ -101,14 +104,17 @@ const CurrencyWrapper = styled(Box)`
         flex-basis: 49%;
     }
 
-    ${mq.phone(css`
-        flex-wrap: wrap;
-
-        .column {
-            min-width: 10rem;
-            flex-basis: 100%;
-        }
-    `)};
+    ${mq.from(
+        'xs',
+        css`
+            flex-wrap: wrap;
+
+            .column {
+                min-width: 10rem;
+                flex-basis: 100%;
+            }
+        `
+    )};
 `;
 
 export interface FullWidthProps {

diff --git a/src/views/MicroCredit/Application/Profile.tsx b/src/views/MicroCredit/Application/Profile.tsx
@@ -1,17 +1,21 @@
 import { Box, Button, Card, Col, Input, Row, colors } from '@impact-market/ui';
 import { mq } from 'styled-gen';
+import React from 'react';
 import RichText from '../../../libs/Prismic/components/RichText';
 import styled, { css } from 'styled-components';
 import useTranslations from '../../../libs/Prismic/hooks/useTranslations';
 
 const Section = styled(Row)`
-    ${mq.phone(css`
-        margin-bottom: 3rem;
+    ${mq.from(
+        'xs',
+        css`
+            margin-bottom: 3rem;
 
-        .section-info {
-            margin-bottom: 1rem;
-        }
-    `)};
+            .section-info {
+                margin-bottom: 1rem;
+            }
+        `
+    )};
 `;
 
 const SelectElement = styled(Button)`

diff --git a/src/views/MicroCredit/LoanRepayment.tsx b/src/views/MicroCredit/LoanRepayment.tsx
@@ -28,30 +28,36 @@ const BorderWrapper = styled(Box)`
 `;
 
 const ActionWrapper = styled(Box)`
-    ${mq.phone(css`
-        flex-direction: column;
+    ${mq.from(
+        'xs',
+        css`
+            flex-direction: column;
 
-        > .approve,
-        .repay {
-            width: 100%;
-        }
+            > .approve,
+            .repay {
+                width: 100%;
+            }
 
-        > svg {
-            transform: rotate(90deg);
-        }
-    `)}
+            > svg {
+                transform: rotate(90deg);
+            }
+        `
+    )}
 
-    ${mq.tabletLandscape(css`
-        flex-direction: row;
+    ${mq.from(
+        'md',
+        css`
+            flex-direction: row;
 
-        > .approve {
-            flex: 1;
-        }
+            > .approve {
+                flex: 1;
+            }
 
-        > svg {
-            transform: rotate(0deg);
-        }
-    `)}
+            > svg {
+                transform: rotate(0deg);
+            }
+        `
+    )}
 `;
 
 const LoanRepayment = (props: any) => {