diff --git a/src/Pages/Auth/Mobile/AccountBox.jsx b/src/Pages/Auth/Mobile/AccountBox.jsx
new file mode 100644
index 00000000..964f6f27
--- /dev/null
+++ b/src/Pages/Auth/Mobile/AccountBox.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { LoginForm } from "./loginForm";
+import { AccountContext } from "./accountContext";
+import { SignupForm } from "./signupForm";
+import {BoxContainer, TopContainer, HeaderContainer,
+ BackDrop, InnerContainer, HeaderText, SmallText} from "../../../Layout/Auth/styledAuth";
+
+const backdropVariants = {
+ expanded: {
+ width: "233%",
+ height: "1050px",
+ borderRadius: "20%",
+ transform: "rotate(60deg)",
+ },
+ collapsed: {
+ width: "160%",
+ height: "550px",
+ borderRadius: "50%",
+ transform: "rotate(60deg)",
+ },
+};
+
+const expandingTransition = {
+ type: "spring",
+ duration: 2.3,
+ stiffness: 30,
+};
+
+const AccountBox = () => {
+ const [isExpanded, setExpanded] = useState(false);
+ const [active, setActive] = useState("signin");
+
+ const playExpandingAnimation = () => {
+ setExpanded(true);
+ setTimeout(() => {
+ setExpanded(false);
+ }, expandingTransition.duration * 1000 - 1500);
+ };
+
+ const switchToSignup = () => {
+ playExpandingAnimation();
+ setTimeout(() => {
+ setActive("signup");
+ }, 400);
+ };
+
+ const switchToSignin = () => {
+ playExpandingAnimation();
+ setTimeout(() => {
+ setActive("signin");
+ }, 400);
+ };
+
+ const contextValue = { switchToSignup, switchToSignin };
+
+ return (
+
+
+
+
+ {active === "signin" && (
+
+ Welcome
+ Back
+ Please sign-in to continue!
+
+ )}
+ {active === "signup" && (
+
+ Create
+ Account
+ Please sign-up to continue!
+
+ )}
+
+
+ {active === "signin" && }
+ {active === "signup" && }
+
+
+
+ );
+}
+
+export default AccountBox;
diff --git a/src/Pages/Auth/Mobile/accountContext.js b/src/Pages/Auth/Mobile/accountContext.js
new file mode 100644
index 00000000..18105a79
--- /dev/null
+++ b/src/Pages/Auth/Mobile/accountContext.js
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const AccountContext = createContext();
diff --git a/src/Pages/Auth/Mobile/loginForm.jsx b/src/Pages/Auth/Mobile/loginForm.jsx
new file mode 100644
index 00000000..5d0e0e56
--- /dev/null
+++ b/src/Pages/Auth/Mobile/loginForm.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import {
+ BoldLink,
+ BoxContainer,
+ FormContainer,
+ Input,
+ MutedLink,
+ SubmitButton,
+} from "../../../Layout/Auth/styledCommon";
+import { Marginer } from "./marginer";
+import { AccountContext } from "./accountContext";
+
+export function LoginForm() {
+ const { switchToSignup } = useContext(AccountContext);
+
+ return (
+
+
+
+
+
+
+ Forget your password?
+
+ Signin
+
+
+ Don't have an accoun?{" "}
+
+ Signup
+
+
+
+ );
+}
diff --git a/src/Pages/Auth/Mobile/marginer.jsx b/src/Pages/Auth/Mobile/marginer.jsx
new file mode 100644
index 00000000..9c4f25a6
--- /dev/null
+++ b/src/Pages/Auth/Mobile/marginer.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+
+const HorizontalMargin = styled.span`
+ display: flex;
+ width: ${({ margin }) =>
+ typeof margin === "string" ? margin : `${margin}px`};
+`;
+
+const VerticalMargin = styled.span`
+ display: flex;
+ height: ${({ margin }) =>
+ typeof margin === "string" ? margin : `${margin}px`};
+`;
+
+function Marginer(props) {
+ const { direction } = props;
+
+ if (direction === "horizontal") return ;
+ else {
+ return ;
+ }
+}
+
+Marginer.defaultProps = {
+ direction: "horizontal",
+};
+
+export { Marginer };
diff --git a/src/Pages/Auth/Mobile/signupForm.jsx b/src/Pages/Auth/Mobile/signupForm.jsx
new file mode 100644
index 00000000..8352361f
--- /dev/null
+++ b/src/Pages/Auth/Mobile/signupForm.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import {
+ BoldLink,
+ BoxContainer,
+ FormContainer,
+ Input,
+ MutedLink,
+ SubmitButton,
+} from "../../../Layout/Auth/styledCommon";
+import { Marginer } from "./marginer";
+import { AccountContext } from "./accountContext";
+
+export function SignupForm() {
+ const { switchToSignin } = useContext(AccountContext);
+
+ return (
+
+
+
+
+
+
+
+
+ Signup
+
+
+ Already have an account?
+
+ Signin
+
+
+
+ );
+}
diff --git a/src/Pages/Auth/login.css b/src/Pages/Auth/login.css
index 2ee76e48..7574a39e 100644
--- a/src/Pages/Auth/login.css
+++ b/src/Pages/Auth/login.css
@@ -9,7 +9,8 @@
margin: auto;
width: 100%;
text-align: center;
- height: auto;
+ /* height: auto; */
+ height: 100vh;
}
.login-page h2 {
@@ -40,7 +41,7 @@
.login-page form input::placeholder {
padding-left: 10px;
- font-size: 0.75rem;
+ font-size: 1.75rem;
}
.login-page form .row {
@@ -79,7 +80,7 @@
float: left;
padding: 0;
font-weight: bold;
- font-size: 0.9rem;
+ font-size: 1.9rem;
}
#login-page-container .brand {
@@ -97,7 +98,7 @@
width: 40%;
}
.login-page h2 {
- font-size: 2rem;
+ font-size: 3rem;
margin: 30px auto;
}
}
diff --git a/src/Pages/Auth/login.jsx b/src/Pages/Auth/login.jsx
index aaf64b38..c10d0414 100644
--- a/src/Pages/Auth/login.jsx
+++ b/src/Pages/Auth/login.jsx
@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
import { GlobalState } from '../../GlobalState';
import "./login.css";
+import Logo from "../../Assets/Images/newLogo.png";
const Login = () => {
const state = useContext(GlobalState)
@@ -31,7 +32,8 @@ const Login = () => {
+ 
+ {/*