From 3bfade4d866383e4397f4fa4c0ba822f88c65794 Mon Sep 17 00:00:00 2001
From: Devender Singh <devendersingh2k@gmail.com>
Date: Sat, 14 Dec 2024 02:38:51 +0530
Subject: [PATCH 1/3] refactor-CSS files in src/screens/LoginPage (fixes #2509)

---
 src/screens/LoginPage/LoginPage.module.css | 269 --------------------
 src/screens/LoginPage/LoginPage.tsx        |   2 +-
 src/style/app.module.css                   | 278 ++++++++++++++++++++-
 3 files changed, 275 insertions(+), 274 deletions(-)
 delete mode 100644 src/screens/LoginPage/LoginPage.module.css

diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
deleted file mode 100644
index 6f58138c34..0000000000
--- a/src/screens/LoginPage/LoginPage.module.css
+++ /dev/null
@@ -1,269 +0,0 @@
-.login_background {
-  min-height: 100vh;
-}
-
-.communityLogo {
-  object-fit: contain;
-}
-
-.row .left_portion {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.selectOrgText input {
-  outline: none !important;
-}
-
-.row .left_portion .inner .palisadoes_logo {
-  width: 600px;
-  height: auto;
-}
-
-.row .right_portion {
-  min-height: 100vh;
-  position: relative;
-  overflow-y: scroll;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 1rem 2.5rem;
-  background: var(--bs-white);
-}
-
-.row .right_portion::-webkit-scrollbar {
-  display: none;
-}
-
-.row .right_portion .langChangeBtn {
-  margin: 0;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-}
-
-.langChangeBtnStyle {
-  width: 7.5rem;
-  height: 2.2rem;
-  padding: 0;
-}
-
-.row .right_portion .talawa_logo {
-  height: 5rem;
-  width: 5rem;
-  display: block;
-  margin: 1.5rem auto 1rem;
-  -webkit-animation: zoomIn 0.3s ease-in-out;
-  animation: zoomIn 0.3s ease-in-out;
-}
-
-.row .orText {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: calc(50% - 2.6rem);
-  margin: 0 auto;
-  padding: 0.35rem 2rem;
-  z-index: 100;
-  background: var(--bs-white);
-  color: var(--bs-secondary);
-}
-
-.email_button {
-  position: absolute;
-  z-index: 10;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
-  justify-content: center;
-  align-items: center;
-}
-
-.login_btn {
-  background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
-  margin-top: 1rem;
-  /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */
-  margin-bottom: 1rem;
-  /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
-  width: 100%;
-}
-
-.reg_btn {
-  background-color: var(--dropdown-border-color);
-  border-color: var(--dropdown-border-color);
-  margin-top: 1rem;
-  color: white;
-  /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */
-  margin-bottom: 1rem;
-  /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
-  width: 100%;
-}
-
-@media (max-width: 992px) {
-  .row .left_portion {
-    padding: 0 2rem;
-  }
-
-  .row .left_portion .inner .palisadoes_logo {
-    width: 100%;
-  }
-}
-
-@media (max-width: 769px) {
-  .row {
-    flex-direction: column-reverse;
-  }
-
-  .row .right_portion,
-  .row .left_portion {
-    height: unset;
-  }
-
-  .row .right_portion {
-    min-height: 100vh;
-    overflow-y: unset;
-  }
-
-  .row .left_portion .inner {
-    display: flex;
-    justify-content: center;
-  }
-
-  .row .left_portion .inner .palisadoes_logo {
-    height: 70px;
-    width: unset;
-    position: absolute;
-    margin: 0.5rem;
-    top: 0;
-    right: 0;
-    z-index: 100;
-  }
-
-  .row .left_portion .inner p {
-    margin-bottom: 0;
-    padding: 1rem;
-  }
-
-  .socialIcons {
-    margin-bottom: 1rem;
-  }
-}
-
-@media (max-width: 577px) {
-  .row .right_portion {
-    padding: 1rem 1rem 0 1rem;
-  }
-
-  .row .right_portion .langChangeBtn {
-    position: absolute;
-    margin: 1rem;
-    left: 0;
-    top: 0;
-  }
-
-  .marginTopForReg {
-    margin-top: 4rem !important;
-  }
-
-  .row .right_portion .talawa_logo {
-    height: 120px;
-    margin: 0 auto 2rem auto;
-  }
-
-  .socialIcons {
-    margin-bottom: 1rem;
-  }
-}
-
-.active_tab {
-  -webkit-animation: fadeIn 0.3s ease-in-out;
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-@-webkit-keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(2rem);
-    transform: translateY(2rem);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(2rem);
-    transform: translateY(2rem);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-  }
-}
-
-.socialIcons {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-}
-
-.password_checks {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.password_check_element {
-  margin-top: -10px;
-}
-
-.password_check_element_top {
-  margin-top: 18px;
-}
-
-.password_check_element_bottom {
-  margin-bottom: -20px;
-}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index c68ecaceb0..bc22fd9615 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -30,7 +30,7 @@ import LoginPortalToggle from 'components/LoginPortalToggle/LoginPortalToggle';
 import { errorHandler } from 'utils/errorHandler';
 import useLocalStorage from 'utils/useLocalstorage';
 import { socialMediaLinks } from '../../constants';
-import styles from './LoginPage.module.css';
+import styles from 'style/app.module.css';
 import type { InterfaceQueryOrganizationListObject } from 'utils/interfaces';
 import { Autocomplete, TextField } from '@mui/material';
 import useSession from 'utils/useSession';
diff --git a/src/style/app.module.css b/src/style/app.module.css
index fc8a389145..4d4f24a747 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -600,6 +600,144 @@ hr {
   display: none;
 }
 
+.login_background {
+  min-height: 100vh;
+}
+
+.communityLogo {
+  object-fit: contain;
+}
+
+.row .left_portion {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.selectOrgText input {
+  outline: none !important;
+}
+
+.row .left_portion .inner .palisadoes_logo {
+  width: 600px;
+  height: auto;
+}
+
+.row .right_portion {
+  min-height: 100vh;
+  position: relative;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem 2.5rem;
+  background: var(--bs-white);
+}
+
+.row .right_portion::-webkit-scrollbar {
+  display: none;
+}
+
+.row .right_portion .langChangeBtn {
+  margin: 0;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
+
+.langChangeBtnStyle {
+  width: 7.5rem;
+  height: 2.2rem;
+  padding: 0;
+}
+
+.row .right_portion .talawa_logo {
+  height: 5rem;
+  width: 5rem;
+  display: block;
+  margin: 1.5rem auto 1rem;
+  -webkit-animation: zoomIn 0.3s ease-in-out;
+  animation: zoomIn 0.3s ease-in-out;
+}
+
+.row .orText {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: calc(50% - 2.6rem);
+  margin: 0 auto;
+  padding: 0.35rem 2rem;
+  z-index: 100;
+  background: var(--bs-white);
+  color: var(--bs-secondary);
+}
+
+.email_button {
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  justify-content: center;
+  align-items: center;
+}
+
+.login_btn {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  margin-top: 1rem;
+  /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */
+  margin-bottom: 1rem;
+  /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
+  width: 100%;
+}
+
+.reg_btn {
+  background-color: var(--dropdown-border-color);
+  border-color: var(--dropdown-border-color);
+  margin-top: 1rem;
+  color: white;
+  /* mt-3: Bootstrap margin spacing utility (3 = 1rem) */
+  margin-bottom: 1rem;
+  /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
+  width: 100%;
+}
+
+.active_tab {
+  -webkit-animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.socialIcons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.password_checks {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.password_check_element {
+  margin-top: -10px;
+}
+
+.password_check_element_top {
+  margin-top: 18px;
+}
+
+.password_check_element_bottom {
+  margin-bottom: -20px;
+}
+
 @media (min-width: 576px) {
   .settingsDropdown {
     display: none;
@@ -612,6 +750,16 @@ hr {
   }
 }
 
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+
+  .listBox .itemCard {
+    width: 100%;
+  }
+}
+
 @media (max-width: 1020px) {
   .btnsContainer {
     flex-direction: column;
@@ -636,16 +784,138 @@ hr {
   }
 }
 
-@media (max-width: 1120px) {
-  .contract {
-    padding-left: calc(250px + 2rem + 1.5rem);
+@media (max-width: 992px) {
+  .row .left_portion {
+    padding: 0 2rem;
   }
 
-  .listBox .itemCard {
+  .row .left_portion .inner .palisadoes_logo {
     width: 100%;
   }
 }
 
+@media (max-width: 769px) {
+  .row {
+    flex-direction: column-reverse;
+  }
+
+  .row .right_portion,
+  .row .left_portion {
+    height: unset;
+  }
+
+  .row .right_portion {
+    min-height: 100vh;
+    overflow-y: unset;
+  }
+
+  .row .left_portion .inner {
+    display: flex;
+    justify-content: center;
+  }
+
+  .row .left_portion .inner .palisadoes_logo {
+    height: 70px;
+    width: unset;
+    position: absolute;
+    margin: 0.5rem;
+    top: 0;
+    right: 0;
+    z-index: 100;
+  }
+
+  .row .left_portion .inner p {
+    margin-bottom: 0;
+    padding: 1rem;
+  }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 577px) {
+  .row .right_portion {
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .row .right_portion .langChangeBtn {
+    position: absolute;
+    margin: 1rem;
+    left: 0;
+    top: 0;
+  }
+
+  .marginTopForReg {
+    margin-top: 4rem !important;
+  }
+
+  .row .right_portion .talawa_logo {
+    height: 120px;
+    margin: 0 auto 2rem auto;
+  }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
+}
+
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+    transform: translateY(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+    transform: translateY(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
 @-webkit-keyframes load8 {
   0% {
     -webkit-transform: rotate(0deg);

From 13e7f5fd922f2a6911e82b323e3503afe0e2496e Mon Sep 17 00:00:00 2001
From: Devender Singh <devendersingh2k@gmail.com>
Date: Sat, 14 Dec 2024 02:59:03 +0530
Subject: [PATCH 2/3] made changes as per coderabbitAI suggestion

---
 src/style/app.module.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 4d4f24a747..1f5182399b 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -637,7 +637,16 @@ hr {
 }
 
 .row .right_portion::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+}
+
+.row .right_portion::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.row .right_portion::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
 }
 
 .row .right_portion .langChangeBtn {
@@ -860,6 +869,16 @@ hr {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .talawa_logo {
+    animation: none;
+  }
+
+  .active_tab {
+    animation: none;
+  }
+}
+
 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;

From 737c1325d510b47c5ea187202df10c5ba81ecec1 Mon Sep 17 00:00:00 2001
From: devender18 <devendersingh2k@gmail.com>
Date: Sat, 14 Dec 2024 04:06:39 +0530
Subject: [PATCH 3/3] fixes conflicts

---
 src/style/app.module.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 20e3d32b8a..8846246d63 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -704,6 +704,7 @@ hr {
   margin-bottom: 1rem;
   /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
   width: 100%;
+  transition: background-color 0.2s ease;
 }
 
 .reg_btn {
@@ -715,6 +716,18 @@ hr {
   margin-bottom: 1rem;
   /* mb-3: Bootstrap margin spacing utility (3 = 1rem) */
   width: 100%;
+  transition: background-color 0.2s ease;
+}
+
+.login_btn:focus,
+.reg_btn:focus {
+  outline: 2px solid var(--search-button-bg);
+  outline-offset: 2px;
+}
+
+.login_btn:active,
+.reg_btn:active {
+  transform: translateY(1px);
 }
 
 .active_tab {
@@ -733,18 +746,19 @@ hr {
   justify-content: space-between;
   align-items: flex-start;
   flex-direction: column;
+  gap: 0.5rem;
 }
 
 .password_check_element {
-  margin-top: -10px;
+  margin-top: 0;
 }
 
 .password_check_element_top {
-  margin-top: 18px;
+  margin-top: 1rem;
 }
 
 .password_check_element_bottom {
-  margin-bottom: -20px;
+  margin-bottom: 0;
 }
 
 @media (min-width: 576px) {