From 43f2c614f971e2b756ef3a19e6a29fa408ff42db Mon Sep 17 00:00:00 2001
From: Devender singh shekhawat <50149675+devender18@users.noreply.github.com>
Date: Fri, 27 Dec 2024 16:31:00 +0530
Subject: [PATCH] Refactor CSS in src/components/LeftDrawer (fixes #2899)
 (#2963)

---
 .../LeftDrawer/LeftDrawer.module.css          | 239 ------------------
 src/components/LeftDrawer/LeftDrawer.tsx      |   2 +-
 src/style/app.module.css                      | 239 ++++++++++++++++++
 3 files changed, 240 insertions(+), 240 deletions(-)
 delete mode 100644 src/components/LeftDrawer/LeftDrawer.module.css

diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
deleted file mode 100644
index 86948b9930..0000000000
--- a/src/components/LeftDrawer/LeftDrawer.module.css
+++ /dev/null
@@ -1,239 +0,0 @@
-.leftDrawer {
-  width: calc(300px + 2rem);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 1rem 0 1rem;
-  background-color: #f6f8fc;
-  transition: 0.5s;
-  font-family: var(--bs-leftDrawer-font-family);
-}
-
-.activeDrawer {
-  width: calc(300px + 2rem);
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  animation: comeToRightBigScreen 0.5s ease-in-out;
-}
-
-.inactiveDrawer {
-  position: fixed;
-  top: 0;
-  left: calc(-300px - 2rem);
-  bottom: 0;
-  animation: goToLeftBigScreen 0.5s ease-in-out;
-}
-
-.leftDrawer .talawaLogo {
-  width: 100%;
-  height: 65px;
-}
-
-.leftDrawer .talawaText {
-  font-size: 20px;
-  text-align: center;
-  font-weight: 500;
-}
-
-.leftDrawer .titleHeader {
-  margin: 2rem 0 1rem 0;
-  font-weight: 600;
-}
-
-.leftDrawer .optionList button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: start;
-  margin-bottom: 0.8rem;
-  border-radius: 16px;
-  outline: none;
-  border: none;
-}
-
-.leftDrawer .optionList button .iconWrapper {
-  width: 36px;
-}
-
-.leftDrawer .profileContainer {
-  border: none;
-  width: 100%;
-  padding: 2.1rem 0.5rem;
-  height: 52px;
-  display: flex;
-  align-items: center;
-  background-color: var(--bs-white);
-}
-
-.leftDrawer .profileContainer:focus {
-  outline: none;
-  background-color: var(--bs-gray-100);
-}
-
-.leftDrawer .imageContainer {
-  width: 68px;
-}
-
-.leftDrawer .profileContainer img {
-  height: 52px;
-  width: 52px;
-  border-radius: 50%;
-}
-
-.leftDrawer .profileContainer .profileText {
-  flex: 1;
-  text-align: start;
-}
-
-.leftDrawer .profileContainer .profileText .primaryText {
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.leftDrawer .profileContainer .profileText .secondaryText {
-  font-size: 0.8rem;
-  font-weight: 400;
-  color: var(--bs-secondary);
-  display: block;
-  text-transform: capitalize;
-}
-
-@media (max-width: 1120px) {
-  .leftDrawer {
-    width: calc(250px + 2rem);
-    padding: 1rem 1rem 0 1rem;
-  }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
-  .hideElemByDefault {
-    display: none;
-  }
-
-  .leftDrawer {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-
-  .inactiveDrawer {
-    opacity: 0;
-    left: 0;
-    z-index: -1;
-    animation: closeDrawer 0.4s ease-in-out;
-  }
-
-  .activeDrawer {
-    display: flex;
-    z-index: 100;
-    animation: openDrawer 0.6s ease-in-out;
-  }
-
-  .logout {
-    margin-bottom: 2.5rem !important;
-  }
-}
-
-@keyframes goToLeftBigScreen {
-  from {
-    left: 0;
-  }
-
-  to {
-    opacity: 0.1;
-    left: calc(-300px - 2rem);
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes goToLeftBigScreen {
-  from {
-    left: 0;
-  }
-
-  to {
-    opacity: 0.1;
-    left: calc(-300px - 2rem);
-  }
-}
-
-@keyframes comeToRightBigScreen {
-  from {
-    opacity: 0.4;
-    left: calc(-300px - 2rem);
-  }
-
-  to {
-    opacity: 1;
-    left: 0;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes comeToRightBigScreen {
-  from {
-    opacity: 0.4;
-    left: calc(-300px - 2rem);
-  }
-
-  to {
-    opacity: 1;
-    left: 0;
-  }
-}
-
-@keyframes closeDrawer {
-  from {
-    left: 0;
-    opacity: 1;
-  }
-
-  to {
-    left: -1000px;
-    opacity: 0;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes closeDrawer {
-  from {
-    left: 0;
-    opacity: 1;
-  }
-
-  to {
-    left: -1000px;
-    opacity: 0;
-  }
-}
-
-@keyframes openDrawer {
-  from {
-    opacity: 0;
-    left: -1000px;
-  }
-
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes openDrawer {
-  from {
-    opacity: 0;
-    left: -1000px;
-  }
-
-  to {
-    left: 0;
-    opacity: 1;
-  }
-}
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index c8c7d8486e..eabf9722f8 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -6,7 +6,7 @@ import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
 import RolesIcon from 'assets/svgs/roles.svg?react';
 import SettingsIcon from 'assets/svgs/settings.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
-import styles from './LeftDrawer.module.css';
+import styles from 'style/app.module.css';
 import useLocalStorage from 'utils/useLocalstorage';
 
 export interface InterfaceLeftDrawerProps {
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 89074d2825..448b80bd88 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3184,3 +3184,242 @@ button[data-testid='createPostBtn'] {
     margin-right: 8px;
   }
 }
+
+.leftDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0 1rem;
+  background-color: #f6f8fc;
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.activeDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: comeToRightBigScreen 0.5s ease-in-out;
+}
+
+.inactiveDrawer {
+  position: fixed;
+  top: 0;
+  left: calc(-300px - 2rem);
+  bottom: 0;
+  animation: goToLeftBigScreen 0.5s ease-in-out;
+}
+
+.leftDrawer .talawaLogo {
+  width: 100%;
+  height: 65px;
+}
+
+.leftDrawer .talawaText {
+  font-size: 20px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.leftDrawer .titleHeader {
+  margin: 2rem 0 1rem 0;
+  font-weight: 600;
+}
+
+.leftDrawer .optionList button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: start;
+  margin-bottom: 0.8rem;
+  border-radius: 16px;
+  outline: none;
+  border: none;
+}
+
+.leftDrawer .optionList button .iconWrapper {
+  width: 36px;
+}
+
+.leftDrawer .profileContainer {
+  border: none;
+  width: 100%;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  background-color: var(--bs-white);
+}
+
+.leftDrawer .profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+
+.leftDrawer .imageContainer {
+  width: 68px;
+}
+
+.leftDrawer .profileContainer img {
+  height: 52px;
+  width: 52px;
+  border-radius: 50%;
+}
+
+.leftDrawer .profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+}
+
+.leftDrawer .profileContainer .profileText .primaryText {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.leftDrawer .profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+@media (max-width: 1120px) {
+  .leftDrawer {
+    width: calc(250px + 2rem);
+    padding: 1rem 1rem 0 1rem;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .hideElemByDefault {
+    display: none;
+  }
+
+  .leftDrawer {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .inactiveDrawer {
+    opacity: 0;
+    left: 0;
+    z-index: -1;
+    animation: closeDrawer 0.4s ease-in-out;
+  }
+
+  .activeDrawer {
+    display: flex;
+    z-index: 100;
+    animation: openDrawer 0.6s ease-in-out;
+  }
+
+  .logout {
+    margin-bottom: 2.5rem !important;
+  }
+}
+
+@keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+@keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+@keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}