From 9755f36492d5da35856b35d19b1182f6dcf0de37 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sat, 28 Dec 2024 19:23:06 +0530
Subject: [PATCH 01/14] Refactored CSS for LeftDrawerOrg

---
 .../LeftDrawerOrg/LeftDrawerOrg.module.css    | 362 ------------------
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           |  47 +--
 src/style/app.module.css                      | 112 ++++++
 3 files changed, 124 insertions(+), 397 deletions(-)
 delete mode 100644 src/components/LeftDrawerOrg/LeftDrawerOrg.module.css

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
deleted file mode 100644
index 6296b1aa73..0000000000
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ /dev/null
@@ -1,362 +0,0 @@
-.leftDrawer {
-  width: calc(300px + 2rem);
-  min-height: 100%;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  padding: 0.8rem 0rem 0 1rem;
-  background-color: #f6f8fc;
-  transition: 0.5s;
-  font-family: var(--bs-leftDrawer-font-family);
-}
-
-.avatarContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 1rem 0;
-  width: 75%;
-  height: 75%;
-}
-
-.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 .brandingContainer {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.leftDrawer .organizationContainer button {
-  position: relative;
-  margin: 0.7rem 0;
-  padding: 2.5rem 0.1rem;
-  border-radius: 16px;
-}
-
-.leftDrawer .talawaLogo {
-  width: 50px;
-  height: 50px;
-  margin-right: 0.3rem;
-}
-
-.leftDrawer .talawaText {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.leftDrawer .titleHeader {
-  font-weight: 600;
-  margin: 0.6rem 0rem;
-}
-
-.leftDrawer .optionList {
-  height: 100%;
-  overflow-y: scroll;
-  padding-bottom: 1.5rem;
-}
-
-.leftDrawer .optionList button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: start;
-  margin-bottom: 0.8rem;
-  border-radius: 16px;
-  font-size: 16px;
-  padding: 0.6rem;
-  padding-left: 0.8rem;
-  outline: none;
-  border: none;
-}
-
-.leftDrawer button .iconWrapper {
-  width: 36px;
-}
-
-.leftDrawer .optionList .collapseBtn {
-  height: 48px;
-  border: none;
-}
-
-.leftDrawer button .iconWrapperSm {
-  width: 36px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.leftDrawer .organizationContainer .profileContainer {
-  background-color: #e0e9ff;
-  padding-right: 10px;
-}
-
-.leftDrawer .profileContainer {
-  border: none;
-  width: 100%;
-  height: 52px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  background-color: var(--bs-white);
-}
-
-.leftDrawer .profileContainer:focus {
-  outline: none;
-}
-
-.leftDrawer .imageContainer {
-  width: 68px;
-  margin-left: 0.75rem;
-  margin-right: 8px;
-}
-
-.leftDrawer .profileContainer img {
-  height: 52px;
-  width: 52px;
-  border-radius: 50%;
-}
-
-.leftDrawer .profileContainer .profileText {
-  flex: 1;
-  text-align: start;
-  overflow: hidden;
-}
-
-.leftDrawer .profileContainer .profileText .primaryText {
-  font-size: 1.1rem;
-  font-weight: 600;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /* number of lines to show */
-  -webkit-box-orient: vertical;
-  word-wrap: break-word;
-  white-space: normal;
-}
-
-.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 0rem 0 1rem;
-  }
-}
-
-/* For tablets */
-@media (max-height: 900px) {
-  .leftDrawer {
-    width: calc(300px + 1rem);
-  }
-  .leftDrawer .talawaLogo {
-    width: 38px;
-    height: 38px;
-    margin-right: 0.4rem;
-  }
-  .leftDrawer .talawaText {
-    font-size: 1rem;
-  }
-  .leftDrawer .organizationContainer button {
-    margin: 0.6rem 0;
-    padding: 2.2rem 0.1rem;
-  }
-  .leftDrawer .optionList button {
-    margin-bottom: 0.05rem;
-    font-size: 16px;
-    padding-left: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .primaryText {
-    font-size: 1rem;
-  }
-  .leftDrawer .profileContainer .profileText .secondaryText {
-    font-size: 0.8rem;
-  }
-}
-@media (max-height: 650px) {
-  .leftDrawer {
-    padding: 0.5rem 0rem 0 0.8rem;
-    width: calc(250px);
-  }
-  .leftDrawer .talawaText {
-    font-size: 0.8rem;
-  }
-  .leftDrawer .organizationContainer button {
-    margin: 0.2rem 0;
-    padding: 1.6rem 0rem;
-  }
-  .leftDrawer .titleHeader {
-    font-size: 16px;
-  }
-  .leftDrawer .optionList button {
-    margin-bottom: 0.05rem;
-    font-size: 14px;
-    padding: 0.4rem;
-    padding-left: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .primaryText {
-    font-size: 0.8rem;
-  }
-  .leftDrawer .profileContainer .profileText .secondaryText {
-    font-size: 0.6rem;
-  }
-  .leftDrawer .imageContainer {
-    width: 40px;
-    margin-left: 0.75rem;
-    margin-right: 12px;
-  }
-  .leftDrawer .imageContainer img {
-    width: 40px;
-    height: 100%;
-  }
-}
-
-@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.2s ease-in-out;
-  }
-
-  .activeDrawer {
-    display: flex;
-    z-index: 100;
-    animation: openDrawer 0.4s ease-in-out;
-  }
-
-  .logout {
-    margin-bottom: 2.5rem;
-  }
-}
-
-@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/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index a687351c98..302c0893f2 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -11,7 +11,7 @@ import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
-import styles from './LeftDrawerOrg.module.css';
+import styles from './../../style/app.module.css'; // Import the global CSS file
 import Avatar from 'components/Avatar/Avatar';
 import useLocalStorage from 'utils/useLocalstorage';
 
@@ -22,15 +22,6 @@ export interface InterfaceLeftDrawerProps {
   setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>;
 }
 
-/**
- * LeftDrawerOrg component for displaying organization details and navigation options.
- *
- * @param orgId - ID of the current organization.
- * @param targets - List of navigation targets.
- * @param hideDrawer - Determines if the drawer should be hidden or shown.
- * @param setHideDrawer - Function to update the visibility state of the drawer.
- * @returns JSX element for the left navigation drawer with organization details.
- */
 const leftDrawerOrg = ({
   targets,
   orgId,
@@ -45,7 +36,6 @@ const leftDrawerOrg = ({
   const getIdFromPath = (pathname: string): string => {
     if (!pathname) return '';
     const segments = pathname.split('/');
-    // Index 2 (third segment) represents the ID in paths like /member/{userId}
     return segments.length > 2 ? segments[2] : '';
   };
   const [isProfilePage, setIsProfilePage] = useState(false);
@@ -65,18 +55,15 @@ const leftDrawerOrg = ({
     variables: { id: orgId },
   });
 
-  // Get the ID from the current path
   const pathId = useMemo(
     () => getIdFromPath(location.pathname),
     [location.pathname],
   );
-  // Check if the current page is admin profile page
+
   useEffect(() => {
-    // if param id is equal to userId, then it is a profile page
     setIsProfilePage(pathId === userId);
   }, [location, userId]);
 
-  // Set organization data when query data is available
   useEffect(() => {
     let isMounted = true;
     if (data && isMounted) {
@@ -89,9 +76,6 @@ const leftDrawerOrg = ({
     };
   }, [data]);
 
-  /**
-   * Handles link click to hide the drawer on smaller screens.
-   */
   const handleLinkClick = (): void => {
     if (window.innerWidth <= 820) {
       setHideDrawer(true);
@@ -121,16 +105,14 @@ const leftDrawerOrg = ({
         {/* Organization Section */}
         <div className={`${styles.organizationContainer} pe-3`}>
           {loading ? (
-            <>
-              <button
-                className={`${styles.profileContainer} shimmer`}
-                data-testid="orgBtn"
-              />
-            </>
+            <button
+              className={`${styles.profileContainer} shimmer`}
+              data-testid="orgBtn"
+            />
           ) : organization == undefined ? (
             !isProfilePage && (
               <button
-                className={`${styles.profileContainer} bg-danger text-start text-white`}
+                className={`${styles.profileContainer} ${styles.bgDanger} text-start text-white`}
                 disabled
               >
                 <div className="px-3">
@@ -174,21 +156,16 @@ const leftDrawerOrg = ({
                 {({ isActive }) => (
                   <Button
                     key={name}
-                    variant={isActive === true ? 'success' : ''}
-                    style={{
-                      backgroundColor: isActive === true ? '#EAEBEF' : '',
-                    }}
-                    className={`${
-                      isActive === true ? 'text-black' : 'text-secondary'
-                    }`}
+                    variant={isActive ? 'success' : ''}
+                    className={
+                      isActive ? styles.activeButton : styles.inactiveButton
+                    }
                   >
                     <div className={styles.iconWrapper}>
                       <IconComponent
                         name={name == 'Membership Requests' ? 'Requests' : name}
                         fill={
-                          isActive === true
-                            ? 'var(--bs-black)'
-                            : 'var(--bs-secondary)'
+                          isActive ? 'var(--bs-black)' : 'var(--bs-secondary)'
                         }
                       />
                     </div>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 9480b80d20..e951371a3b 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3481,3 +3481,115 @@ button[data-testid='createPostBtn'] {
     opacity: 1;
   }
 }
+/* LeftDrawer general styles */
+.leftDrawer {
+  /* Add the necessary styles for the drawer container */
+  transition: transform 0.3s ease;
+}
+
+.hideElemByDefault {
+  display: none;
+}
+
+.inactiveDrawer {
+  transform: translateX(-100%);
+}
+
+.activeDrawer {
+  transform: translateX(0);
+}
+
+/* Branding Section */
+.brandingContainer {
+  /* Style for the branding container */
+}
+
+.talawaLogo {
+  /* Styling for the logo */
+}
+
+.talawaText {
+  /* Styling for the Talawa text */
+}
+
+/* Organization Section */
+.organizationContainer {
+  padding-right: 3rem;
+}
+
+.profileContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.shimmer {
+  /* Add shimmer animation styles */
+}
+
+.bg-danger {
+  background-color: red; /* Example, make sure this matches the desired red */
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-white {
+  color: white;
+}
+
+.imageContainer img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.profileText {
+  margin-left: 1rem;
+}
+
+.primaryText {
+  font-weight: bold;
+}
+
+.secondaryText {
+  font-size: 0.9rem;
+  color: gray;
+}
+
+/* Dropdown and options list */
+.optionList {
+  /* Add necessary styles */
+}
+
+.titleHeader {
+  font-size: 1.2rem;
+  color: var(--bs-secondary);
+}
+
+/* Button specific styles */
+.activeButton {
+  background-color: #eaebef;
+  color: black;
+}
+
+.inactiveButton {
+  background-color: transparent;
+  color: var(--bs-secondary);
+}
+
+.text-black {
+  color: black;
+}
+
+.text-secondary {
+  color: var(--bs-secondary);
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}

From 8e92e6852ddd007c9d0540bc24bb35fdc96d2112 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sat, 28 Dec 2024 19:55:18 +0530
Subject: [PATCH 02/14] Updated Changes In Refactored CSS in LeftDrawerOrg

---
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index 302c0893f2..d831d01aab 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -22,6 +22,16 @@ export interface InterfaceLeftDrawerProps {
   setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>;
 }
 
+/**
+ * LeftDrawerOrg component for displaying organization details and navigation options.
+ *
+ * @param orgId - ID of the current organization.
+ * @param targets - List of navigation targets.
+ * @param hideDrawer - Determines if the drawer should be hidden or shown.
+ * @param setHideDrawer - Function to update the visibility state of the drawer.
+ * @returns JSX element for the left navigation drawer with organization details.
+ */
+
 const leftDrawerOrg = ({
   targets,
   orgId,
@@ -36,6 +46,9 @@ const leftDrawerOrg = ({
   const getIdFromPath = (pathname: string): string => {
     if (!pathname) return '';
     const segments = pathname.split('/');
+
+    // Index 2 (third segment) represents the ID in paths like /member/{userId}
+
     return segments.length > 2 ? segments[2] : '';
   };
   const [isProfilePage, setIsProfilePage] = useState(false);
@@ -55,15 +68,20 @@ const leftDrawerOrg = ({
     variables: { id: orgId },
   });
 
+    // Get the ID from the current path
+
   const pathId = useMemo(
     () => getIdFromPath(location.pathname),
     [location.pathname],
   );
+    // Check if the current page is admin profile page
 
   useEffect(() => {
+    // if param id is equal to userId, then it is a profile page
     setIsProfilePage(pathId === userId);
   }, [location, userId]);
 
+  // Set organization data when query data is available
   useEffect(() => {
     let isMounted = true;
     if (data && isMounted) {
@@ -75,7 +93,9 @@ const leftDrawerOrg = ({
       isMounted = false;
     };
   }, [data]);
-
+  /**
+   * Handles link click to hide the drawer on smaller screens.
+   */
   const handleLinkClick = (): void => {
     if (window.innerWidth <= 820) {
       setHideDrawer(true);

From c5f3cc725fc6bcbd149dee5254a804a4ab2e18f5 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sat, 28 Dec 2024 19:58:33 +0530
Subject: [PATCH 03/14] Refactored CSS in LeftDrawerOrg

---
 src/components/LeftDrawerOrg/LeftDrawerOrg.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index d831d01aab..35173a930e 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -68,13 +68,13 @@ const leftDrawerOrg = ({
     variables: { id: orgId },
   });
 
-    // Get the ID from the current path
+  // Get the ID from the current path
 
   const pathId = useMemo(
     () => getIdFromPath(location.pathname),
     [location.pathname],
   );
-    // Check if the current page is admin profile page
+  // Check if the current page is admin profile page
 
   useEffect(() => {
     // if param id is equal to userId, then it is a profile page

From 38fedeac91885857f9b66b86f83bc5f5e1234d66 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 00:49:30 +0530
Subject: [PATCH 04/14] Refactored CSS for LeftDrawerOrg

---
 src/style/app.module.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index e951371a3b..07ff61342b 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -6,7 +6,7 @@
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
   --modal-width: 670px;
-  --modal-max-width: 680px;
+  --modal-max-width: 680px;background-color: #f6f8fc; 
   --input-shadow-color: #dddddd;
   --delete-button-bg: #f8d6dc;
   --delete-button-color: #ff4d4f;
@@ -3483,8 +3483,11 @@ button[data-testid='createPostBtn'] {
 }
 /* LeftDrawer general styles */
 .leftDrawer {
-  /* Add the necessary styles for the drawer container */
+  height: 100vh; /* Ensure it spans the full height */
+  overflow-y: auto; /* Enable vertical scrolling */
   transition: transform 0.3s ease;
+  position: fixed; /* Ensure it's positioned properly */
+  padding-bottom: 1rem; /* Prevent last item clipping */
 }
 
 .hideElemByDefault {
@@ -3529,7 +3532,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .bg-danger {
-  background-color: red; /* Example, make sure this matches the desired red */
+  background-color: var(--delete-button-color); 
 }
 
 .text-start {
@@ -3537,7 +3540,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .text-white {
-  color: white;
+  color: var(--bs-white);
 }
 
 .imageContainer img {
@@ -3556,7 +3559,7 @@ button[data-testid='createPostBtn'] {
 
 .secondaryText {
   font-size: 0.9rem;
-  color: gray;
+  color: var(--grey-bg-color);
 }
 
 /* Dropdown and options list */
@@ -3571,7 +3574,7 @@ button[data-testid='createPostBtn'] {
 
 /* Button specific styles */
 .activeButton {
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);  /* Changed from #eaebef */
   color: black;
 }
 

From 5377445122bebf25d62a71ff626b4f2c9e9ec1ed Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 00:52:54 +0530
Subject: [PATCH 05/14] Refactored CSS for LeftDrawerOrg

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

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 07ff61342b..eb88941440 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -6,7 +6,8 @@
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
   --modal-width: 670px;
-  --modal-max-width: 680px;background-color: #f6f8fc; 
+  --modal-max-width: 680px;
+  background-color: #f6f8fc;
   --input-shadow-color: #dddddd;
   --delete-button-bg: #f8d6dc;
   --delete-button-color: #ff4d4f;
@@ -3532,7 +3533,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .bg-danger {
-  background-color: var(--delete-button-color); 
+  background-color: var(--delete-button-color);
 }
 
 .text-start {
@@ -3574,7 +3575,7 @@ button[data-testid='createPostBtn'] {
 
 /* Button specific styles */
 .activeButton {
-  background-color: var(--grey-bg-color);  /* Changed from #eaebef */
+  background-color: var(--grey-bg-color); /* Changed from #eaebef */
   color: black;
 }
 

From e13a67fc42c003a327d85a41aca01f5aeb23eab3 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 17:26:04 +0530
Subject: [PATCH 06/14] Refactored Changes Suggested

---
 src/style/app.module.css | 66 ++++++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 0c03af0f2a..996208f59e 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -17,6 +17,7 @@
   --table-image-small-size: 25px;
   --bs-primary: #0056b3;
   --bs-white: #fff;
+  --bs-dark: #343a40;
   --toggle-button-bg: #1e4e8c;
   --table-head-bg: var(
     --bs-primary,
@@ -3779,19 +3780,6 @@ button[data-testid='createPostBtn'] {
   transform: translateX(0);
 }
 
-/* Branding Section */
-.brandingContainer {
-  /* Style for the branding container */
-}
-
-.talawaLogo {
-  /* Styling for the logo */
-}
-
-.talawaText {
-  /* Styling for the Talawa text */
-}
-
 /* Organization Section */
 .organizationContainer {
   padding-right: 3rem;
@@ -3804,10 +3792,6 @@ button[data-testid='createPostBtn'] {
   width: 100%;
 }
 
-.shimmer {
-  /* Add shimmer animation styles */
-}
-
 .bg-danger {
   background-color: var(--delete-button-color);
 }
@@ -3840,9 +3824,6 @@ button[data-testid='createPostBtn'] {
 }
 
 /* Dropdown and options list */
-.optionList {
-  /* Add necessary styles */
-}
 
 .titleHeader {
   font-size: 1.2rem;
@@ -3851,13 +3832,34 @@ button[data-testid='createPostBtn'] {
 
 /* Button specific styles */
 .activeButton {
-  background-color: var(--grey-bg-color); /* Changed from #eaebef */
+  background-color: var(--grey-bg-color);
   color: black;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--bs-primary);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
 }
 
 .inactiveButton {
   background-color: transparent;
-  color: var(--bs-secondary);
+  color: var(--bs-emphasis-color, #000);
+  &:hover {
+    background-color: var(--grey-bg-color);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
 }
 
 .text-black {
@@ -3872,4 +3874,24 @@ button[data-testid='createPostBtn'] {
   display: flex;
   align-items: center;
   margin-right: 8px;
+  /* Add tooltip for icon-only buttons */
+  &[aria-label]:not([aria-label='']) {
+    position: relative;
+    &::after {
+      content: attr(aria-label);
+      position: absolute;
+      left: 100%;
+      background: var(--bs-dark);
+      color: var(--bs-white);
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      opacity: 0;
+      visibility: hidden;
+    }
+    &:hover::after {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }

From addb0633321d0ee0345400e8d876340a90757679 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 17:30:58 +0530
Subject: [PATCH 07/14] Refactored CSS with uggested Changes

---
 src/style/app.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index c520c55f6b..2f29cf6ba3 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -4053,7 +4053,6 @@ button[data-testid='createPostBtn'] {
   height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
-
 }
 
 /* LeftDrawer general styles */
@@ -4191,4 +4190,4 @@ button[data-testid='createPostBtn'] {
       visibility: visible;
     }
   }
-}
\ No newline at end of file
+}

From fb2b699e6a9dfa6790da0b9001ad6b52ba5153fd Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 18:02:54 +0530
Subject: [PATCH 08/14] Refactored CSS Changes

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

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 2f29cf6ba3..0e5330fae7 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -18,6 +18,7 @@
   --bs-primary: #0056b3;
   --bs-white: #fff;
   --bs-dark: #343a40;
+  --bs-secondary-text: #6c757d;
   --toggle-button-bg: #1e4e8c;
   --table-head-bg: var(
     --bs-primary,
@@ -4086,6 +4087,11 @@ button[data-testid='createPostBtn'] {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  /* Add focus styles for keyboard navigation */
+  &:focus-within {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
 }
 
 .bg-danger {
@@ -4104,6 +4110,11 @@ button[data-testid='createPostBtn'] {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  /* Add alt text styles */
+  &[alt] {
+    font-size: 0.875rem;
+    color: var(--bs-emphasis-color);
+  }
 }
 
 .profileText {
@@ -4112,11 +4123,14 @@ button[data-testid='createPostBtn'] {
 
 .primaryText {
   font-weight: bold;
+  /* Ensure sufficient color contrast */
+  color: var(--bs-emphasis-color, #000);
 }
 
 .secondaryText {
   font-size: 0.9rem;
-  color: var(--grey-bg-color);
+  /* Use semantic color with better contrast */
+  color: var(--bs-secondary-text);
 }
 
 /* Dropdown and options list */

From dafdbe920db5883d3bbc16ab043a5e84080a9bf0 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Sun, 29 Dec 2024 19:56:50 +0530
Subject: [PATCH 09/14] Removed Duplicacy from LeftDrawerOrg

---
 src/style/app.module.css | 307 ++++++++++++++++++++-------------------
 1 file changed, 157 insertions(+), 150 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 0e5330fae7..66203f541e 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3565,6 +3565,163 @@ button[data-testid='createPostBtn'] {
   }
 }
 
+/* LeftDrawer general styles */
+.leftDrawer {
+  height: 100vh; /* Ensure it spans the full height */
+  overflow-y: auto; /* Enable vertical scrolling */
+  transition: transform 0.3s ease;
+  position: fixed; /* Ensure it's positioned properly */
+  padding-bottom: 1rem; /* Prevent last item clipping */
+}
+
+.hideElemByDefault {
+  display: none;
+}
+
+.inactiveDrawer {
+  transform: translateX(-100%);
+}
+
+.activeDrawer {
+  transform: translateX(0);
+}
+
+/* Organization Section */
+.organizationContainer {
+  padding-right: 3rem;
+}
+
+.profileContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  /* Add focus styles for keyboard navigation */
+  &:focus-within {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
+}
+
+.bg-danger {
+  background-color: var(--delete-button-color);
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-white {
+  color: var(--bs-white);
+}
+
+.imageContainer img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  /* Add alt text styles */
+  &[alt] {
+    font-size: 0.875rem;
+    color: var(--bs-emphasis-color);
+  }
+}
+
+.profileText {
+  margin-left: 1rem;
+}
+
+.primaryText {
+  font-weight: bold;
+  /* Ensure sufficient color contrast */
+  color: var(--bs-emphasis-color, #000);
+}
+
+.secondaryText {
+  font-size: 0.9rem;
+  /* Use semantic color with better contrast */
+  color: var(--bs-secondary-text);
+}
+
+/* Dropdown and options list */
+
+.titleHeader {
+  font-size: 1.2rem;
+  color: var(--bs-secondary);
+}
+
+/* Button specific styles */
+.activeButton {
+  background-color: var(--grey-bg-color);
+  color: black;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--bs-primary);
+  }
+}
+
+.inactiveButton {
+  background-color: transparent;
+  color: var(--bs-emphasis-color, #000);
+  &:hover {
+    background-color: var(--grey-bg-color);
+  }
+}
+
+/* Common focus-visible styles */
+.focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+/* Applying the focus-visible class to both buttons */
+.activeButton,
+.inactiveButton {
+  &.focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
+}
+
+.text-black {
+  color: black;
+}
+
+.text-secondary {
+  color: var(--bs-secondary);
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  /* Add tooltip for icon-only buttons */
+  &[aria-label]:not([aria-label='']) {
+    position: relative;
+    &::after {
+      content: attr(aria-label);
+      position: absolute;
+      left: 100%;
+      background: var(--bs-dark);
+      color: var(--bs-white);
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      opacity: 0;
+      visibility: hidden;
+    }
+    &:hover::after {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
 /* CustomRecurrenceModal.tsx */
 
 .titlemodalCustomRecurrenceModal {
@@ -4055,153 +4212,3 @@ button[data-testid='createPostBtn'] {
   overflow-y: scroll;
   overflow-x: hidden;
 }
-
-/* LeftDrawer general styles */
-.leftDrawer {
-  height: 100vh; /* Ensure it spans the full height */
-  overflow-y: auto; /* Enable vertical scrolling */
-  transition: transform 0.3s ease;
-  position: fixed; /* Ensure it's positioned properly */
-  padding-bottom: 1rem; /* Prevent last item clipping */
-}
-
-.hideElemByDefault {
-  display: none;
-}
-
-.inactiveDrawer {
-  transform: translateX(-100%);
-}
-
-.activeDrawer {
-  transform: translateX(0);
-}
-
-/* Organization Section */
-.organizationContainer {
-  padding-right: 3rem;
-}
-
-.profileContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  /* Add focus styles for keyboard navigation */
-  &:focus-within {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: 2px;
-  }
-}
-
-.bg-danger {
-  background-color: var(--delete-button-color);
-}
-
-.text-start {
-  text-align: start;
-}
-
-.text-white {
-  color: var(--bs-white);
-}
-
-.imageContainer img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  /* Add alt text styles */
-  &[alt] {
-    font-size: 0.875rem;
-    color: var(--bs-emphasis-color);
-  }
-}
-
-.profileText {
-  margin-left: 1rem;
-}
-
-.primaryText {
-  font-weight: bold;
-  /* Ensure sufficient color contrast */
-  color: var(--bs-emphasis-color, #000);
-}
-
-.secondaryText {
-  font-size: 0.9rem;
-  /* Use semantic color with better contrast */
-  color: var(--bs-secondary-text);
-}
-
-/* Dropdown and options list */
-
-.titleHeader {
-  font-size: 1.2rem;
-  color: var(--bs-secondary);
-}
-
-/* Button specific styles */
-.activeButton {
-  background-color: var(--grey-bg-color);
-  color: black;
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background-color: var(--bs-primary);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: 2px;
-  }
-}
-
-.inactiveButton {
-  background-color: transparent;
-  color: var(--bs-emphasis-color, #000);
-  &:hover {
-    background-color: var(--grey-bg-color);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: 2px;
-  }
-}
-
-.text-black {
-  color: black;
-}
-
-.text-secondary {
-  color: var(--bs-secondary);
-}
-
-.iconWrapper {
-  display: flex;
-  align-items: center;
-  margin-right: 8px;
-  /* Add tooltip for icon-only buttons */
-  &[aria-label]:not([aria-label='']) {
-    position: relative;
-    &::after {
-      content: attr(aria-label);
-      position: absolute;
-      left: 100%;
-      background: var(--bs-dark);
-      color: var(--bs-white);
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-      font-size: 0.875rem;
-      opacity: 0;
-      visibility: hidden;
-    }
-    &:hover::after {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}

From f879395ece22c35bf0c010e9655c34bce79986c8 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Mon, 30 Dec 2024 16:25:09 +0530
Subject: [PATCH 10/14] Refactored Suggested Changes

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

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 66203f541e..8abff053c4 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3665,6 +3665,7 @@ button[data-testid='createPostBtn'] {
   }
 }
 
+/* Common hover styles */
 .inactiveButton {
   background-color: transparent;
   color: var(--bs-emphasis-color, #000);
@@ -3674,6 +3675,7 @@ button[data-testid='createPostBtn'] {
 }
 
 /* Common focus-visible styles */
+/* New addition */
 .focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;

From d2ecda3a0c35352fe0ba75c3e9b556184cf08a29 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Mon, 30 Dec 2024 16:34:24 +0530
Subject: [PATCH 11/14] Refactored Suggested Changes

---
 src/style/app.module.css | 66 +++++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 778e9bda03..dafea54116 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3644,53 +3644,66 @@ button[data-testid='createPostBtn'] {
 }
 
 /* Dropdown and options list */
-
 .titleHeader {
   font-size: 1.2rem;
   color: var(--bs-secondary);
 }
 
-/* Button specific styles */
+/* Common focus-visible styles (NEW) */
+.focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+/* Reusable indicator styles (NEW) */
+.indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--bs-primary);
+}
+
+.arrow-indicator {
+  content: '▶'; /* Arrow symbol */
+  position: absolute;
+  right: 1rem; /* Distance from the right */
+  top: 50%; /* Vertically center the arrow */
+  transform: translateY(-50%); /* Adjust for perfect centering */
+  font-size: 0.8rem; /* Set arrow size */
+}
+
+/* Active Button */
 .activeButton {
   background-color: var(--grey-bg-color);
   color: black;
   position: relative;
+
+  /* Apply left border indicator */
   &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background-color: var(--bs-primary);
+    @extend .indicator;
+  }
+
+  /* Apply arrow indicator */
+  &::after {
+    @extend .arrow-indicator;
   }
 }
 
-/* Common hover styles */
+/* Inactive Button */
 .inactiveButton {
   background-color: transparent;
   color: var(--bs-emphasis-color, #000);
   &:hover {
     background-color: var(--grey-bg-color);
   }
-}
-
-/* Common focus-visible styles */
-/* New addition */
-.focus-visible {
-  outline: 2px solid var(--bs-primary);
-  outline-offset: 2px;
-}
-
-/* Applying the focus-visible class to both buttons */
-.activeButton,
-.inactiveButton {
+  /* Apply focus-visible class */
   &.focus-visible {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: 2px;
+    @extend .focus-visible;
   }
 }
 
+/* Text styles */
 .text-black {
   color: black;
 }
@@ -3699,6 +3712,7 @@ button[data-testid='createPostBtn'] {
   color: var(--bs-secondary);
 }
 
+/* Icon wrapper styles */
 .iconWrapper {
   display: flex;
   align-items: center;
@@ -3717,10 +3731,14 @@ button[data-testid='createPostBtn'] {
       font-size: 0.875rem;
       opacity: 0;
       visibility: hidden;
+      /* Improve tooltip positioning */
+      transform: translateX(8px);
+      transition: all 0.2s ease;
     }
     &:hover::after {
       opacity: 1;
       visibility: visible;
+      transform: translateX(0);
     }
   }
 }

From bb4f645e6c6e4014f39dfdd90344682110a78485 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Mon, 30 Dec 2024 16:39:40 +0530
Subject: [PATCH 12/14] Refactored CSS with suggested Changes

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

diff --git a/src/style/app.module.css b/src/style/app.module.css
index dafea54116..fd756e66f0 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -37,7 +37,6 @@
   --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;
-  --primary-border-solid: 1px solid var(--dropdown-border-color);
 }
 .fonts {
   color: #707070;

From 6d66b230e969236cff4d1077a7fe691ce3f9eb8a Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Tue, 31 Dec 2024 14:55:30 +0530
Subject: [PATCH 13/14] Refactored Changes suggested By CodeRabbit.ai

---
 src/style/app.module.css | 536 +++++++++++++++++++++++++--------------
 1 file changed, 342 insertions(+), 194 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index fd756e66f0..1871e0efe6 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1,45 +1,107 @@
 :root {
+  /* Neutral Colors */
+  --grey-light: #eaebef;
+  --grey-dark: #707070;
+  --grey-border: #e8e5e5;
+  --input-shadow: #dddddd;
+
+  /* Blue Shades */
+  --blue-primary: #0056b3;
+  --blue-subtle: #7c9beb;
+  --blue-subtle-hover: #5f7e91;
+  --blue-search-bg: #a8c7fa;
+  --toggle-bg: #1e4e8c;
+  --dropdown-hover: #eff1f7;
+
+  /* Red Shades */
+  --red-delete-bg: #f8d6dc;
+  --red-delete-text: #ff4d4f;
+
+  /* Yellow/Orange Shades */
+  --loader-color: #febc59;
+
+  /* Miscellaneous */
   --brown-color: #555555;
+  --blue-color: #0000ff;
+  --light-blue-color: #286fe0;
+  --dimp-white: #b5b5b5;
+  --gray-blue: #1e293b;
+  --gray-white: #808080;
   --dropdown-hover-color: #eff1f7;
   --grey-bg-color: #eaebef;
+  --light-dark-green: #08780b;
+  --light-green: #31bb6b;
+  --green-color: #21d015;
+  --light-more-green: #39a440;
+  --off-light-green: #31bb6a60;
+  --dark-emerald-green: #23864c;
+  --light-neon-green: #afffe8;
+  --white-color: #ffffff;
+  --off-white-color: #ffffff97;
+  --black-color: #000000;
+  --black-shadow-color: #00000029;
+  --white-shadow-color: #ffffff33;
+  --light-dark-gray-color: #505050;
+  --light-orange: #febc59;
   --grey-border-box-color: #e8e5e5;
   --subtle-blue-grey: #7c9beb;
   --subtle-blue-grey-hover: #5f7e91;
+  --white: #fff;
+  --black: black;
+
+  /* Background and Border */
+  --table-bg: #eaebef;
+  --tablerow-bg: #eff1f7;
+  --date-picker-bg: #f2f2f2;
+  --table-bg-color: var(--grey-bg-color);
+  --tablerow-bg-color: var(--dropdown-hover-color);
+  --row-background: var(--bs-white, var(--bs-white));
+
+  /* Font Sizes */
+  --font-size-header: 16px;
+
+  /* Borders and Radius */
+  --primary-border-solid: 1px solid var(--dropdown-border-color);
+  --table-head-radius: 20px;
+
+  /* Loader Sizes */
+  --loader-size: 10em;
+  --loader-border-width: 1.1em;
+
+  /* Image Sizes */
+  --table-image-size: 50px;
+  --table-image-small-size: 25px;
+
+  /* Modal Dimensions */
   --modal-width: 670px;
   --modal-max-width: 680px;
   background-color: #f6f8fc;
+
+  /* Additional Variables */
   --input-shadow-color: #dddddd;
   --delete-button-bg: #f8d6dc;
   --delete-button-color: #ff4d4f;
   --search-button-bg: #a8c7fa;
-  --search-button-border: #555555;
-  --table-image-size: 50px;
-  --table-image-small-size: 25px;
+  --search-button-border: var(--brown-color);
   --bs-primary: #0056b3;
   --bs-white: #fff;
   --bs-dark: #343a40;
   --bs-secondary-text: #6c757d;
+  --bs-gray-600: #4b5563;
+  --bs-gray-400: #9ca3af;
+  --bs-gray-300: #d1d5db;
   --toggle-button-bg: #1e4e8c;
-  --table-head-bg: var(
-    --bs-primary,
-    blue
-  ); /* Assuming var(--bs-primary) is defined elsewhere */
-  --loader-size: 10em;
-  --loader-border-width: 1.1em;
-  --loader-color: #febc59;
-  --table-head-color: white;
-  --table-header-color: var(--bs-greyish-black, black);
-  --table-head-radius: 20px;
-  --table-bg-color: #eaebef;
-  --tablerow-bg-color: #eff1f7;
-  --row-background: var(--bs-white, white);
-  --font-size-header: 16px;
+  --table-head-bg: var(--bs-primary, var(--blue-color));
+  --table-head-color: var(--bs-white, var(--white-color));
+  --table-header-color: var(--bs-greyish-black, var(--black-color));
   --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;
+  --dropdown-border-color: #cccccc;
+  --primary-border-solid: 1px solid var(--dropdown-border-color);
 }
 .fonts {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .fonts > span {
@@ -81,7 +143,7 @@
 
 .capacityLabel {
   background-color: var(--bs-primary);
-  color: white;
+  color: var(--white-color);
   height: 22.19px;
   font-size: 12px;
   font-weight: bolder;
@@ -102,7 +164,7 @@
   height: 100%;
 }
 .sidebar:after {
-  background-color: #f7f7f7;
+  background-color: var(--grey-border-box-color);
   position: absolute;
   width: 2px;
   height: 600px;
@@ -119,22 +181,22 @@
 }
 
 .logintitle {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
+  border-bottom: 3px solid var(--light-green);
   width: 15%;
 }
 
 .searchtitle {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 18px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
+  border-bottom: 3px solid var(--light-green);
   width: 60%;
 }
 
@@ -219,7 +281,7 @@
 }
 
 .dropdown:is(:focus, :focus-visible) {
-  outline: 2px solid var(--highlight-color, #a8c7fa);
+  outline: 2px solid var(--highlight-color, var(--search-button-bg));
 }
 
 .dropdownItem {
@@ -230,16 +292,19 @@
 
 .dropdownItem:focus,
 .dropdownItem:hover {
-  outline: 2px solid var(--highlight-color, #a8c7fa);
+  outline: 2px solid var(--highlight-color, var(--search-button-bg));
 }
 
 .dropdownItem:hover,
 .dropdownItem:focus,
 .dropdownItem:active {
-  background-color: var(--dropdown-hover-color, #e0e0e0) !important;
+  background-color: var(
+    --dropdown-hover-color,
+    var(--grey-border-box-color)
+  ) !important;
   color: var(--brown-color) !important;
   outline: none !important;
-  box-shadow: 0 0 4px var(--highlight-color, #a8c7fa);
+  box-shadow: 0 0 4px var(--highlight-color, var(--search-button-bg));
 }
 
 .input {
@@ -314,7 +379,7 @@
 
 .createButton {
   background-color: var(--grey-bg-color) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   margin-top: 10px;
   margin-left: 5px;
   border: 1px solid var(--brown-color);
@@ -322,7 +387,7 @@
 
 .createButton:hover {
   background-color: var(--grey-bg-color) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   border: 1px solid var(--brown-color) !important;
 }
 
@@ -369,7 +434,7 @@
 }
 
 .searchButton:hover {
-  background-color: var(--search-button-hover-bg, #286fe0);
+  background-color: var(--search-button-hover-bg, var(--light-blue-color));
   border-color: var(--search-button-border);
 }
 
@@ -384,7 +449,7 @@
 }
 
 .addButton:hover {
-  background-color: #286fe0;
+  background-color: var(--light-blue-color);
   border-color: var(--search-button-border);
 }
 
@@ -406,7 +471,7 @@
 }
 
 .infoButton:hover {
-  background-color: #286fe0;
+  background-color: var(--light-blue-color);
   border-color: var(--search-button-border);
 }
 
@@ -444,7 +509,7 @@
 
 .errorIcon {
   transform: scale(1.5);
-  color: var(--bs-danger);
+  color: var(--bs-danger, var(--delete-button-color));
   margin-bottom: 1rem;
   /* Add error icon for non-color indication */
   &::before {
@@ -464,7 +529,7 @@
   font-size: 16px;
   letter-spacing: 0;
   line-height: 1;
-  color: #08780b;
+  color: var(--light-dark-green);
 }
 
 .subTagsLink i {
@@ -491,7 +556,7 @@
 }
 
 .tagsBreadCrumbs:hover {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 600;
   text-decoration: underline;
 }
@@ -510,7 +575,7 @@ input[type='checkbox']:checked + label {
 }
 
 input[type='radio']:checked + label:hover {
-  color: black !important;
+  color: var(--black-color) !important;
 }
 
 .actionItemsContainer {
@@ -570,7 +635,7 @@ hr {
   flex-direction: row;
   font-weight: 900;
   font-size: 16px;
-  color: rgb(80, 80, 80);
+  color: var(--light-dark-gray-color);
 }
 
 .rankings {
@@ -617,7 +682,7 @@ hr {
 .pageNotFound h1.head {
   font-size: 250px;
   font-weight: 900;
-  color: #31bb6b;
+  color: var(--light-green);
   letter-spacing: 25px;
   margin: 10px 0 0 0;
 }
@@ -697,7 +762,7 @@ hr {
 
 .inputFieldPledge {
   background-color: var(--bs-white);
-  box-shadow: 0 1px 1px #31bb6b;
+  box-shadow: 0 1px 1px var(--light-green);
 }
 
 .dropdownPledge {
@@ -750,9 +815,9 @@ hr {
   justify-content: space-between;
   margin: 1.5rem 0 0 0;
   padding: 1.25rem 2rem;
-  background-color: rgba(255, 255, 255, 0.591);
+  background-color: var(--off-white-color);
 
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  box-shadow: var(--black-shadow-color) 0px 1px 4px;
   border-radius: 0.5rem;
 }
 
@@ -765,7 +830,7 @@ hr {
 .titleContainer h3 {
   font-size: 1.75rem;
   font-weight: 750;
-  color: #5e5e5e;
+  color: var(--light-dark-gray-color);
   margin-top: 0.2rem;
 }
 
@@ -773,7 +838,7 @@ hr {
   font-size: 0.9rem;
   margin-left: 0.5rem;
   font-weight: lighter;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .raisedAmount {
@@ -782,7 +847,7 @@ hr {
   align-items: center;
   font-size: 1.25rem;
   font-weight: 750;
-  color: #5e5e5e;
+  color: var(--light-dark-gray-color);
 }
 
 .progressContainer {
@@ -836,7 +901,7 @@ hr {
   padding: 0.75rem;
   border: 1px solid #e2e8f0;
   background-color: var(--bs-white);
-  color: #1e293b;
+  color: var(--gray-blue);
   box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
   display: flex;
   flex-direction: column;
@@ -863,7 +928,7 @@ hr {
 }
 
 .toggleBtnPledge:hover {
-  color: #31bb6b !important;
+  color: var(--light-green) !important;
 }
 
 .card {
@@ -886,7 +951,7 @@ hr {
   font-weight: normal;
   padding-bottom: 0;
   font-size: 1rem;
-  color: black;
+  color: var(--black-color);
 }
 
 .cardBody {
@@ -910,7 +975,7 @@ hr {
 .eventDetailsBox {
   position: relative;
   box-sizing: border-box;
-  background: #ffffff;
+  background: var(--white-color);
   width: 66%;
   padding: 0.3rem;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
@@ -922,15 +987,15 @@ hr {
   padding: 20px;
   width: 100%;
   display: flex;
-  background-color: #ffffff;
+  background-color: var(--white-color);
   margin: 0 4px;
   justify-content: space-between;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 8px var(--black-shadow-color);
   align-items: center;
   border-radius: 20px;
 }
 .ctacards span {
-  color: rgb(181, 181, 181);
+  color: var(--dimp-white);
   font-size: small;
 }
 
@@ -954,13 +1019,13 @@ hr {
   color: var(--delete-button-color);
   margin-right: 5px;
   background-color: var(--delete-button-bg);
-  border: white;
+  border: var(--white-color);
 }
 
 .closeButtonOrganizationEvents:hover {
   color: var(--delete-button-bg) !important;
   background-color: var(--delete-button-color) !important;
-  border: white;
+  border: var(--white-color);
 }
 
 .datedivOrganizationEvents {
@@ -1003,7 +1068,7 @@ hr {
 
 .createButtonOrganizationEvents {
   background-color: var(--search-button-bg) !important;
-  color: black !important;
+  color: var(--black-color) !important;
   margin: 15px 0 0;
   padding: 10px 10px;
   border-radius: 5px;
@@ -1020,7 +1085,7 @@ hr {
 
 .createButtonOrganizationEvents:hover {
   background-color: var(--bs-primary) !important;
-  color: white !important;
+  color: var(--white-color) !important;
   border: 1px solid var(--search-button-border) !important;
 }
 
@@ -1032,7 +1097,7 @@ hr {
   width: 33%;
 
   box-sizing: border-box;
-  background: #ffffff;
+  background: var(--white-color);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   margin-bottom: 0;
@@ -1052,7 +1117,7 @@ hr {
 
 .startDate,
 .endDate {
-  color: #808080;
+  color: var(--gray-white);
   font-size: 14px;
 }
 
@@ -1068,7 +1133,7 @@ hr {
 }
 
 .description {
-  color: #737373;
+  color: var(--gray-white);
   font-weight: 300;
   font-size: 14px;
   word-wrap: break-word;
@@ -1082,7 +1147,7 @@ hr {
 }
 
 .toporgloc span {
-  color: #737373;
+  color: var(--gray-white);
 }
 
 .eventAgendaItemContainer h2 {
@@ -1104,7 +1169,7 @@ hr {
 }
 
 .customcell {
-  background-color: #31bb6b !important;
+  background-color: var(--light-green) !important;
   color: var(--bs-white) !important;
   font-size: medium !important;
   font-weight: 500 !important;
@@ -1114,23 +1179,23 @@ hr {
 
 .eventsAttended,
 .membername {
-  color: blue;
+  color: var(--blue-color);
 }
 .actionBtn {
-  background-color: #ffffff !important;
+  background-color: var(--white-color) !important;
 }
 .actionBtn:hover,
 .actionBtn:focus,
 .actionBtn:active {
-  color: #39a440 !important;
+  color: var(--light-more-green) !important;
 }
 
 .table-body > .table-row {
-  background-color: #fff !important;
+  background-color: var(--white-color) !important;
 }
 
 .table-body > .table-row:nth-child(2n) {
-  background: #afffe8 !important;
+  background: var(--light-neon-green) !important;
 }
 
 .organizationFundCampaignContainer {
@@ -1170,7 +1235,7 @@ hr {
 
 .goalButtonOrganizationFundCampaign {
   border: 1px solid var(--grey-border-box-color) !important;
-  color: #707070 !important;
+  color: var(--grey-bg-color-dark) !important;
   width: 75%;
   padding: 10px;
   border-radius: 8px;
@@ -1204,7 +1269,7 @@ hr {
   cursor: pointer;
 }
 .campaignNameInfo:hover {
-  color: blue;
+  color: var(--blue-color);
   transform: translateY(-2px);
 }
 
@@ -1218,7 +1283,7 @@ hr {
   border: 1px solid var(--grey-border-box-color);
   position: relative;
   display: inline-block;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .btnsContainerOrganizationFundCampaign {
@@ -1516,7 +1581,7 @@ hr {
 }
 
 .subTagsLink {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 500;
   cursor: pointer;
   /* Prevent layout shift */
@@ -1546,7 +1611,7 @@ hr {
 
 .tagsBreadCrumbs:hover,
 .tagsBreadCrumbs:focus {
-  color: var(--bs-blue);
+  color: var(--blue-color);
   font-weight: 600;
   text-decoration: underline;
 }
@@ -1566,7 +1631,7 @@ hr {
 }
 
 .toggleBtn:hover {
-  color: #31bb6b !important;
+  color: var(--light-green) !important;
 }
 
 input[type='radio']:checked + label {
@@ -1574,7 +1639,7 @@ input[type='radio']:checked + label {
 }
 
 input[type='radio']:checked + label:hover {
-  color: black !important;
+  color: var(--black-color) !important;
 }
 
 .dropdownToggle {
@@ -1663,11 +1728,11 @@ input[type='radio']:checked + label:hover {
 }
 
 .noOutline input:disabled {
-  -webkit-text-fill-color: black !important;
+  -webkit-text-fill-color: var(--black-color) !important;
 }
 
 .noOutline textarea:disabled {
-  color: var(--bs-black) !important;
+  color: var(--black-color) !important;
   opacity: 1;
 }
 
@@ -1677,10 +1742,10 @@ input[type='radio']:checked + label:hover {
 
 .dropdowns {
   background-color: var(--bs-white);
-  border: 1px solid #31bb6b;
+  border: 1px solid var(--light-green);
   position: relative;
   display: inline-block;
-  color: #31bb6b;
+  color: var(--light-green);
 }
 
 .chipIcon {
@@ -1709,7 +1774,7 @@ input[type='radio']:checked + label:hover {
 }
 
 .titlemodal {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 32px;
   width: 65%;
@@ -1825,16 +1890,16 @@ input[type='radio']:checked + label:hover {
 .sampleOrgCreationBtn {
   width: 100%;
   background-color: transparent;
-  color: #707070;
-  border-color: #707070;
+  color: var(--grey-bg-color-dark);
+  border-color: var(--grey-bg-color-dark);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .sampleHover:hover {
-  border-color: grey;
-  color: grey;
+  border-color: var(--gray-white);
+  color: var(--gray-white);
 }
 
 .sampleModalTitle {
@@ -1926,13 +1991,13 @@ input[type='radio']:checked + label:hover {
 }
 
 .searchtitleMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 18px;
   margin-top: 60px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 60%;
 }
 
@@ -1954,23 +2019,23 @@ input[type='radio']:checked + label:hover {
 }
 
 .logintitleMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 30%;
 }
 
 .logintitleadmin {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-top: 50px;
   margin-bottom: 40px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 60%;
 }
 
@@ -2028,7 +2093,7 @@ input[type='radio']:checked + label:hover {
   transition:
     transform 0.2s,
     box-shadow 0.2s;
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   margin-right: 13px;
 }
 
@@ -2049,7 +2114,7 @@ input[type='radio']:checked + label:hover {
   flex-direction: column;
   width: 30%;
   padding: 40px 30px;
-  background: #ffffff;
+  background: var(--white-color);
   border-color: var(--grey-border-box-color);
   border-width: 5px;
   border-radius: 10px;
@@ -2065,12 +2130,12 @@ input[type='radio']:checked + label:hover {
 }
 
 .titlemodalMemberDetail {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #eaebef;
+  border-bottom: 3px solid var(--grey-bg-color);
   width: 65%;
 }
 
@@ -2096,7 +2161,7 @@ input[type='radio']:checked + label:hover {
   margin-top: 5px;
   transform: scale(1.2);
   cursor: pointer;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .greenregbtnMemberDetail {
@@ -2106,7 +2171,7 @@ input[type='radio']:checked + label:hover {
   box-shadow: 0 2px 2px var(--grey-border-box-color);
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   font-size: 16px;
   color: var(--bs-white);
   outline: none;
@@ -2121,12 +2186,12 @@ input[type='radio']:checked + label:hover {
   margin: 1rem 0 0;
   margin-right: 2px;
   margin-top: 10px;
-  border: 1px solid #eaebef;
+  border: 1px solid var(--grey-bg-color);
   padding: 10px 10px;
   border-radius: 5px;
   background-color: var(--bs-white);
   font-size: 16px;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   outline: none;
   font-weight: 600;
   cursor: pointer;
@@ -2211,7 +2276,7 @@ input[type='radio']:checked + label:hover {
 .memberfontcreatedbtn {
   border-radius: 7px;
   border-color: var(--grey-border-box-color);
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
   color: var(--bs-white);
   box-shadow: none;
   height: 2.5rem;
@@ -2238,30 +2303,30 @@ input[type='radio']:checked + label:hover {
 .activeBtn {
   width: 100%;
   display: flex;
-  color: #fff;
-  border: 1px solid #000;
-  background-color: #eaebef;
+  color: var(--white-color);
+  border: 1px solid var(--black-color);
+  background-color: var(--grey-bg-color);
   transition: 0.5s;
 }
 
 .activeBtn:hover {
-  color: #fff;
-  background: #23864c;
+  color: var(--white-color);
+  background: var(--dark-emerald-green);
   transition: 0.5s;
 }
 
 .inactiveBtn {
   width: 100%;
   display: flex;
-  color: #707070;
-  border: 1px solid #31bb6a60;
-  background-color: #fff;
+  color: var(--grey-bg-color-dark);
+  border: 1px solid var(--off-light-green);
+  background-color: var(--white-color);
   transition: 0.5s;
 }
 
 .inactiveBtn:hover {
-  color: #fff;
-  background: #eaebef;
+  color: var(--white-color);
+  background: var(--grey-bg-color);
   transition: 0.5s;
 }
 
@@ -2287,27 +2352,27 @@ input[type='radio']:checked + label:hover {
 }
 
 .activeBtn .bgFill {
-  background-color: #fff;
+  background-color: var(--white-color);
 }
 
 .activeBtn i {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .inactiveBtn .bgFill {
-  background-color: #eaebef;
+  background-color: var(--grey-bg-color);
 }
 
 .inactiveBtn:hover .bgFill {
-  background-color: #fff;
+  background-color: var(--white-color);
 }
 
 .inactiveBtn i {
-  color: #fff;
+  color: var(--white-color);
 }
 
 .inactiveBtn:hover i {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 .topRadius {
@@ -2330,11 +2395,11 @@ input[type='radio']:checked + label:hover {
 }
 
 .toporglocMemberDetail span {
-  color: #737373;
+  color: var(--grey-bg-color-dark);
 }
 
 .inputColor {
-  background: #f1f3f6;
+  background: var(--input-area-color);
 }
 
 .cardHeaderMemberDetail {
@@ -2377,7 +2442,7 @@ input[type='radio']:checked + label:hover {
 
 .dateboxMemberDetail > div > input {
   padding: 0.5rem 0 0.5rem 0.5rem !important; /* top, right, bottom, left */
-  background-color: #f1f3f6;
+  background-color: var(--input-area-color);
   border-radius: var(--bs-border-radius) !important;
   border: none !important;
 }
@@ -2388,17 +2453,17 @@ input[type='radio']:checked + label:hover {
 
 .dateboxMemberDetail > div > fieldset {
   border: none !important;
-  /* background-color: #f1f3f6; */
-  border-radius: var(--bs-border-radius) !important;
+  /* background-color: var(--input-area-color); */
+  border-radius: var(--bs-border-radius, 4px) !important;
 }
 
 .dateboxMemberDetail > div {
   margin: 0.5rem !important;
-  background-color: #f1f3f6;
+  background-color: var(--input-area-color);
 }
 
 input::file-selector-button {
-  background-color: black;
+  background-color: var(--black-color);
   color: var(--bs-white);
 }
 
@@ -2414,7 +2479,7 @@ input::file-selector-button {
 
 .tagLink:hover {
   font-weight: 800;
-  color: var(--bs-blue);
+  color: var(--blue-color);
   text-decoration: underline;
 }
 
@@ -2533,7 +2598,7 @@ input::file-selector-button {
 .cardBody .textWrapper .secondaryText {
   font-size: 14px;
   display: block;
-  color: var(--bs-secondary);
+  color: var(--bs-secondary, var(--bs-gray-400));
 }
 
 /* Loading OrgList CSS */
@@ -2544,7 +2609,7 @@ input::file-selector-button {
   height: calc(120px + 2rem);
   padding: 1rem;
   border-radius: 8px;
-  outline: 1px solid var(--bs-gray-200);
+  outline: 1px solid var(--bs-gray-200, var(--bs-gray-300));
   position: relative;
 }
 
@@ -2566,7 +2631,7 @@ input::file-selector-button {
 }
 
 .titlemodaldialog {
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
@@ -2576,7 +2641,7 @@ form label {
   font-weight: bold;
   padding-bottom: 1px;
   font-size: 14px;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
 }
 
 form > input {
@@ -2677,7 +2742,7 @@ form > input {
 }
 
 .row .right_portion::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--black-shadow-color);
   border-radius: 4px;
 }
 
@@ -2726,14 +2791,14 @@ form > input {
   height: 100%;
   display: flex;
   background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-border, var(--black-color));
   justify-content: center;
   align-items: center;
 }
 
 .login_btn {
   background-color: var(--search-button-bg);
-  border-color: var(--search-button-border);
+  border-color: var(--search-button-border, var(--black-color));
   margin-top: 1rem;
   margin-bottom: 1rem;
   width: 100%;
@@ -2898,9 +2963,9 @@ form > input {
 
 .cardTemplate {
   padding: 2rem;
-  background-color: #fff;
+  background-color: var(--white-color);
   border-radius: 0.8rem;
-  border: 1px solid var(--bs-gray-200);
+  border: 1px solid var(--bs-gray-200, var(--bs-gray-300));
 }
 
 .keyWrapper {
@@ -3138,7 +3203,7 @@ form > input {
   transform: scale(1.2);
   cursor: pointer;
   border: none;
-  color: #707070;
+  color: var(--grey-bg-color-dark);
   font-weight: 600;
   font-size: 16px;
 }
@@ -3157,10 +3222,10 @@ button[data-testid='createPostBtn'] {
   font-size: 10px;
   position: relative;
   text-indent: -9999em;
-  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-left: 1.1em solid #febc59;
+  border-top: 1.1em solid var(--white-shadow-color);
+  border-right: 1.1em solid var(--white-shadow-color);
+  border-bottom: 1.1em solid var(--white-shadow-color);
+  border-left: 1.1em solid var(--light-orange);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
@@ -3278,7 +3343,7 @@ button[data-testid='createPostBtn'] {
 
 .cardItem .creator {
   font-size: 1rem;
-  color: var(--bs-success, #21d015);
+  color: var(--bs-success, var(--green-color));
 }
 .rightCard {
   display: flex;
@@ -3316,7 +3381,7 @@ button[data-testid='createPostBtn'] {
     display: flex !important;
     align-items: center;
     background-color: transparent;
-    color: #31bb6b;
+    color: var(--light-green);
   }
 
   .entryaction .spinner-grow {
@@ -3335,7 +3400,7 @@ button[data-testid='createPostBtn'] {
   display: flex;
   flex-direction: column;
   padding: 1rem 1rem 0 1rem;
-  background-color: #f6f8fc;
+  background-color: var(--input-area-color);
   transition: 0.5s;
   font-family: var(--bs-leftDrawer-font-family);
 }
@@ -3400,7 +3465,7 @@ button[data-testid='createPostBtn'] {
 
 .leftDrawer .profileContainer:focus {
   outline: none;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-gray-100, var(--white-color));
 }
 
 .leftDrawer .imageContainer {
@@ -3565,11 +3630,110 @@ button[data-testid='createPostBtn'] {
   }
 }
 
+/* General reusable styles (NEW) */
+.reusable-text-ellipsis {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reusable-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--bs-primary);
+  transition: opacity 0.2s ease;
+  opacity: 0.8;
+}
+
+.reusable-arrow-indicator {
+  content: '▶';
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.8rem;
+  color: var(--bs-emphasis-color, #000);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.reusable-focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reusable-arrow-indicator {
+    transition: none;
+  }
+}
+
+/* RTL support (NEW) */
+[dir='rtl'] {
+  .iconWrapper {
+    --transform-direction: -8px;
+  }
+}
+
+/* General reusable styles (NEW) */
+.reusable-text-ellipsis {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reusable-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: var(--bs-primary);
+  transition: opacity 0.2s ease;
+  opacity: 0.8;
+}
+
+.reusable-arrow-indicator {
+  content: '▶';
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.8rem;
+  color: var(--bs-emphasis-color, #000);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.reusable-focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reusable-arrow-indicator {
+    transition: none;
+  }
+}
+
+/* RTL support (NEW) */
+[dir='rtl'] {
+  .iconWrapper {
+    --transform-direction: -8px;
+  }
+}
+
 /* LeftDrawer general styles */
 .leftDrawer {
   height: 100vh; /* Ensure it spans the full height */
   overflow-y: auto; /* Enable vertical scrolling */
   transition: transform 0.3s ease;
+  will-change: transform; /* NEW */
   position: fixed; /* Ensure it's positioned properly */
   padding-bottom: 1rem; /* Prevent last item clipping */
 }
@@ -3580,10 +3744,12 @@ button[data-testid='createPostBtn'] {
 
 .inactiveDrawer {
   transform: translateX(-100%);
+  aria-hidden: true; /* NEW */
 }
 
 .activeDrawer {
   transform: translateX(0);
+  aria-hidden: false; /* NEW */
 }
 
 /* Organization Section */
@@ -3598,8 +3764,7 @@ button[data-testid='createPostBtn'] {
   width: 100%;
   /* Add focus styles for keyboard navigation */
   &:focus-within {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: 2px;
+    @extend .reusable-focus-visible;
   }
 }
 
@@ -3632,97 +3797,80 @@ button[data-testid='createPostBtn'] {
 
 .primaryText {
   font-weight: bold;
-  /* Ensure sufficient color contrast */
   color: var(--bs-emphasis-color, #000);
+  @extend .reusable-text-ellipsis; /* NEW */
 }
 
 .secondaryText {
   font-size: 0.9rem;
-  /* Use semantic color with better contrast */
   color: var(--bs-secondary-text);
+  @extend .reusable-text-ellipsis; /* NEW */
 }
 
 /* Dropdown and options list */
 .titleHeader {
   font-size: 1.2rem;
   color: var(--bs-secondary);
+  line-height: 1.5; /* NEW */
+  margin: var(--spacing-md, 1rem) 0; /* NEW */
 }
 
-/* Common focus-visible styles (NEW) */
-.focus-visible {
-  outline: 2px solid var(--bs-primary);
-  outline-offset: 2px;
-}
+/* Active and inactive buttons */
+.activeButton,
+.inactiveButton {
+  position: relative;
+  transition: all 0.2s ease;
 
-/* Reusable indicator styles (NEW) */
-.indicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background-color: var(--bs-primary);
-}
+  &:active {
+    transform: scale(0.98);
+  }
 
-.arrow-indicator {
-  content: '▶'; /* Arrow symbol */
-  position: absolute;
-  right: 1rem; /* Distance from the right */
-  top: 50%; /* Vertically center the arrow */
-  transform: translateY(-50%); /* Adjust for perfect centering */
-  font-size: 0.8rem; /* Set arrow size */
+  &.focus-visible {
+    @extend .reusable-focus-visible;
+  }
 }
 
-/* Active Button */
 .activeButton {
   background-color: var(--grey-bg-color);
   color: black;
-  position: relative;
 
-  /* Apply left border indicator */
   &::before {
-    @extend .indicator;
+    @extend .reusable-indicator; /* NEW */
   }
 
-  /* Apply arrow indicator */
   &::after {
-    @extend .arrow-indicator;
+    @extend .reusable-arrow-indicator; /* NEW */
   }
 }
 
-/* Inactive Button */
+.activeButton:hover .arrow-indicator {
+  transform: translateY(-50%) scale(1.1);
+  opacity: 1;
+}
+
 .inactiveButton {
   background-color: transparent;
   color: var(--bs-emphasis-color, #000);
+
   &:hover {
     background-color: var(--grey-bg-color);
   }
-  /* Apply focus-visible class */
-  &.focus-visible {
-    @extend .focus-visible;
-  }
-}
-
-/* Text styles */
-.text-black {
-  color: black;
-}
-
-.text-secondary {
-  color: var(--bs-secondary);
 }
 
 /* Icon wrapper styles */
 .iconWrapper {
   display: flex;
   align-items: center;
-  margin-right: 8px;
-  /* Add tooltip for icon-only buttons */
+  margin-inline-end: 8px;
+  margin-inline-start: 0;
+
   &[aria-label]:not([aria-label='']) {
     position: relative;
+
     &::after {
       content: attr(aria-label);
       position: absolute;
-      left: 100%;
+      inset-inline-start: 100%;
       background: var(--bs-dark);
       color: var(--bs-white);
       padding: 0.25rem 0.5rem;
@@ -3730,10 +3878,10 @@ button[data-testid='createPostBtn'] {
       font-size: 0.875rem;
       opacity: 0;
       visibility: hidden;
-      /* Improve tooltip positioning */
-      transform: translateX(8px);
+      transform: translateX(var(--transform-direction, 8px));
       transition: all 0.2s ease;
     }
+
     &:hover::after {
       opacity: 1;
       visibility: visible;
@@ -3816,7 +3964,7 @@ button[data-testid='createPostBtn'] {
 
 .recurrenceRuleSubmitBtn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px var(--black-shadow-color);
 }
 
 .recurrenceRuleSubmitBtn:focus-visible {
@@ -3825,7 +3973,7 @@ button[data-testid='createPostBtn'] {
 }
 
 .attendance-modal .borderRightGreen {
-  border-right: 1px solid green;
+  border-right: 1px solid var(--light-dark-green);
 }
 .attendance-modal .positionedTopRight {
   top: 10px;
@@ -3975,16 +4123,16 @@ button[data-testid='createPostBtn'] {
   background-color: rgba(0, 0, 0, 0);
   padding: 0;
   border: none;
-  color: black;
+  color: var(--black-color);
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
 }
 
 .cardActionBtn:hover,
 .cardActionBtn:focus-visible {
-  background-color: ghostwhite;
+  background-color: var(--dropdown-hover-color);
   border: none;
-  color: black !important;
+  color: var(--black-color) !important;
   outline: 2px solid var(--subtle-blue-grey);
   outline-offset: 2px;
 }
@@ -4215,7 +4363,7 @@ button[data-testid='createPostBtn'] {
   padding-right: 40px;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--bs-gray-300);
 }
 
 .submitBtn {

From 8b2a7013ce58e4b02f8e241e7599ed4965264dc4 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv862arora@gmail.com>
Date: Fri, 3 Jan 2025 18:54:58 +0530
Subject: [PATCH 14/14] Removed Duplicacy

---
 src/style/app.module.css | 110 +++------------------------------------
 1 file changed, 6 insertions(+), 104 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index c1c855d1b7..79702a54be 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -3628,104 +3628,6 @@ button[data-testid='createPostBtn'] {
   }
 }
 
-/* General reusable styles (NEW) */
-.reusable-text-ellipsis {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.reusable-indicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background-color: var(--bs-primary);
-  transition: opacity 0.2s ease;
-  opacity: 0.8;
-}
-
-.reusable-arrow-indicator {
-  content: '▶';
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 0.8rem;
-  color: var(--bs-emphasis-color, #000);
-  transition:
-    transform 0.2s ease,
-    opacity 0.2s ease;
-}
-
-.reusable-focus-visible {
-  outline: 2px solid var(--bs-primary);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .reusable-arrow-indicator {
-    transition: none;
-  }
-}
-
-/* RTL support (NEW) */
-[dir='rtl'] {
-  .iconWrapper {
-    --transform-direction: -8px;
-  }
-}
-
-/* General reusable styles (NEW) */
-.reusable-text-ellipsis {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.reusable-indicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background-color: var(--bs-primary);
-  transition: opacity 0.2s ease;
-  opacity: 0.8;
-}
-
-.reusable-arrow-indicator {
-  content: '▶';
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 0.8rem;
-  color: var(--bs-emphasis-color, #000);
-  transition:
-    transform 0.2s ease,
-    opacity 0.2s ease;
-}
-
-.reusable-focus-visible {
-  outline: 2px solid var(--bs-primary);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .reusable-arrow-indicator {
-    transition: none;
-  }
-}
-
-/* RTL support (NEW) */
-[dir='rtl'] {
-  .iconWrapper {
-    --transform-direction: -8px;
-  }
-}
-
 /* LeftDrawer general styles */
 .leftDrawer {
   height: 100vh; /* Ensure it spans the full height */
@@ -3777,7 +3679,7 @@ button[data-testid='createPostBtn'] {
   width: 100%;
   /* Add focus styles for keyboard navigation */
   &:focus-within {
-    @extend .reusable-focus-visible;
+    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
   }
 }
 
@@ -3811,13 +3713,13 @@ button[data-testid='createPostBtn'] {
 .primaryText {
   font-weight: bold;
   color: var(--bs-emphasis-color, #000);
-  @extend .reusable-text-ellipsis; /* NEW */
+  @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */
 }
 
 .secondaryText {
   font-size: 0.9rem;
   color: var(--bs-secondary-text);
-  @extend .reusable-text-ellipsis; /* NEW */
+  @extend .reusable-text-ellipsis; /* Referencing the reusable class from the general section */
 }
 
 /* Dropdown and options list */
@@ -3839,7 +3741,7 @@ button[data-testid='createPostBtn'] {
   }
 
   &.focus-visible {
-    @extend .reusable-focus-visible;
+    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
   }
 }
 
@@ -3848,11 +3750,11 @@ button[data-testid='createPostBtn'] {
   color: black;
 
   &::before {
-    @extend .reusable-indicator; /* NEW */
+    @extend .reusable-indicator; /* Referencing the reusable class from the general section */
   }
 
   &::after {
-    @extend .reusable-arrow-indicator; /* NEW */
+    @extend .reusable-arrow-indicator; /* Referencing the reusable class from the general section */
   }
 }