PNG to SVGs

src/components/Dashboard/HomePage/HomePage.tsx

@@ -22,7 +22,7 @@ themeResp = responsiveFontSizes(themeResp);
 const useStyles = makeStyles(() => ({
   root: {
     minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg3.png'})`,
+    backgroundImage: `url(${'/assets/bgBIG.svg'})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
   },

src/components/Dashboard/ProfilePage/ProfilePage.tsx

@@ -25,7 +25,7 @@ themeResp = responsiveFontSizes(themeResp);
 const useStyles = makeStyles(() => ({
   root: {
     minHeight: '36vh',
-    backgroundImage: `url(${'/assets/bg7.png'})`,
+    backgroundImage: `url(${'/assets/bgMED.svg'})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
   },

src/components/Dashboard/ReservationPage/ReservationPage.style.ts

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 export const useStyles = makeStyles(() => ({
   root: {
     minHeight: '36vh',
-    backgroundImage: `url(${'/assets/bg7.png'})`,
+    backgroundImage: `url(${'/assets/bgMED.svg'})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
   },

src/components/LandingPage/LandingPage.tsx

@@ -21,7 +21,7 @@ themeResp = responsiveFontSizes(themeResp);
 const useStyles = makeStyles(() => ({
   root: {
     minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg3.png'})`,
+    backgroundImage: `url(${'/assets/bgBIG.svg'})`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
   },