refactored: CSS files in src/screens/OrgSettings(fixes: PalisadoesFou…

…ndation#2523) (PalisadoesFoundation#2610) * refactored: CSS files in src/screens/OrgSettings(fixes: PalisadoesFoundation#2523) * refactored: CSS files in src/screens/OrgSettings(fixes: PalisadoesFoundation#2523) * refactored: CSS files in src/screens/OrgSettings(fixes: PalisadoesFoundation#2523) * refactored: CSS files in src/screens/OrgSettings(fixes: PalisadoesFoundation#2523)
devender18 · Dec 7, 2024 · 657fb78 · 657fb78
1 parent 9d43cd5
commit 657fb78
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 69 deletions.
diff --git 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
diff --git 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/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -299,7 +299,7 @@ function OrganizationDashboard(): JSX.Element {
                     {t('viewAll')}
                   </Button>
                 </div>
-                <Card.Body className={styles.cardBody}>
+                <Card.Body className={styles.containerBody}>
                   {loadingEvent ? (
                     [...Array(4)].map((_, index) => {
                       return <CardItemLoading key={`eventLoading_${index}`} />;
@@ -341,7 +341,7 @@ function OrganizationDashboard(): JSX.Element {
                     {t('viewAll')}
                   </Button>
                 </div>
-                <Card.Body className={styles.cardBody}>
+                <Card.Body className={styles.containerBody}>
                   {loadingPost ? (
                     [...Array(4)].map((_, index) => {
                       return <CardItemLoading key={`postLoading_${index}`} />;
@@ -392,7 +392,7 @@ function OrganizationDashboard(): JSX.Element {
                 </Button>
               </div>
               <Card.Body
-                className={styles.cardBody}
+                className={styles.containerBody}
                 style={{ height: '150px' }}
               >
                 {loadingOrgData ? (
@@ -435,7 +435,7 @@ function OrganizationDashboard(): JSX.Element {
                   {t('viewAll')}
                 </Button>
               </div>
-              <Card.Body className={styles.cardBody} style={{ padding: '0px' }}>
+              <Card.Body className={styles.containerBody} style={{ padding: '0px' }}>
                 {rankingsLoading ? (
                   [...Array(3)].map((_, index) => {
                     return <CardItemLoading key={`rankingLoading_${index}`} />;

diff --git 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,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,19 @@ 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);
@@ -570,7 +588,7 @@ hr {
   font-weight: 600;
 }
 
-.cardBody {
+.containerBody{
   min-height: 180px;
   padding-top: 0;
   max-height: 570px;
@@ -581,17 +599,44 @@ hr {
   scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
 }
 
-.cardBody .emptyContainer {
+.containerBody .emptyContainer {
   display: flex;
   height: 180px;
   justify-content: center;
   align-items: center;
 }
 
-.cardBody .rankings {
+.containerBody .rankings {
   aspect-ratio: 1;
   border-radius: 50%;
   width: 35px;
+
+}
+
+.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) {