From a29c77f9cf8ee1f50432d167bfc6d02bc0230f85 Mon Sep 17 00:00:00 2001
From: Ani <ani_kalpachka888@abv.bg>
Date: Fri, 21 Oct 2022 23:58:49 +0300
Subject: [PATCH] Fix Inline donation bug (#1069)

---
 src/components/campaigns/ViewCampaignPage.tsx | 54 ++++++++-----------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/campaigns/ViewCampaignPage.tsx b/src/components/campaigns/ViewCampaignPage.tsx
index 31f9ee04b..2a87adcd7 100644
--- a/src/components/campaigns/ViewCampaignPage.tsx
+++ b/src/components/campaigns/ViewCampaignPage.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 
-import { Grid, Theme } from '@mui/material'
-import { createStyles, makeStyles } from '@mui/styles'
+import { Grid } from '@mui/material'
 
 import { useViewCampaign } from 'common/hooks/campaigns'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
+import theme from 'common/theme'
 
 import NotFoundPage from 'pages/404'
 import Layout from 'components/layout/Layout'
@@ -12,36 +12,9 @@ import InlineDonation from './InlineDonation'
 import CampaignDetails from './CampaignDetails'
 import useMobile from 'common/hooks/useMobile'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    sideWrapper: {
-      paddingLeft: theme.spacing(2),
-      [theme.breakpoints.down('md')]: {
-        maxWidth: 'max-content',
-        flexBasis: 'fit-content',
-        paddingLeft: theme.spacing(0),
-        flexDirection: 'column',
-      },
-    },
-    donationDesktopWrapper: {
-      position: 'sticky',
-      top: theme.spacing(12),
-    },
-    donationMobileWrapper: {
-      position: 'sticky',
-      top: 0,
-      order: -1,
-      marginTop: `-${theme.spacing(2)}`,
-      minWidth: '100vw',
-      boxShadow: '2px 4px 5px rgba(0, 0, 0, 0.25)',
-    },
-  }),
-)
-
 type Props = { slug: string }
 
 export default function ViewCampaignPage({ slug }: Props) {
-  const classes = useStyles()
   const { data } = useViewCampaign(slug)
   if (!data || !data.campaign) return <NotFoundPage />
   const { campaign } = data
@@ -57,7 +30,15 @@ export default function ViewCampaignPage({ slug }: Props) {
       <Grid container component="section" maxWidth="lg" justifyContent="center" m="0 auto">
         <CampaignDetails campaign={campaign} />
         {mobile || small ? (
-          <Grid item className={classes.donationMobileWrapper}>
+          <Grid
+            item
+            sx={{
+              position: 'sticky',
+              top: 0,
+              order: -1,
+              marginTop: `-${theme.spacing(3)}`,
+              minWidth: '100vw',
+            }}>
             <InlineDonation campaign={campaign} />
           </Grid>
         ) : (
@@ -68,8 +49,17 @@ export default function ViewCampaignPage({ slug }: Props) {
             sm={4}
             direction="column"
             flexWrap="nowrap"
-            className={classes.sideWrapper}>
-            <Grid item className={classes.donationDesktopWrapper}>
+            sx={{
+              position: 'sticky',
+              paddingLeft: theme.spacing(2),
+              [theme.breakpoints.down('md')]: {
+                maxWidth: 'max-content',
+                flexBasis: 'fit-content',
+                paddingLeft: theme.spacing(0),
+                flexDirection: 'column',
+              },
+            }}>
+            <Grid item sx={{ position: 'sticky', top: theme.spacing(12) }}>
               <InlineDonation campaign={campaign} />
             </Grid>
           </Grid>