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

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';

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;

src/style/app.module.css

@@ -1,3 +1,8 @@
+:root {
+  --high-contrast-text: #494949;
+  --high-contrast-border: #2c2c2c;
+}
+
 .noOutline input {
   outline: none;
 }
@@ -234,15 +239,15 @@
 .editButton {
   background-color: var(--search-button-bg);
   border-color: var(--search-button-border);
-  color: #555555;
+  color: var(--high-contrast-text);
   margin-left: 2;
 }
 
 .addButton {
   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;