Merge pull request #61 from which-ecosystem/mobile-adaptation

Adapt application for mobile devices

1 files changed, 13 insertions, 3 deletions

diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 24487f3..56d7372 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
+
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
 import AuthPage from './AuthPage/AuthPage';
@@ -8,21 +10,29 @@ import HomePage from './HomePage/HomePage';
 import NotificationsPage from './NotificationsPage/NotificationsPage';
 import { useNavigate } from '../hooks/useNavigate';
 
+
 const useStyles = makeStyles(theme => ({
   root: {
-    margin: theme.spacing(15, 5, 5, 8)
+    [theme.breakpoints.down('sm')]: {
+      margin: theme.spacing(2, 0, 12, 0)
+    },
+    [theme.breakpoints.up('md')]: {
+      margin: theme.spacing(15, 5, 8, 5)
+    }
   }
 }));
 
 const Page: React.FC = () => {
   const { page } = useNavigate();
   const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <SnackbarProvider
       maxSnack={3}
       anchorOrigin={{
-        vertical: 'bottom',
+        vertical: isMobile ? 'top' : 'bottom',
         horizontal: 'right'
       }}
     >