log in responsive fix

src/components/LogInContainer.js

@@ -9,29 +9,48 @@ import UserContext from "../context/UserContext";
 import {logout} from "./NavBar"
 import { GoogleLogin } from 'react-google-login';
 import Axios from "axios";
+import { Device} from './miscellaneous/Responsive';
 
 const BaseApp = styled.div`
   display: flex;
   color: white;
   height:100vh;
+  flex-direction: column;
+
+@media ${Device.laptop} {
+  flex-direction: row;
+}
 
 `;
 
 const AppSide = styled.div`
-  width: 50%;
   background-color: #66bfbf;
  display: grid;
   grid-template-columns: repeat(auto-fit, 300px);
   justify-content: center;
   align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  @media ${Device.laptop} {
+    width: 50%;
+  }
+
+
+
 
 `;
 const AppForm = styled.div`
 
-  width: 50%;
   background-color: #ffffff;
   padding: 25px 40px;
-  overflow: auto;
+  height: 100vh;
+  width: 100vw;
+
+  @media ${Device.laptop} {
+    width: 50%;
+    overflow:auto
+  }
 
 `;
 const PageSwitcherContainer = styled.div`

src/components/PricingPlan.js

@@ -6,26 +6,8 @@ import UserContext from "../context/UserContext";
 import { useHistory } from "react-router-dom";
 import Axios from 'axios';
 import { Button } from './miscellaneous/Styles';
+import { Device} from './miscellaneous/Responsive';
 
-const size = {
-  mobileS: '320px',
-  mobileM: '375px',
-  mobileL: '425px',
-  tablet: '768px',
-  laptop: '1024px',
-  laptopL: '1440px',
-  desktop: '2560px'
-}
-export const Device = {
-  mobileS: `(min-width: ${size.mobileS})`,
-  mobileM: `(min-width: ${size.mobileM})`,
-  mobileL: `(min-width: ${size.mobileL})`,
-  tablet: `(min-width: ${size.tablet})`,
-  laptop: `(min-width: ${size.laptop})`,
-  laptopL: `(min-width: ${size.laptopL})`,
-  desktop: `(min-width: ${size.desktop})`,
-  desktopL: `(min-width: ${size.desktop})`
-};
 const PricingPlanContainer = styled.div`
 
     display:flex;

src/components/miscellaneous/Responsive.js

@@ -0,0 +1,19 @@
+export const size = {
+  mobileS: '320px',
+  mobileM: '375px',
+  mobileL: '425px',
+  tablet: '768px',
+  laptop: '1024px',
+  laptopL: '1440px',
+  desktop: '2560px'
+}
+export const Device = {
+  mobileS: `(min-width: ${size.mobileS})`,
+  mobileM: `(min-width: ${size.mobileM})`,
+  mobileL: `(min-width: ${size.mobileL})`,
+  tablet: `(min-width: ${size.tablet})`,
+  laptop: `(min-width: ${size.laptop})`,
+  laptopL: `(min-width: ${size.laptopL})`,
+  desktop: `(min-width: ${size.desktop})`,
+  desktopL: `(min-width: ${size.desktop})`
+};