From c027d3996983efb5e8423b8012e7555eb2ea3a97 Mon Sep 17 00:00:00 2001
From: Pudi-Sravan <sravanpudi8112005@gmail.com>
Date: Fri, 28 Jun 2024 01:16:13 +0530
Subject: [PATCH] Made the Authentication Pages Responsive

---
 .../forgot password/allfpass/fpass.module.css |  35 ++++++
 .../allfpass/newpass.module.css               |  20 ++++
 .../uifpasscon/passresetconfirm.jsx           |  12 +-
 .../uifpasscon/uconfpass.module.css           |  93 ++++++++++++++-
 .../loginpage/loginbox.module.css             |  34 ++++++
 .../register/register.module.css              |  36 +++++-
 .../signingpages/signingpages.module.css      | 112 +++++++++++++++++-
 .../signingpages/signningpages.jsx            |  13 +-
 .../update details/updateuser.module.css      |  20 ++++
 src/Front_end/homepage/homepage.jsx           |   8 +-
 10 files changed, 364 insertions(+), 19 deletions(-)

diff --git a/src/Front_end/Authentication/forgot password/allfpass/fpass.module.css b/src/Front_end/Authentication/forgot password/allfpass/fpass.module.css
index ab38429..62f3e3d 100644
--- a/src/Front_end/Authentication/forgot password/allfpass/fpass.module.css	
+++ b/src/Front_end/Authentication/forgot password/allfpass/fpass.module.css	
@@ -74,3 +74,38 @@
 .enter:hover{
     background: #4509e9;
 }
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 12px;
+    font-weight: 250;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 6px;
+  }
+}
\ No newline at end of file
diff --git a/src/Front_end/Authentication/forgot password/allfpass/newpass.module.css b/src/Front_end/Authentication/forgot password/allfpass/newpass.module.css
index 266b0bf..da3ea9e 100644
--- a/src/Front_end/Authentication/forgot password/allfpass/newpass.module.css	
+++ b/src/Front_end/Authentication/forgot password/allfpass/newpass.module.css	
@@ -72,3 +72,23 @@
 .enter:hover {
   background: #f34324;
 }
+@media (max-width: 849px) {
+  .form {
+    width: 370px;
+    min-height: 320px;
+  }
+  .head {
+    height: 130px;
+    font-size: 15px;
+  }
+}
+@media (max-width: 390px) {
+  .form {
+    width: 340px;
+    min-height: 320px;
+  }
+  .head {
+    height: 110px;
+    font-size: 12px;
+  }
+}
diff --git a/src/Front_end/Authentication/forgot password/uifpasscon/passresetconfirm.jsx b/src/Front_end/Authentication/forgot password/uifpasscon/passresetconfirm.jsx
index 5c5bb68..9a5c226 100644
--- a/src/Front_end/Authentication/forgot password/uifpasscon/passresetconfirm.jsx	
+++ b/src/Front_end/Authentication/forgot password/uifpasscon/passresetconfirm.jsx	
@@ -27,8 +27,10 @@ function Uconfpass({ settoken, setmail }) {
         <div className={uconfpassCSS.overlaycon}>
           <div className={uconfpassCSS.overlay}>
             <div className={uconfpassCSS.overlay_left}>
-              <h1>Hey</h1>
-              <p>Already a user and forgot password?</p>
+              <div className={uconfpassCSS.overlayheadings}>
+                <h1>Hey</h1>
+                <p>Already a user and forgot password?</p>
+              </div>
               <button
                 className={uconfpassCSS.signin}
                 onClick={handleforgotClick}
@@ -37,8 +39,10 @@ function Uconfpass({ settoken, setmail }) {
               </button>
             </div>
             <div className={uconfpassCSS.overlay_right}>
-              <h1>Helooo</h1>
-              <p>Are you a new User then:</p>
+              <div className={uconfpassCSS.overlayheadings}>
+                <h1>Helooo</h1>
+                <p>Are you a new User then:</p>
+              </div>
               <button
                 className={uconfpassCSS.signup}
                 onClick={handleSignupClick}
diff --git a/src/Front_end/Authentication/forgot password/uifpasscon/uconfpass.module.css b/src/Front_end/Authentication/forgot password/uifpasscon/uconfpass.module.css
index 37eee56..f1035f5 100644
--- a/src/Front_end/Authentication/forgot password/uifpasscon/uconfpass.module.css	
+++ b/src/Front_end/Authentication/forgot password/uifpasscon/uconfpass.module.css	
@@ -31,7 +31,7 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 2;
+  z-index: 102;
 }
 .sign_up {
   position: absolute;
@@ -40,7 +40,7 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 1;
+  z-index: 101;
   opacity: 0;
 }
 .signin,
@@ -61,7 +61,7 @@
 .container.right_panel_active .sign_up {
   transform: translateX(100%);
   opacity: 1;
-  z-index: 5;
+  z-index: 105;
 }
 .overlaycon {
   position: absolute;
@@ -110,3 +110,90 @@
 .overlay_right {
   right: 0px;
 }
+.overlayheadings {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 849px) {
+  .container {
+    width: 370px;
+    min-height: 600px; /* Increased to accommodate minimum height */
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sign_in,
+  .sign_up {
+    min-height: 460px;
+    top: 0%;
+    left: 0;
+    height: 50%;
+    width: 100%; /* Minimum height for smaller screens */
+    transform: translateY(0); /* Reset transform for vertical layout */
+  }
+
+  .signin,
+  .signup {
+    margin: 15px;
+    width: 175px;
+    font-size: 12px;
+  }
+
+  .container.right_panel_active .sign_in {
+    transform: translateY(150px);
+  }
+
+  .container.right_panel_active .sign_up {
+    transform: translateY(150px);
+  }
+
+  .overlaycon {
+    left: 0px;
+    top: 50%;
+    height: 50%; /* Remaining height for overlay */
+    width: 100%;
+    z-index: 100;
+    transform: translateY(0); /* No vertical transformation for overlay */
+  }
+
+  .container.right_panel_active .overlaycon {
+    transform: translateY(-100%);
+  }
+
+  .overlay {
+    left: 0;
+    top: 50%; /* Position overlay above the container */
+    width: 100%;
+    height: 100%; /* Double height to cover entire container */
+    transform: translateY(0);
+  }
+
+  .container.right_panel_active .overlay {
+    transform: translateY(-100%);
+  }
+
+  .overlay_right,
+  .overlay_left {
+    flex-direction: row;
+    padding: 0px 10px;
+    left: 0px;
+    width: 100%;
+    height: 50%;
+    transform: translateY(0);
+  }
+
+  .overlay_left {
+    top: 50%;
+  }
+
+  .overlay_right {
+    top: 0%;
+  }
+}
+@media (max-width: 395px) {
+  .container {
+    width: 340px;
+  }
+}
diff --git a/src/Front_end/Authentication/loginpage/loginbox.module.css b/src/Front_end/Authentication/loginpage/loginbox.module.css
index 004dcee..42f90b0 100644
--- a/src/Front_end/Authentication/loginpage/loginbox.module.css
+++ b/src/Front_end/Authentication/loginpage/loginbox.module.css
@@ -74,3 +74,37 @@
 .enter:hover {
   background: #e4ba02;
 }
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 10px;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 10px;
+  }
+}
diff --git a/src/Front_end/Authentication/register/register.module.css b/src/Front_end/Authentication/register/register.module.css
index fa6d064..a5e08bd 100644
--- a/src/Front_end/Authentication/register/register.module.css
+++ b/src/Front_end/Authentication/register/register.module.css
@@ -72,5 +72,39 @@
   transform: scale(0.9);
 }
 .enter:hover {
-    background: #ff9101;
+  background: #ff9101;
+}
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 10px;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 6px;
+  }
 }
diff --git a/src/Front_end/Authentication/signingpages/signingpages.module.css b/src/Front_end/Authentication/signingpages/signingpages.module.css
index afa219f..82b9ea3 100644
--- a/src/Front_end/Authentication/signingpages/signingpages.module.css
+++ b/src/Front_end/Authentication/signingpages/signingpages.module.css
@@ -1,7 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
 * {
   box-sizing: border-box;
 }
+
 .body {
   height: 100vh;
   width: 100vw;
@@ -13,6 +15,7 @@
   background-size: cover;
   font-family: "montserrat", sans-serif;
 }
+
 .container {
   position: relative;
   width: 768px;
@@ -24,6 +27,7 @@
   box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25),
     0px 10px 10px rgba(0, 0, 0, 0.22);
 }
+
 .sign_in {
   position: absolute;
   top: 0px;
@@ -31,8 +35,10 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 2;
+  z-index: 102;
+  min-height: 460px; /* Minimum height for sign_in */
 }
+
 .sign_up {
   position: absolute;
   top: 0px;
@@ -40,9 +46,11 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 1;
+  z-index: 101;
   opacity: 0;
+  min-height: 460px; /* Minimum height for sign_up */
 }
+
 .signin,
 .signup {
   margin: 15px;
@@ -55,14 +63,17 @@
   color: #2b2a2a;
   font-size: 18px;
 }
+
 .container.right_panel_active .sign_in {
   transform: translateX(100%);
 }
+
 .container.right_panel_active .sign_up {
   transform: translateX(100%);
   opacity: 1;
-  z-index: 5;
+  z-index: 105;
 }
+
 .overlaycon {
   position: absolute;
   top: 0px;
@@ -73,9 +84,11 @@
   transition: transform 0.6s ease-in-out;
   z-index: 100;
 }
+
 .container.right_panel_active .overlaycon {
   transform: translateX(-100%);
 }
+
 .overlay {
   position: relative;
   color: #181818;
@@ -90,6 +103,7 @@
 .container.right_panel_active .overlay {
   transform: translateX(50%);
 }
+
 .overlay_right,
 .overlay_left {
   position: absolute;
@@ -105,9 +119,101 @@
   transform: translateX(0);
   transition: transform 0.6s ease-in-out;
 }
+
 .overlay_left {
   left: 0px;
 }
+
 .overlay_right {
   right: 0px;
 }
+.overlayheadings {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 849px) {
+  .container {
+    width: 370px;
+    min-height: 600px; /* Increased to accommodate minimum height */
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sign_in,
+  .sign_up {
+    top: 0%;
+    left: 0;
+    height: 50%;
+    width: 100%; /* Minimum height for smaller screens */
+    transform: translateY(0); /* Reset transform for vertical layout */
+  }
+
+  .signin,
+  .signup {
+    margin: 15px;
+    width: 175px;
+    font-size: 14px;
+  }
+
+  .container.right_panel_active .sign_in {
+    transform: translateY(137px);
+  }
+
+  .container.right_panel_active .sign_up {
+    transform: translateY(137px);
+  }
+
+  .overlaycon {
+    left: 0px;
+    top: 50%;
+    height: 50%; /* Remaining height for overlay */
+    width: 100%;
+    z-index: 100;
+    transform: translateY(0); /* No vertical transformation for overlay */
+  }
+
+  .container.right_panel_active .overlaycon {
+    transform: translateY(-100%);
+  }
+
+  .overlay {
+    left: 0;
+    top: 50%; /* Position overlay above the container */
+    width: 100%;
+    height: 100%; /* Double height to cover entire container */
+    transform: translateY(0);
+  }
+
+  .container.right_panel_active .overlay {
+    transform: translateY(-100%);
+  }
+
+  .overlay_right,
+  .overlay_left {
+    flex-direction: row;
+    padding: 0px 10px;
+    left: 0px;
+    width: 100%;
+    height: 50%;
+    transform: translateY(0);
+  }
+
+  .overlay_left {
+    top: 50%;
+  }
+
+  .overlay_right {
+    top: 0%;
+  }
+  .h1 {
+    font-size: 24px;
+  }
+}
+@media (max-width: 395px) {
+  .container {
+    width: 340px;
+  }
+}
diff --git a/src/Front_end/Authentication/signingpages/signningpages.jsx b/src/Front_end/Authentication/signingpages/signningpages.jsx
index 4edd436..4fafec7 100644
--- a/src/Front_end/Authentication/signingpages/signningpages.jsx
+++ b/src/Front_end/Authentication/signingpages/signningpages.jsx
@@ -27,8 +27,11 @@ function Signingpages({ settoken, setUpdload }) {
         <div className={signingpagesCSS.overlaycon}>
           <div className={signingpagesCSS.overlay}>
             <div className={signingpagesCSS.overlay_left}>
-              <h1>Welcome back!</h1>
-              <p>To get back to your chats, please Login</p>
+              <div className={signingpagesCSS.overlayheadings}>
+                <h1 className={signingpagesCSS.h1}>Welcome back!</h1>
+                <p>To get back to your chats, please Login</p>
+              </div>
+
               <button
                 className={signingpagesCSS.signin}
                 onClick={handleSigninClick}
@@ -37,8 +40,10 @@ function Signingpages({ settoken, setUpdload }) {
               </button>
             </div>
             <div className={signingpagesCSS.overlay_right}>
-              <h1>Hey, What's New!</h1>
-              <p>To get back to your chats, please Login</p>
+              <div className={signingpagesCSS.overlayheadings}>
+                <h1 className={signingpagesCSS.h1}>Hey, What's New!</h1>
+                <p>To get back to your chats, please Login</p>
+              </div>
               <button
                 className={signingpagesCSS.signup}
                 onClick={handleSignupClick}
diff --git a/src/Front_end/Authentication/update details/updateuser.module.css b/src/Front_end/Authentication/update details/updateuser.module.css
index 7b0f30d..7e8f5d1 100644
--- a/src/Front_end/Authentication/update details/updateuser.module.css	
+++ b/src/Front_end/Authentication/update details/updateuser.module.css	
@@ -72,3 +72,23 @@
 .enter:hover {
   background: #f34324;
 }
+@media (max-width: 849px) {
+  .form {
+    width: 370px;
+    min-height: 320px;
+  }
+  .head {
+    height: 130px;
+    font-size: 15px;
+  }
+}
+@media (max-width: 390px) {
+  .form {
+    width: 340px;
+    min-height: 320px;
+  }
+  .head {
+    height: 110px;
+    font-size: 12px;
+  }
+}
\ No newline at end of file
diff --git a/src/Front_end/homepage/homepage.jsx b/src/Front_end/homepage/homepage.jsx
index dc6b533..d4c3a1b 100644
--- a/src/Front_end/homepage/homepage.jsx
+++ b/src/Front_end/homepage/homepage.jsx
@@ -35,7 +35,6 @@ import Googlecalendar from "./google calendar/googlecalendar";
 import { FaCalendarAlt } from "react-icons/fa";
 import { SiGooglecalendar } from "react-icons/si";
 
-
 function Home(data) {
   const {
     setUserId,
@@ -63,7 +62,8 @@ function Home(data) {
     viewtask,
     setViewtask,
     assigntaskself,
-    setassigntaskself, opencalendarevents,
+    setassigntaskself,
+    opencalendarevents,
     setopencalendarevents,
   } = useContext(Allconvers);
   const { dispatch } = useContext(Chatcontext);
@@ -263,7 +263,7 @@ function Home(data) {
       {assigntask ? <Assigntask /> : <></>}
       {assigntaskself ? <Assigntaskself /> : <></>}
       {showmembers ? <Showmembers /> : <></>}
-    //  {opencalendarevents ? <Googlecalendar /> : <></>}
+      {opencalendarevents ? <Googlecalendar /> : <></>}
       {addchannelmember ? <Addmember /> : <></>}
       {addchannel ? <Addchannel /> : <></>}
       {isLoading ? (
@@ -396,7 +396,7 @@ function Home(data) {
                       color="white"
                       style={{ cursor: "pointer" }}
                     />
-                     <SiGooglecalendar
+                    <SiGooglecalendar
                       onClick={calendarAuth}
                       size={30}
                       color="white"