From 8d87af3c781cced41cfdc289e444f9fcba64ef95 Mon Sep 17 00:00:00 2001
From: prathmesh703 <146568950+prathmesh703@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:57:42 +0530
Subject: [PATCH] global css

---
 src/components/LeftDrawer/LeftDrawer.tsx      |  52 +-
 .../OrgListCard/OrgListCard.module.css        | 150 -----
 src/components/OrgListCard/OrgListCard.tsx    |   2 +-
 .../ProfileDropdown.module.css                |  76 ---
 .../ProfileDropdown/ProfileDropdown.tsx       |   2 +-
 .../SuperAdminScreen.module.css               | 110 ----
 .../SuperAdminScreen/SuperAdminScreen.tsx     |   2 +-
 .../OrganizationCard.module.css               | 163 -----
 .../OrganizationCard/OrganizationCard.tsx     |   2 +-
 .../UserSidebar/UserSidebar.module.css        | 251 -------
 .../UserPortal/UserSidebar/UserSidebar.tsx    |  28 +-
 src/screens/ForgotPassword/ForgotPassword.tsx |   5 +-
 .../Organizations/Organizations.module.css    | 160 -----
 .../Organizations/Organizations.tsx           |  10 +-
 src/style/app.module.css                      | 622 +++++++++++++++++-
 15 files changed, 642 insertions(+), 993 deletions(-)
 delete mode 100644 src/components/OrgListCard/OrgListCard.module.css
 delete mode 100644 src/components/ProfileDropdown/ProfileDropdown.module.css
 delete mode 100644 src/components/SuperAdminScreen/SuperAdminScreen.module.css
 delete mode 100644 src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
 delete mode 100644 src/components/UserPortal/UserSidebar/UserSidebar.module.css
 delete mode 100644 src/screens/UserPortal/Organizations/Organizations.module.css

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 6cf3605e26..4e824c96c6 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -70,24 +70,24 @@ const leftDrawer = ({
               {({ isActive }) => (
                 <Button
                   variant={isActive === true ? 'success' : ''}
-                  className={` ${
-                    isActive === true
-                      ? 'text-black font-weight-bold'
-                      : 'text-secondary'
-                  }`}
                   style={{
-                    backgroundColor: isActive === true ? '#EAEBEF' : '',
+                    backgroundColor:
+                      isActive === true ? 'var(--sidebar-option-bg)' : '',
+                    fontWeight: isActive ? 'bold' : 'normal',
+                    color: isActive
+                      ? 'var(--sidebar-option-text-active)'
+                      : 'var(--sidebar-option-text-inactive)',
                   }}
                   data-testid="orgsBtn"
                 >
                   <div className={styles.iconWrapper}>
                     <OrganizationsIcon
                       fill="none"
-                      stroke={
+                      stroke={`${
                         isActive === true
-                          ? 'var(--bs-black)'
-                          : 'var(--bs-secondary)'
-                      }
+                          ? 'var(--sidebar-icon-stroke-active)'
+                          : 'var(--sidebar-icon-stroke-inactive)'
+                      }`}
                     />
                   </div>
                   {t('my organizations')}
@@ -100,13 +100,13 @@ const leftDrawer = ({
                   {({ isActive }) => (
                     <Button
                       variant={isActive === true ? 'success' : ''}
-                      className={` ${
-                        isActive === true
-                          ? 'text-black font-weight-bold'
-                          : 'text-secondary'
-                      }`}
                       style={{
-                        backgroundColor: isActive === true ? '#EAEBEF' : '',
+                        backgroundColor:
+                          isActive === true ? 'var(--sidebar-option-bg)' : '',
+                        fontWeight: isActive ? 'bold' : 'normal',
+                        color: isActive
+                          ? 'var(--sidebar-option-text-active)'
+                          : 'var(--sidebar-option-text-inactive)',
                       }}
                       data-testid="rolesBtn"
                     >
@@ -115,8 +115,8 @@ const leftDrawer = ({
                           fill="none"
                           stroke={`${
                             isActive === true
-                              ? 'var(--black)'
-                              : 'var(--bs-secondary)'
+                              ? 'var(--sidebar-icon-stroke-active)'
+                              : 'var(--sidebar-icon-stroke-inactive)'
                           }`}
                         />
                       </div>
@@ -128,13 +128,13 @@ const leftDrawer = ({
                   {({ isActive }) => (
                     <Button
                       variant={isActive === true ? 'success' : ''}
-                      className={` ${
-                        isActive === true
-                          ? 'text-black font-weight-bold'
-                          : 'text-secondary'
-                      }`}
                       style={{
-                        backgroundColor: isActive === true ? '#EAEBEF' : '',
+                        backgroundColor:
+                          isActive === true ? 'var(--sidebar-option-bg)' : '',
+                        fontWeight: isActive ? 'bold' : 'normal',
+                        color: isActive
+                          ? 'var(--sidebar-option-text-active)'
+                          : 'var(--sidebar-option-text-inactive)',
                       }}
                       data-testid="communityProfileBtn"
                     >
@@ -143,8 +143,8 @@ const leftDrawer = ({
                           fill="none"
                           stroke={`${
                             isActive === true
-                              ? 'var(--black)'
-                              : 'var(--bs-secondary)'
+                              ? 'var(--sidebar-icon-stroke-active)'
+                              : 'var(--sidebar-icon-stroke-inactive)'
                           }`}
                         />
                       </div>
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
deleted file mode 100644
index c303183923..0000000000
--- a/src/components/OrgListCard/OrgListCard.module.css
+++ /dev/null
@@ -1,150 +0,0 @@
-.orgCard {
-  background-color: var(--bs-white);
-  margin: 1rem;
-  padding: 1rem;
-  border-radius: 8px;
-  outline: 1px solid var(--bs-gray-200);
-  position: relative;
-}
-
-.orgCard .innerContainer {
-  display: flex;
-}
-
-.orgCard .innerContainer .orgImgContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.orgCard .innerContainer .orgImgContainer {
-  width: 125px;
-  height: 120px;
-  object-fit: contain;
-}
-
-.orgCard .innerContainer .orgImgContainer {
-  width: 125px;
-  height: 120px;
-  background-color: var(--bs-gray-200);
-}
-
-.orgCard .innerContainer .content {
-  flex: 1;
-  margin-left: 1rem;
-  width: 70%;
-  margin-top: 0.7rem;
-}
-
-.orgCard button {
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-  z-index: 1;
-}
-
-.flaskIcon {
-  margin-top: 4px;
-}
-
-.manageBtn {
-  display: flex;
-  justify-content: space-around;
-  width: 8rem;
-  border-color: var(--search-button-bg) !important;
-  background-color: var(--search-button-bg) !important;
-  color: #555555 !important;
-}
-
-.manageBtn:hover {
-  color: var(--brown-color) !important;
-  box-shadow: var(--hover-shadow);
-}
-
-.orgName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: 1rem;
-}
-
-.orgdesc {
-  font-size: 0.9rem;
-  color: var(--bs-gray-600);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  max-width: 20rem;
-}
-
-.orgadmin {
-  font-size: 0.9rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.orgmember {
-  font-size: 0.9rem;
-}
-
-.address {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  align-items: center;
-}
-
-.address h6 {
-  font-size: 0.9rem;
-  color: var(--bs-gray-600);
-}
-
-@media (max-width: 580px) {
-  .orgCard {
-    height: unset;
-    margin: 0.5rem 0;
-    padding: 1.25rem 1.5rem;
-  }
-
-  .orgCard .innerContainer {
-    flex-direction: column;
-  }
-
-  .orgCard .innerContainer .orgImgContainer {
-    margin-bottom: 0.8rem;
-  }
-
-  .orgCard .innerContainer .orgImgContainer img {
-    height: auto;
-    width: 100%;
-  }
-
-  .orgCard .innerContainer .content {
-    margin-left: 0;
-  }
-
-  .orgCard button {
-    bottom: 0;
-    right: 0;
-    position: relative;
-    margin-left: auto;
-    display: block;
-  }
-
-  .flaskIcon {
-    margin-bottom: 6px;
-  }
-
-  .manageBtn {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-  }
-}
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
index f9f7a361e4..a6e1d82dad 100644
--- a/src/components/OrgListCard/OrgListCard.tsx
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -4,7 +4,7 @@ import TruncatedText from './TruncatedText';
 import FlaskIcon from 'assets/svgs/flask.svg?react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import styles from './OrgListCard.module.css';
+import styles from '../../style/app.module.css';
 import { useNavigate } from 'react-router-dom';
 import type {
   InterfaceOrgConnectionInfoType,
diff --git a/src/components/ProfileDropdown/ProfileDropdown.module.css b/src/components/ProfileDropdown/ProfileDropdown.module.css
deleted file mode 100644
index 5c3484eeea..0000000000
--- a/src/components/ProfileDropdown/ProfileDropdown.module.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.profileContainer {
-  border: none;
-  padding: 2.1rem 0.5rem;
-  height: 52px;
-  border-radius: 8px 0px 0px 8px;
-  display: flex;
-  align-items: center;
-  background-color: var(--profile-bg) !important;
-}
-.profilebutton {
-  width: 100%;
-}
-
-.profileContainer:focus {
-  outline: none;
-  background-color: var(--bs-gray-100);
-}
-.imageContainer {
-  width: 56px;
-  height: 56px;
-  border-radius: 100%;
-  margin-right: 10px;
-}
-.imageContainer img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 100%;
-}
-.profileContainer .profileText {
-  flex: 1;
-  text-align: start;
-  overflow: hidden;
-  margin-right: 4px;
-}
-.angleDown {
-  margin-left: 4px;
-}
-.profileContainer .profileText .primaryText {
-  font-size: 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;
-}
-.profileContainer .profileText .secondaryText {
-  font-size: 0.8rem;
-  font-weight: 400;
-  color: var(--bs-secondary);
-  display: block;
-  text-transform: capitalize;
-}
-.profileDropdown {
-  background-color: transparent !important;
-}
-.profileDropdown .dropdown-toggle .btn .btn-normal {
-  display: none !important;
-  background-color: transparent !important;
-}
-.dropdownToggle {
-  background-image: url(../../../public/images/svg/angleRight.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: var(--profile-bg) !important;
-}
-
-.dropdownToggle::after {
-  border-top: none !important;
-  border-bottom: none !important;
-}
-.avatarStyle {
-  border-radius: 100%;
-}
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
index 85bb0a46c5..182b0d66db 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { ButtonGroup, Dropdown } from 'react-bootstrap';
 import { useNavigate, useParams } from 'react-router-dom';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './ProfileDropdown.module.css';
+import styles from '../../style/app.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.module.css b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
deleted file mode 100644
index e5d2afa7c3..0000000000
--- a/src/components/SuperAdminScreen/SuperAdminScreen.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.pageContainer {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background-color: var(--profile-bg) !important;
-  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
-}
-
-.expand {
-  padding-left: 4rem;
-  animation: moveLeft 0.5s ease-in-out;
-}
-
-.contract {
-  padding-left: calc(300px + 2rem + 1.5rem);
-  animation: moveRight 0.5s ease-in-out;
-}
-
-.collapseSidebarButton {
-  --bs-btn-active-color: var(--profile-bg);
-  --bs-btn-active-bg: var(--profile-bg);
-  --bs-btn-active-border-color: var(--profile-bg);
-  position: fixed;
-  height: 40px;
-  bottom: 0;
-  z-index: 9999;
-  width: calc(300px + 2rem);
-  background-color: rgba(245, 245, 245, 0.7);
-  color: black;
-  border: none;
-  border-radius: 0px;
-}
-
-.collapseSidebarButton:hover,
-.opendrawer:hover {
-  opacity: 1;
-  background-color: var(--profile-bg);
-  box-shadow: var(--hover-shadow);
-  color: black !important;
-}
-.opendrawer {
-  --bs-btn-active-color: var(--profile-bg);
-  --bs-btn-active-bg: var(--profile-bg);
-  --bs-btn-active-border-color: var(--profile-bg);
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 40px;
-  height: 100vh;
-  z-index: 9999;
-  background-color: var(--profile-bg);
-  border: none;
-  border-radius: 0px;
-  margin-right: 20px;
-  color: black;
-}
-
-@media (max-width: 1120px) {
-  .contract {
-    padding-left: calc(250px + 2rem + 1.5rem);
-  }
-  .collapseSidebarButton {
-    width: calc(250px + 2rem);
-  }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
-  .pageContainer {
-    padding-left: 2.5rem;
-  }
-
-  .opendrawer {
-    width: 25px;
-  }
-
-  .contract,
-  .expand {
-    animation: none;
-  }
-
-  .collapseSidebarButton {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-}
-
-@keyframes moveLeft {
-  from {
-    padding-left: calc(300px + 2rem + 1.5rem);
-  }
-
-  to {
-    padding-left: 1.5rem;
-  }
-}
-
-@keyframes moveRight {
-  from {
-    padding-left: 1.5rem;
-  }
-
-  to {
-    padding-left: calc(300px + 2rem + 1.5rem);
-  }
-}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
index 09fc6a0f90..91063e773c 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation } from 'react-router-dom';
-import styles from './SuperAdminScreen.module.css';
+import styles from '../../style/app.module.css';
 
 /**
  * The SuperAdminScreen component manages the layout for the Super Admin screen,
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
deleted file mode 100644
index 4d8d72f9d0..0000000000
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
+++ /dev/null
@@ -1,163 +0,0 @@
-.orgCard {
-  background-color: var(--bs-white);
-  margin: 0.5rem;
-  padding: 1rem;
-  border-radius: 8px;
-  outline: 1px solid var(--bs-gray-200);
-  position: relative;
-}
-
-.orgCard .innerContainer {
-  display: flex;
-}
-
-.orgCard .innerContainer .orgImgContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  border-radius: 4px;
-  width: 125px;
-  height: 120px;
-  object-fit: contain;
-  background-color: var(--bs-gray-200);
-}
-
-.orgCard .innerContainer .content {
-  flex: 1;
-  margin-left: 1rem;
-  width: 70%;
-  margin-top: 0.7rem;
-}
-
-.orgCard button {
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-  z-index: 1;
-}
-
-.joinBtn {
-  display: flex;
-  justify-content: space-around;
-  width: 8rem;
-  border-width: medium;
-}
-
-.joinedBtn {
-  display: flex;
-  justify-content: space-around;
-  width: 8rem;
-  color: var(--brown-color);
-  font-weight: bold;
-  background-color: var(--light-blue) !important;
-  border-color: var(--light-blue) !important;
-}
-
-.joinedBtn:hover {
-  background-color: var(--light-blue) !important;
-  border-color: var(--light-blue) !important;
-  color: var(--brown-color) !important;
-  box-shadow: var(--hover-shadow);
-}
-
-.withdrawBtn {
-  display: flex;
-  justify-content: space-around;
-  width: 8rem;
-}
-
-.orgName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: 1rem;
-}
-
-.orgdesc {
-  font-size: 0.9rem;
-  color: var(--bs-gray-600);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  max-width: 20rem;
-}
-
-.orgadmin {
-  font-size: 0.9rem;
-  display: flex;
-  align-items: start;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.orgmember {
-  font-size: 0.9rem;
-}
-
-.address {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  align-items: center;
-}
-
-.address h6 {
-  font-size: 0.9rem;
-  color: var(--bs-gray-600);
-}
-
-@media (max-width: 1420px) {
-  .orgCard {
-    width: 100%;
-  }
-}
-
-@media (max-width: 550px) {
-  .orgCard {
-    width: 100%;
-  }
-
-  .orgCard {
-    height: unset;
-    margin: 0.5rem 0;
-    padding: 1.25rem 1.5rem;
-  }
-
-  .orgCard .innerContainer .orgImgContainer {
-    margin-bottom: 0.8rem;
-  }
-
-  .orgCard .innerContainer {
-    flex-direction: column;
-  }
-
-  .orgCard .innerContainer .orgImgContainer img {
-    height: auto;
-    width: 100%;
-  }
-
-  .orgCard .innerContainer .content {
-    margin-left: 0;
-  }
-
-  .orgCard button {
-    bottom: 0;
-    right: 0;
-    position: relative;
-    margin-left: auto;
-    display: block;
-  }
-  .joinBtn,
-  .joinedBtn,
-  .withdrawBtn {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-  }
-}
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
index b76d0c73d9..58eeaa83de 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './OrganizationCard.module.css';
+import styles from '../../../style/app.module.css';
 import { Button } from 'react-bootstrap';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.module.css b/src/components/UserPortal/UserSidebar/UserSidebar.module.css
deleted file mode 100644
index f160b29bd0..0000000000
--- a/src/components/UserPortal/UserSidebar/UserSidebar.module.css
+++ /dev/null
@@ -1,251 +0,0 @@
-.leftDrawer {
-  width: calc(300px);
-  background-color: var(--profile-bg) !important;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 1rem 0 1rem;
-  background-color: var(--bs-white);
-  transition: 0.5s;
-  font-family: var(--bs-leftDrawer-font-family);
-}
-
-.activeDrawer {
-  width: calc(300px);
-  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:hover {
-  background-color: var(--grey-light);
-  color: var(--black) !important;
-  box-shadow: var(--hover-shadow);
-}
-.leftbarcompheight {
-  display: flex;
-  justify-content: space-between;
-  height: 100vh;
-  padding-bottom: 48px;
-}
-
-.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/UserPortal/UserSidebar/UserSidebar.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
index b262d0dc71..c350a27cc1 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
 import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
 import SettingsIcon from 'assets/svgs/settings.svg?react';
 import TalawaLogo from 'assets/svgs/talawa.svg?react';
-import styles from './UserSidebar.module.css';
+import styles from '../../../style/app.module.css';
 import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
 
 export interface InterfaceUserSidebarProps {
@@ -72,12 +72,12 @@ const userSidebar = ({
               {({ isActive }) => (
                 <Button
                   variant={isActive ? 'success' : ''}
-                  className={`${
-                    isActive ? 'text-black font-weight-bold' : 'text-secondary'
-                  }`}
                   style={{
-                    backgroundColor: isActive ? '#EAEBEF' : '',
-                    fontWeight: isActive ? 'bold' : 'normal', // Ensures text is bold when active
+                    backgroundColor: isActive ? 'var(--sidebar-option-bg)' : '',
+                    fontWeight: isActive ? 'bold' : 'normal',
+                    color: isActive
+                      ? 'var(--sidebar-option-text-active)'
+                      : 'var(--sidebar-option-text-inactive)',
                   }}
                   data-testid="orgsBtn"
                 >
@@ -85,8 +85,8 @@ const userSidebar = ({
                     <OrganizationsIcon
                       stroke={`${
                         isActive === true
-                          ? 'var(--bs-black)'
-                          : 'var(--bs-secondary)'
+                          ? 'var(--sidebar-icon-stroke-active)'
+                          : 'var(--sidebar-icon-stroke-inactive)'
                       }`}
                     />
                   </div>
@@ -99,13 +99,13 @@ const userSidebar = ({
               {({ isActive }) => (
                 <Button
                   variant={isActive ? 'success' : ''}
-                  className={`${
-                    isActive ? 'text-black font-weight-bold' : 'text-secondary'
-                  } `}
                   style={{
-                    backgroundColor: isActive ? '#EAEBEF' : '',
+                    backgroundColor: isActive ? 'var(--sidebar-option-bg)' : '',
                     fontWeight: isActive ? 'bold' : 'normal',
                     boxShadow: isActive ? 'none' : '',
+                    color: isActive
+                      ? 'var(--sidebar-option-text-active)'
+                      : 'var(--sidebar-option-text-inactive)',
                   }}
                   data-testid="settingsBtn"
                 >
@@ -113,8 +113,8 @@ const userSidebar = ({
                     <SettingsIcon
                       stroke={`${
                         isActive === true
-                          ? 'var(--bs-black)'
-                          : 'var(--bs-secondary)'
+                          ? 'var(--sidebar-icon-stroke-active)'
+                          : 'var(--sidebar-icon-stroke-inactive)'
                       }`}
                     />
                   </div>
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
index 18d4f2a780..2986ee1afb 100644
--- a/src/screens/ForgotPassword/ForgotPassword.tsx
+++ b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -163,7 +163,10 @@ const ForgotPassword = (): JSX.Element => {
             <div className={styles.cardTemplate}>
               <div className={styles.keyWrapper}>
                 <div className={styles.themeOverlay} />
-                <KeyLogo className={styles.keyLogo} fill="var(--bs-primary)" />
+                <KeyLogo
+                  className={styles.keyLogo}
+                  fill="var(--forgot-password-fill)"
+                />
               </div>
               <h3 className="text-center fw-bold">
                 {tCommon('forgotPassword')}
diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
deleted file mode 100644
index d9dc1206d2..0000000000
--- a/src/screens/UserPortal/Organizations/Organizations.module.css
+++ /dev/null
@@ -1,160 +0,0 @@
-.borderNone {
-  border: none;
-}
-
-.colorWhite {
-  color: var(--brown-color);
-}
-
-.colorLight {
-  background-color: #f5f5f5;
-}
-
-.mainContainer {
-  max-height: 100%;
-  overflow: auto;
-}
-
-.content {
-  height: 100vh;
-  min-height: calc(100% - 40px);
-}
-
-.paddingY {
-  padding: 30px 0px;
-}
-
-.containerHeight {
-  background-color: var(--profile-bg) !important;
-  min-height: 100vh;
-  padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
-}
-
-.expand {
-  padding-left: 4rem;
-  animation: moveLeft 0.9s ease-in-out;
-}
-
-.contract {
-  padding-left: calc(300px + 2rem + 1.5rem);
-  animation: moveRight 0.5s ease-in-out;
-}
-
-.colorPrimary {
-  background: var(--blue-search-bg);
-  color: var(--brown-color) !important;
-  --bs-btn-active-bg: var(--blue-search-bg);
-}
-.colorPrimary:hover,
-.colorPrimary:focus,
-.colorPrimary:active {
-  background-color: var(--blue-search-bg) !important;
-  box-shadow: var(--hover-shadow);
-  color: var(--brown-color) !important;
-}
-
-.backgroundWhite {
-  background-color: white;
-}
-
-.input {
-  flex: 1;
-  position: relative;
-  margin-right: 10px;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.collapseSidebarButton {
-  position: fixed;
-  height: 40px;
-  bottom: 0;
-  z-index: 9999;
-  width: calc(300px);
-  background-color: rgba(245, 245, 245, 0.7);
-  color: black;
-  border: none;
-  border-radius: 0px;
-}
-
-.collapseSidebarButton:hover,
-.opendrawer:hover {
-  opacity: 1;
-  color: black !important;
-}
-.opendrawer {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 40px;
-  height: 100vh;
-  z-index: 9999;
-  background-color: rgba(245, 245, 245);
-  border: none;
-  border-radius: 0px;
-  margin-right: 20px;
-  color: black;
-}
-.collapseSidebarButton:hover,
-.opendrawer:hover {
-  background-color: var(--profile-bg);
-  box-shadow: var(--hover-shadow);
-}
-
-.collapseSidebarButton:active,
-.opendrawer:active {
-  background-color: var(--profile-bg) !important;
-}
-
-.maxWidth {
-  max-width: 473px;
-}
-
-@media screen and (max-width: 850px) {
-  .mainContainer {
-    width: 100%;
-  }
-}
-
-@media (max-width: 1120px) {
-  .collapseSidebarButton {
-    width: calc(250px + 2rem);
-  }
-}
-
-@media (max-height: 650px) {
-  .collapseSidebarButton {
-    width: 250px;
-    height: 20px;
-  }
-  .opendrawer {
-    width: 30px;
-  }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
-  .containerHeight {
-    height: 100vh;
-    padding: 2rem;
-  }
-  .opendrawer {
-    width: 25px;
-  }
-
-  .contract,
-  .expand {
-    animation: none;
-  }
-
-  .collapseSidebarButton {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-}
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
index df5a7cdbc2..0ac148c730 100644
--- a/src/screens/UserPortal/Organizations/Organizations.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './Organizations.module.css';
+import styles from '../../../style/app.module.css';
 
 const { getItem } = useLocalStorage();
 
@@ -316,11 +316,11 @@ export default function organizations(): JSX.Element {
           hideDrawer === null
             ? ''
             : hideDrawer
-              ? styles.expand
-              : styles.contract
+              ? styles.expandOrg
+              : styles.contractOrg
         }`}
       >
-        <div className={`${styles.mainContainer}`}>
+        <div className={`${styles.mainContainerOrganization}`}>
           <div className="d-flex justify-content-between align-items-center">
             <div style={{ flex: 1 }}>
               <h1>{t('selectOrganization')}</h1>
@@ -375,7 +375,7 @@ export default function organizations(): JSX.Element {
             className={`d-flex flex-column justify-content-between ${styles.content}`}
           >
             <div
-              className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+              className={`d-flex flex-column  ${styles.gap} ${styles.paddingY}`}
             >
               {loadingOrganizations ? (
                 <div className={`d-flex flex-row justify-content-center`}>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index fb89e7fcd2..8ab3761117 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -66,6 +66,13 @@
   --row-background: var(--bs-white, var(--bs-white));
   --modal-background: rgba(0, 0, 0, 0.7);
   --sort-bg: #fcfcfc;
+  --sidebar-option-bg: #eaebef;
+  --sidebar-icon-stroke-active: #000000;
+  --sidebar-icon-stroke-inactive: #808080;
+  --sidebar-option-text-active: #000000;
+  --sidebar-option-text-inactive: #808080;
+  --forgot-password-fill: #555555;
+
   /* Font Sizes */
   --font-size-header: 16px;
 
@@ -93,7 +100,8 @@
   --delete-button-bg: #f8d6dc;
   --delete-button-color: #ff4d4f;
   --search-button-bg: #a8c7fa;
-  --search-button-border: var(--brown-color);
+  --search-button-border: #555555;
+  --search-outline: #555555;
   --bs-primary: #0056b3;
   --bs-warning: #ffc107;
   --bs-white: #fff;
@@ -3188,13 +3196,6 @@ form > input {
   width: 28px;
   height: 26px;
 }
-
-.imageContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.5rem;
-}
 /* CSS Refactor for OrgPost */
 
 .btnsContainerOrgPost {
@@ -3770,20 +3771,6 @@ button[data-testid='createPostBtn'] {
   display: block;
 }
 
-.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: var(--profile-bg);
-  transition: 0.5s;
-  font-family: var(--bs-leftDrawer-font-family);
-}
-
 .activeDrawer {
   width: calc(300px + 2rem);
   position: fixed;
@@ -4075,17 +4062,6 @@ button[data-testid='createPostBtn'] {
   padding-right: 3rem;
 }
 
-.profileContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  /* Add focus styles for keyboard navigation */
-  &:focus-within {
-    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
-  }
-}
-
 .bg-danger {
   background-color: var(--delete-button-color);
 }
@@ -4565,6 +4541,7 @@ button[data-testid='createPostBtn'] {
 
 .paddingY {
   padding: var(--spacing-xl, 1.875rem) 0;
+  margin-bottom: 4rem;
 }
 
 .eventActionsContainer {
@@ -6468,3 +6445,582 @@ button[data-testid='createPostBtn'] {
   font-weight: bold;
   color: var(--black-color);
 }
+
+/* usersidebar  */
+
+.leftDrawer {
+  width: calc(300px);
+  background-color: var(--profile-bg) !important;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0 1rem;
+  background-color: var(--bs-white);
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.leftbarcompheight {
+  display: flex;
+  justify-content: space-between;
+  height: 100vh;
+  padding-bottom: 48px;
+}
+
+@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;
+  }
+}
+
+/* ProfileDropdown */
+
+.profileContainer {
+  border: none;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  align-items: center;
+  background-color: var(--profile-bg) !important;
+  justify-content: space-between;
+  width: 100%;
+  /* Add focus styles for keyboard navigation */
+  &:focus-within {
+    @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
+  }
+}
+.profilebutton {
+  width: 100%;
+}
+
+.profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+.imageContainer {
+  width: 56px;
+  height: 56px;
+  border-radius: 100%;
+  margin-right: 10px;
+}
+.imageContainer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 100%;
+}
+.profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.profileContainer .profileText .primaryText {
+  font-size: 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;
+}
+.profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+.profileDropdown {
+  background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+  display: none !important;
+  background-color: transparent !important;
+}
+.dropdownToggle {
+  background-image: url(../../../public/images/svg/angleRight.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--profile-bg) !important;
+}
+
+.dropdownToggle::after {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+.avatarStyle {
+  border-radius: 100%;
+}
+
+/* SuperAdminScreen */
+
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: var(--profile-bg) !important;
+  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.5s ease-in-out;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  --bs-btn-active-color: var(--profile-bg);
+  --bs-btn-active-bg: var(--profile-bg);
+  --bs-btn-active-border-color: var(--profile-bg);
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  background-color: var(--profile-bg);
+  box-shadow: var(--hover-shadow);
+  color: black !important;
+}
+.opendrawer {
+  --bs-btn-active-color: var(--profile-bg);
+  --bs-btn-active-bg: var(--profile-bg);
+  --bs-btn-active-border-color: var(--profile-bg);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: var(--profile-bg);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .pageContainer {
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+@keyframes moveLeft {
+  from {
+    padding-left: calc(300px + 2rem + 1.5rem);
+  }
+
+  to {
+    padding-left: 1.5rem;
+  }
+}
+
+@keyframes moveRight {
+  from {
+    padding-left: 1.5rem;
+  }
+
+  to {
+    padding-left: calc(300px + 2rem + 1.5rem);
+  }
+}
+
+/* OrganizationCard */
+.joinBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+  border-width: medium;
+}
+
+.joinedBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+  color: var(--brown-color);
+  font-weight: bold;
+  background-color: var(--light-blue) !important;
+  border-color: var(--light-blue) !important;
+}
+
+.joinedBtn:hover {
+  background-color: var(--light-blue) !important;
+  border-color: var(--light-blue) !important;
+  color: var(--brown-color) !important;
+  box-shadow: var(--hover-shadow);
+}
+
+.withdrawBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+}
+
+.orgName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 1rem;
+}
+
+.orgdesc {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  max-width: 20rem;
+}
+
+.orgadmin {
+  font-size: 0.9rem;
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+}
+
+@media (max-width: 1420px) {
+  .orgCard {
+    width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .orgCard {
+    width: 100%;
+  }
+
+  .orgCard {
+    height: unset;
+    margin: 0.5rem 0;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .orgCard .innerContainer {
+    flex-direction: column;
+  }
+
+  .orgCard button {
+    bottom: 0;
+    right: 0;
+    position: relative;
+    margin-left: auto;
+    display: block;
+  }
+  .joinBtn,
+  .joinedBtn,
+  .withdrawBtn {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+  }
+}
+
+/* OrgListCard */
+
+.orgCard {
+  background-color: var(--bs-white);
+  margin: 1rem;
+  padding: 1rem;
+  border-radius: 8px;
+  outline: 1px solid var(--bs-gray-200);
+  position: relative;
+}
+
+.orgCard .innerContainer {
+  display: flex;
+  gap: 10px;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  width: 125px;
+  height: 120px;
+  object-fit: contain;
+  margin-bottom: 0.8rem;
+  background-color: var(--bs-gray-200);
+}
+.orgCard .innerContainer .content {
+  flex: 1;
+  margin-left: 1rem;
+  width: 70%;
+  margin-top: 0.7rem;
+  margin-left: 0;
+}
+
+.orgCard button {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.flaskIcon {
+  margin-top: 4px;
+}
+
+.manageBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+  border-color: var(--search-button-bg) !important;
+  background-color: var(--search-button-bg) !important;
+  color: #555555 !important;
+}
+
+.manageBtn:hover {
+  color: var(--brown-color) !important;
+  box-shadow: var(--hover-shadow);
+}
+
+.orgdesc {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  max-width: 20rem;
+}
+
+.orgmember {
+  font-size: 0.9rem;
+}
+
+.address {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  align-items: center;
+}
+
+.address h6 {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 580px) {
+  .orgCard {
+    height: unset;
+    margin: 0.5rem 0;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .orgCard .innerContainer {
+    flex-direction: column;
+  }
+
+  .orgCard .innerContainer .orgImgContainer img {
+    height: auto;
+    width: 100%;
+  }
+
+  .orgCard button {
+    bottom: 0;
+    right: 0;
+    position: relative;
+    margin-left: auto;
+    display: block;
+  }
+
+  .flaskIcon {
+    margin-bottom: 6px;
+  }
+
+  .manageBtn {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+  }
+}
+
+/* Organizations */
+
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: var(--search-outline);
+}
+
+.mainContainerOrganization {
+  max-height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.content {
+  min-height: calc(100% - 40px);
+}
+
+.paddingY {
+  padding: 30px 0px;
+}
+
+.containerHeight {
+  background-color: var(--profile-bg) !important;
+  min-height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
+}
+
+.expandOrg {
+  padding-left: 4rem;
+  animation: moveLeft 0.9s ease-in-out;
+}
+
+.contractOrg {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.colorPrimary {
+  background: var(--blue-search-bg);
+  color: var(--brown-color) !important;
+  --bs-btn-active-bg: var(--blue-search-bg);
+}
+.colorPrimary:hover,
+.colorPrimary:focus,
+.colorPrimary:active {
+  background-color: var(--blue-search-bg) !important;
+  box-shadow: var(--hover-shadow);
+  color: var(--brown-color) !important;
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.input {
+  flex: 1;
+  position: relative;
+  margin-right: 10px;
+}
+
+.collapseSidebarButton:active,
+.opendrawer:active {
+  background-color: var(--profile-bg) !important;
+}
+
+.maxWidth {
+  max-width: 473px;
+}
+
+@media screen and (max-width: 850px) {
+  .mainContainerOrganization {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1120px) {
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+@media (max-height: 650px) {
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .containerHeight {
+    height: 100vh;
+    padding: 2rem;
+  }
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contractOrg,
+  .expandOrg {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}