From 557923de0b215c3f49f44d27246df1584e23dce1 Mon Sep 17 00:00:00 2001
From: Swathi Angadi <angadiswathi119@gmail.com>
Date: Tue, 12 May 2026 23:13:52 -0700
Subject: [PATCH 1/2] Initial code changes

---
 src/components/Collaboration/Main.jsx  | 33 ++++++++++++++++++++++++++
 src/components/Collaboration/index.jsx |  4 ++--
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Collaboration/Main.jsx

diff --git a/src/components/Collaboration/Main.jsx b/src/components/Collaboration/Main.jsx
new file mode 100644
index 0000000000..c6d6027452
--- /dev/null
+++ b/src/components/Collaboration/Main.jsx
@@ -0,0 +1,33 @@
+import { useEffect, useState, useMemo, useRef } from 'react';
+import styles from './Collaboration.module.css';
+import WhatWeDoSection from '../WhatWeDo/WhatWeDo';
+import Collaboration from './Collaboration';
+
+export default function Main() {
+  const [activeTab, setActiveTab] = useState('jobPostings');
+  return (
+    <>
+      <nav className={styles.navbar}>
+        <div className={styles.navTabs}>
+          <button
+            className={activeTab === 'whatWeDo' ? styles.activeTab : styles.tabButton}
+            onClick={() => setActiveTab('whatWeDo')}
+          >
+            What We Do
+          </button>
+
+          <button
+            className={activeTab === 'jobPostings' ? styles.activeTab : styles.tabButton}
+            onClick={() => setActiveTab('jobPostings')}
+          >
+            Job Postings
+          </button>
+        </div>
+      </nav>
+      <div>
+        {/* render based on active tab */}
+        {activeTab === 'whatWeDo' ? <WhatWeDoSection /> : <Collaboration />}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Collaboration/index.jsx b/src/components/Collaboration/index.jsx
index b370578f1d..d23b9bd676 100644
--- a/src/components/Collaboration/index.jsx
+++ b/src/components/Collaboration/index.jsx
@@ -1,2 +1,2 @@
-import Collaboration from './Collaboration';
-export default Collaboration;
+import Main from './Main';
+export default Main;

From 0e36e3fc3c68d9321ee7092fefdc080e01392fe8 Mon Sep 17 00:00:00 2001
From: Swathi Angadi <angadiswathi119@gmail.com>
Date: Thu, 14 May 2026 01:14:33 -0700
Subject: [PATCH 2/2] Final Changes along with Dark mode changes

---
 .../Collaboration/Collaboration.jsx           |  7 ---
 .../Collaboration/Collaboration.module.css    | 26 ++++++++++-
 src/components/Collaboration/Main.jsx         |  8 +++-
 src/components/WhatWeDo/WhatWeDo.jsx          |  4 +-
 src/components/WhatWeDo/WhatWeDo.module.css   | 43 +++++++++++--------
 5 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/components/Collaboration/Collaboration.jsx b/src/components/Collaboration/Collaboration.jsx
index 5655ecad77..c1ff2d4e55 100644
--- a/src/components/Collaboration/Collaboration.jsx
+++ b/src/components/Collaboration/Collaboration.jsx
@@ -4,7 +4,6 @@ import styles from './Collaboration.module.css';
 import { toast } from 'react-toastify';
 import { ApiEndpoint } from '~/utils/URL';
 import { useSelector } from 'react-redux';
-import OneCommunityImage from '../../assets/images/logo2.png';
 
 const ADS_PER_PAGE = 18;
 
@@ -205,12 +204,6 @@ function Collaboration() {
   /* ================= MAIN VIEW ================= */
   return (
     <div className={`${styles.jobLanding} ${darkMode ? styles.dark : ''}`}>
-      <div className={styles.jobHeader}>
-        <a href="https://www.onecommunityglobal.org/collaboration/">
-          <img src={OneCommunityImage} alt="One Community Logo" />
-        </a>
-      </div>
-
       <div className={styles.userCollaborationContainer}>
         {/* NAVBAR */}
         <nav className={styles.navbar}>
diff --git a/src/components/Collaboration/Collaboration.module.css b/src/components/Collaboration/Collaboration.module.css
index 9a39200e38..66814fabf1 100644
--- a/src/components/Collaboration/Collaboration.module.css
+++ b/src/components/Collaboration/Collaboration.module.css
@@ -8,7 +8,7 @@
 }
 
 .userCollaborationContainer {
-  width: 90%;
+  width: 100%;
   margin: 0 auto;
   background-color: #fff;
   border-radius: 10px;
@@ -405,3 +405,27 @@
   color: var(--text-primary);
 }
 
+.navTabs {
+  display: flex;
+  flex-direction: row;
+  gap: 3rem;
+}
+
+.tabButton {
+  font-size: large;
+  font-weight: bold;
+  color: #808080;
+  text-transform: uppercase;
+}
+
+.activeTab {
+  font-size: large;
+  font-weight: bold;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+:global(body.dark-mode) .tabButton,
+:global(body.bm-dashboard-dark) .tabButton {
+  color: #808080 !important;
+}
\ No newline at end of file
diff --git a/src/components/Collaboration/Main.jsx b/src/components/Collaboration/Main.jsx
index c6d6027452..88b7fe6b81 100644
--- a/src/components/Collaboration/Main.jsx
+++ b/src/components/Collaboration/Main.jsx
@@ -1,12 +1,18 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useState } from 'react';
 import styles from './Collaboration.module.css';
 import WhatWeDoSection from '../WhatWeDo/WhatWeDo';
 import Collaboration from './Collaboration';
+import OneCommunityImage from '../../assets/images/logo2.png';
 
 export default function Main() {
   const [activeTab, setActiveTab] = useState('jobPostings');
   return (
     <>
+      <div className={styles.jobHeader}>
+        <a href="https://www.onecommunityglobal.org/collaboration/">
+          <img src={OneCommunityImage} alt="One Community Logo" />
+        </a>
+      </div>
       <nav className={styles.navbar}>
         <div className={styles.navTabs}>
           <button
diff --git a/src/components/WhatWeDo/WhatWeDo.jsx b/src/components/WhatWeDo/WhatWeDo.jsx
index 4c21257d91..5cbac3081e 100644
--- a/src/components/WhatWeDo/WhatWeDo.jsx
+++ b/src/components/WhatWeDo/WhatWeDo.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import styles from './WhatWeDo.module.css';
 
 const sections = [
@@ -62,6 +63,7 @@ const sections = [
 ];
 
 function WhatWeDoSection() {
+  const darkMode = useSelector(state => state.theme.darkMode);
   return (
     <div className={styles.whatWeDoContainer}>
       <h2>What We Do</h2>
@@ -70,7 +72,7 @@ function WhatWeDoSection() {
           <a
             key={idx}
             href={section.link}
-            className={styles.whatWeDoItem}
+            className={`${styles.whatWeDoItem} ${darkMode ? styles.dark : ''}`}
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/src/components/WhatWeDo/WhatWeDo.module.css b/src/components/WhatWeDo/WhatWeDo.module.css
index 8c3f5ccf84..3862ece3f7 100644
--- a/src/components/WhatWeDo/WhatWeDo.module.css
+++ b/src/components/WhatWeDo/WhatWeDo.module.css
@@ -3,23 +3,24 @@
   text-align: left;
   max-width: 1200px;
   margin: 0 auto;
-  overflow-x: hidden; /* Prevent horizontal overflow */
+  overflow-x: hidden;
 }
 
 .whatWeDoContainer h2 {
   font-size: 2rem;
   color: #333;
   margin-bottom: 16px;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .whatWeDoGrid {
   display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(320px, 1fr)
-  ); /* Increased min-width for longer text */
-  gap: 20px; /* Increased gap for better spacing */
+
+  /* Increased min-width for longer text */
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+
+  /* Increased gap for better spacing */
+  gap: 20px;
   margin-top: 16px;
   width: 100%;
 }
@@ -27,21 +28,24 @@
 .whatWeDoItem {
   display: flex;
   align-items: flex-start;
-  gap: 16px; /* Increased gap between image and text */
+
+  /* Increased gap between image and text */
+  gap: 16px;
   text-decoration: none;
   color: inherit;
-  padding: 16px; /* Increased padding */
+  padding: 16px;
   border-radius: 8px;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
   min-width: 0;
   overflow: hidden;
-  min-height: fit-content; /* Allow natural height expansion */
+  min-height: fit-content;
 }
 
 .whatWeDoItem:hover {
   background-color: #f5f5f5;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
 }
 
 .whatWeDoItem img {
@@ -60,7 +64,7 @@
 }
 
 .whatWeDoText h3 {
-  margin: 0 0 12px 0; /* Increased margin */
+  margin: 0 0 12px 0;
   font-size: 1.1rem;
   color: #333;
   line-height: 1.3;
@@ -72,12 +76,16 @@
   margin: 0;
   font-size: 0.85rem;
   color: #666;
-  line-height: 1.5; /* Improved line height for readability */
+  line-height: 1.5;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
 }
 
+.dark:hover {
+  background-color: #304052;
+}
+
 /* Improved responsive breakpoints */
 @media (max-width: 1024px) {
   .whatWeDoGrid {
@@ -115,22 +123,23 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: 20px; /* More padding for mobile */
+    padding: 20px;
   }
 
   .whatWeDoItem img {
-    width: 100px; /* Larger image on mobile since text is below */
+    width: 100px;
     height: 100px;
     margin-bottom: 16px;
   }
 
   .whatWeDoText h3 {
-    font-size: 1.2rem; /* Larger heading on mobile */
+    font-size: 1.2rem;
+    /* Larger heading on mobile */
     margin-bottom: 12px;
   }
 
   .whatWeDoText p {
-    font-size: 0.9rem; /* Slightly larger text for better readability */
+    font-size: 0.9rem;
     line-height: 1.6;
   }
 }
@@ -186,4 +195,4 @@
   .whatWeDoItem:active {
     background-color: #f0f0f0;
   }
-}
+}
\ No newline at end of file