From f1e8c32f6519d9f4691f240418a0a78d6764b3ab Mon Sep 17 00:00:00 2001
From: Devender singh shekhawat <50149675+devender18@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:48:29 +0530
Subject: [PATCH] refactored: CSS files in src/screens/OrgSettings(fixes:
 #2523) (#2610)

* refactored: CSS files in src/screens/OrgSettings(fixes: #2523)

* refactored: CSS files in src/screens/OrgSettings(fixes: #2523)

* refactored: CSS files in src/screens/OrgSettings(fixes: #2523)

* refactored: CSS files in src/screens/OrgSettings(fixes: #2523)
---
 .../OrgSettings/General/GeneralSettings.tsx   |  2 +-
 .../OrgSettings/OrgSettings.module.css        | 55 ----------------
 src/screens/OrgSettings/OrgSettings.tsx       |  6 +-
 src/style/app.module.css                      | 62 ++++++++++++++++++-
 4 files changed, 63 insertions(+), 62 deletions(-)
 delete mode 100644 src/screens/OrgSettings/OrgSettings.module.css

diff --git a/src/components/OrgSettings/General/GeneralSettings.tsx b/src/components/OrgSettings/General/GeneralSettings.tsx
index 4dbca1b6eb..739456150a 100644
--- a/src/components/OrgSettings/General/GeneralSettings.tsx
+++ b/src/components/OrgSettings/General/GeneralSettings.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
 import { Card, Col, Form, Row } from 'react-bootstrap';
-import styles from 'screens/OrgSettings/OrgSettings.module.css';
+import styles from '../../../../src/style/app.module.css';
 import OrgProfileFieldSettings from './OrgProfileFieldSettings/OrgProfileFieldSettings';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
 import DeleteOrg from './DeleteOrg/DeleteOrg';
diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css
deleted file mode 100644
index 9952a9a459..0000000000
--- a/src/screens/OrgSettings/OrgSettings.module.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.headerBtn {
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-}
-.settingsContainer {
-  min-height: 100vh;
-}
-
-.settingsBody {
-  min-height: 100vh;
-  margin: 2.5rem 1rem;
-}
-
-.cardHeader {
-  padding: 1.25rem 1rem 1rem 1rem;
-  border-bottom: 1px solid var(--bs-gray-200);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.cardHeader .cardTitle {
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.cardBody {
-  min-height: 180px;
-}
-
-.cardBody .textBox {
-  margin: 0 0 3rem 0;
-  color: var(--bs-secondary);
-}
-
-hr {
-  border: none;
-  height: 1px;
-  background-color: var(--bs-gray-500);
-}
-
-.settingsTabs {
-  display: none;
-}
-
-@media (min-width: 577px) {
-  .settingsDropdown {
-    display: none;
-  }
-}
-
-@media (min-width: 577px) {
-  .settingsTabs {
-    display: block;
-  }
-}
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx
index e4ae5424a6..c7b01138ae 100644
--- a/src/screens/OrgSettings/OrgSettings.tsx
+++ b/src/screens/OrgSettings/OrgSettings.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Dropdown, Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import styles from './OrgSettings.module.css';
+import styles from 'style/app.module.css';
 import OrgActionItemCategories from 'components/OrgSettings/ActionItemCategories/OrgActionItemCategories';
 import OrganizationAgendaCategory from 'components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory';
 import { Navigate, useParams } from 'react-router-dom';
@@ -26,7 +26,7 @@ const settingtabs: SettingType[] = [
  *
  * @returns The rendered component displaying the organization settings.
  */
-function orgSettings(): JSX.Element {
+function OrgSettings(): JSX.Element {
   // Translation hook for internationalization
   const { t } = useTranslation('translation', {
     keyPrefix: 'orgSettings',
@@ -126,4 +126,4 @@ function orgSettings(): JSX.Element {
   );
 }
 
-export default orgSettings;
+export default OrgSettings;
diff --git a/src/style/app.module.css b/src/style/app.module.css
index eb6f370861..fc8a389145 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1,3 +1,8 @@
+:root {
+  --high-contrast-text: #494949;
+  --high-contrast-border: #2c2c2c;
+}
+
 .noOutline input {
   outline: none;
 }
@@ -234,7 +239,7 @@
 .editButton {
   background-color: var(--search-button-bg);
   border-color: var(--search-button-border);
-  color: #555555;
+  color: var(--high-contrast-text);
   margin-left: 2;
 }
 
@@ -242,7 +247,7 @@
   margin-bottom: 10px;
   background-color: var(--search-button-bg);
   border-color: var(--grey-bg-color);
-  color: #555555;
+  color: var(--high-contrast-text);
 }
 
 .addButton:hover {
@@ -443,7 +448,7 @@ hr {
   flex-direction: row;
   font-weight: 900;
   font-size: 16px;
-  color: rgb(80, 80, 80);
+  color: var(--high-contrast-text);
 }
 
 .rankings {
@@ -556,6 +561,57 @@ hr {
   flex-direction: column;
 }
 
+.headerBtn {
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
+}
+
+.settingsContainer {
+  min-height: 100vh;
+}
+
+.settingsBody {
+  min-height: 100vh;
+  margin: 2.5rem 1rem;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--high-contrast-text);
+}
+
+.settingsTabs {
+  display: none;
+}
+
+@media (min-width: 576px) {
+  .settingsDropdown {
+    display: none;
+  }
+}
+
+@media (min-width: 576px) {
+  .settingsTabs {
+    display: block;
+  }
+}
+
 @media (max-width: 1020px) {
   .btnsContainer {
     flex-direction: column;