OneCommunityGlobal · one-community · Feb 19, 2026 · Oct 28, 2025 · Feb 13, 2026 · Feb 15, 2026
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
@@ -20,10 +20,6 @@
   background-color: #1b2a41;
 }
 
-.riGraphs {
-  display: flex;
-  justify-content: space-around;
-}
 /* Headings */
 .reviewsInsightContainer h1 {
   color: #000000;

diff --git a/src/components/PRPromotions/DisplayBox.jsx b/src/components/PRPromotions/DisplayBox.jsx
@@ -63,7 +63,7 @@ export default function DisplayBox({ onClose }) {
               </th>
               <th>PR Reviewer</th>
               <th>Team Code</th>
-              <th>Team Reviewer Name</th>
+              <th>Team Leader Name</th>
               <th>Weekly PR Counts</th>
             </tr>
           </thead>

diff --git a/src/components/PRPromotions/DisplayBox.module.css b/src/components/PRPromotions/DisplayBox.module.css
@@ -94,30 +94,10 @@
   font-weight: bold;
 }
 
-.color-0 {
-  background-color: #9400d3;
-}
-
-.color-1 {
-  background-color: #4b0082;
-}
-
-.color-2 {
-  background-color: #0000ff;
-}
-
-.color-3 {
-  background-color: #00ff00;
-}
-
-.color-4 {
-  background-color: #ffff00;
-}
-
-.color-5 {
-  background-color: #ff7f00;
-}
-
-.color-6 {
-  background-color: #ff0000;
-}
+.color-0 { background-color: #9400d3; }
+.color-1 { background-color: #4b0082; }
+.color-2 { background-color: #0000ff; }
+.color-3 { background-color: #00ff00; }
+.color-4 { background-color: #ffff00; }
+.color-5 { background-color: #ff7f00; }
+.color-6 { background-color: #ff0000; }
diff --git a/src/components/SummaryBar/SummaryBar.jsx b/src/components/SummaryBar/SummaryBar.jsx
@@ -416,26 +416,31 @@ const SummaryBar = React.forwardRef((props, ref) => {
   };
 
   const renderSummary = () => {
+    // NOT SUBMITTED
     if (!weeklySummary) {
+      // Weekly Summary Not Required
       if (weeklySummaryNotReq) {
         return (
           <div
-            className={`${styles['border-black']} col-4 bg-super-awesome no-gutters d-flex justify-content-center align-items-center`}
+            className={`${styles['border-black']} col-4 ${styles['bg--summary-purple']} no-gutters d-flex justify-content-center align-items-center`}
             style={{ textAlign: 'center' }}
           >
-            <font className={`${styles['text-center']} text-light`} size="3">
+            <font className="text-light" size="3">
               SUMMARY
             </font>
           </div>
         );
       }
+
+      // Summary Required but Not Submitted (!)
       return (
         <div
-          className={`border border-danger col-4 no-gutters ${
-            darkMode ? 'bg-yinmn-blue' : 'bg-white'
+          className={`border border-danger col-4 no-gutters d-flex flex-column justify-content-center ${
+            darkMode ? 'bg-yinmn-blue' : styles['bg--summary-purple']
           }`}
         >
           <div className="py-1"> </div>
+
           {isAuthUser || canEditData() ? (
             <div className="d-flex justify-content-center">
               <button
@@ -455,30 +460,41 @@ const SummaryBar = React.forwardRef((props, ref) => {
               !
             </p>
           )}
-          <font className={`${styles['text-center']}`} size="3">
+
+          <font className={`${styles['text-center']} text-light`} size="3">
             SUMMARY
           </font>
+
           <div className="py-2"> </div>
         </div>
       );
     }
+
+    // SUBMITTED (✓)
     return (
-      <div className={`${styles['border-green']} col-4 ${styles['bg--dark-green']}`}>
+      <div
+        className={`${styles['border-green']} col-4 ${
+          darkMode ? 'bg-yinmn-blue' : styles['bg--summary-purple']
+        }`}
+      >
         <div className="py-1"> </div>
+
         <div className="d-flex justify-content-center">
           <button
             onClick={props.toggleSubmitForm}
-            className={`${styles['text-center']} ${styles.large_text_summary} ${styles['summary-toggle']}`}
+            className={`${styles['text-center']} ${styles.large_text_summary} ${styles['summary-toggle']} text-light`}
             style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
             aria-label="Toggle submit form"
             type="button"
           >
             ✓
           </button>
         </div>
-        <font className={`${styles['text-center']}`} size="3">
+
+        <font className={`${styles['text-center']} text-light`} size="3">
           SUMMARY
         </font>
+
         <div className="py-2"> </div>
       </div>
     );

diff --git a/src/components/SummaryBar/SummaryBar.module.css b/src/components/SummaryBar/SummaryBar.module.css
@@ -262,6 +262,10 @@
   }
 }
 
+.bg--summary-purple {
+  background-color: #5b2aa6; 
+}
+
 .text-center {
   display: flex;
   justify-content: center;

diff --git a/src/components/TeamMemberTasks/ReviewButton.jsx b/src/components/TeamMemberTasks/ReviewButton.jsx
@@ -491,7 +491,9 @@ function ReviewButton({ user, task, updateTask }) {
             </DropdownToggle>
 
             <DropdownMenu
-              className={`${style['review-button-dropdown']} ${darkMode ? 'bg-space-cadet' : ''}`}
+              container="body"
+              strategy="fixed"
+              className={style['review-button-dropdown']}
             >
               {task.relatedWorkLinks &&
                 // eslint-disable-next-line no-shadow
@@ -532,7 +534,9 @@ function ReviewButton({ user, task, updateTask }) {
               Ready for Review
             </DropdownToggle>
             <DropdownMenu
-              className={`${style['review-button-dropdown']} ${darkMode ? 'bg-space-cadet' : ''}`}
+              container="body"
+              strategy="fixed"
+              className={style['review-button-dropdown']}
             >
               {task.relatedWorkLinks &&
                 task.relatedWorkLinks.map(dropLink => (

diff --git a/src/components/TeamMemberTasks/reviewButton.module.css b/src/components/TeamMemberTasks/reviewButton.module.css
@@ -19,10 +19,9 @@
 }
 
 .review-button-dropdown {
-  overflow-y: auto; /* enable scrolling if the dropdown is too long*/
-  z-index: 1000;
-  position:fixed !important;
-  margin-top: -50px;
+  max-height: 240px;       
+  overflow-y: auto;
+  z-index: 9999;   
 }
 
 .reviewBtn-dropdown-wrapper{

diff --git a/src/components/Timer/Countdown.jsx b/src/components/Timer/Countdown.jsx
@@ -309,7 +309,7 @@ export default function Countdown({
                   />
                 )}
               </div>
-              :
+              <span className={css.timeColon}>:</span>
               <div className={css.numberWrapper}>
                 {editing && (
                   <FaAngleUp

diff --git a/src/components/Timer/Countdown.module.css b/src/components/Timer/Countdown.module.css
@@ -146,37 +146,65 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  width: 4.5rem;
-  max-height: 2.5rem;
+  justify-content: center;
+  width: fit-content;
+  max-height: none;
+
+  gap: 0.5rem;
+
+  background-color: transparent; 
   color: white;
-  background-color: rgba(82, 92, 102, 1);
-  border-radius: 0.5rem;
+
   user-select: none;
   transition: all 0.2s ease;
 }
 
 .bottom .goalEditing {
-  width: 4.5rem;
-  max-height: 3rem;
+  max-height: none;
 }
 
 .bottom .goal input {
+  position: relative;
+  z-index: 1;
+
+  width: 100%;
+  height: 100%;
+
+  margin: 0;
+  padding: 0;           
   border: none;
-  background-color: transparent;
-  height: 3rem;
-  width: 2rem;
-  color: white;
-  outline: none;
-  padding: 0;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+
+  background-color: #ffffff !important;
+  color: #111111 !important;           
+  opacity: 1 !important;               
+
   text-align: center;
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.bottom .timeColon {
+  display: flex;
+  align-items: center;
+  height: 3.25rem;
+  font-size: 2rem;
+  font-weight: bolder;
+  line-height: 1;
+  color: white;
 }
 
 .goal .numberWrapper {
   position: relative;
-  line-height: 1rem;
+  width: 3.25rem;
+  height: 3.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+
 .up {
   position: absolute;
   top: 0.2rem;

diff --git a/src/components/UserManagement/ResetPasswordButton.jsx b/src/components/UserManagement/ResetPasswordButton.jsx
@@ -5,6 +5,7 @@ import { boxStyle } from '../../styles';
 import { resetPassword } from '../../services/userProfileService';
 import { cantUpdateDevAdminDetails } from '../../utils/permissions';
 import ResetPasswordPopup from './ResetPasswordPopup';
+import styles from './usermanagement.module.css'
 
 class ResetPasswordButton extends React.PureComponent {
   constructor(props) {
@@ -83,7 +84,7 @@ class ResetPasswordButton extends React.PureComponent {
           <Button
             outline={!this.props.darkMode}
             color="primary"
-            className={`btn  btn-outline-success mr-1${this.props.isSmallButton ? ' btn-sm' : ''}`}
+            className={`${styles.userManagementCellControl} btn  btn-outline-success mr-1${this.props.isSmallButton ? ' btn-sm' : ''}`}
             style={
               this.props.darkMode
                 ? { boxShadow: '0 0 0 0', minWidth: '115px', fontWeight: 'bold', backgroundColor: '#3a506b' }

diff --git a/src/components/UserManagement/SetUpFinalDayButton.jsx b/src/components/UserManagement/SetUpFinalDayButton.jsx
@@ -4,6 +4,7 @@ import { boxStyle } from '../../styles';
 import SetUpFinalDayPopUp from './SetUpFinalDayPopUp';
 import { SET_FINAL_DAY, CANCEL } from '../../languages/en/ui';
 import { scheduleDeactivationAction, activateUserAction } from '../../actions/userLifecycleActions';
+import styles from './usermanagement.module.css';
 
 function SetUpFinalDayButton(props) {
   const { darkMode, userProfile, loadUserProfile, hasFinalDay } = props;
@@ -42,7 +43,7 @@ function SetUpFinalDayButton(props) {
       />
       <button
         type="button"
-        className={`btn btn-outline-${hasFinalDay ? 'warning' : 'success'} btn-sm`}
+        className={`${styles.userManagementCellControl} btn btn-outline-${hasFinalDay ? 'warning' : 'success'} btn-sm`}
         onClick={handleButtonClick}
         style={{
           ...darkMode ? { boxShadow: '0 0 0 0', fontWeight: 'bold' } : boxStyle,

diff --git a/src/components/UserManagement/UserManagement.jsx b/src/components/UserManagement/UserManagement.jsx
@@ -718,8 +718,7 @@ class UserManagement extends React.PureComponent {
             handleSetupHistoryPopup={this.handleSetupHistoryPopup}
             darkMode={darkMode}
           />
-
-          <div className="table-responsive" id="user-management-table">
+          <div className={`table-responsive ${styles.userManagementTable}`}>
             <Table
               className={`table table-bordered ${styles.noWrap} ${
                 darkMode ? 'text-light bg-yinmn-blue' : ''

diff --git a/src/components/UserManagement/UserSearchPanel.jsx b/src/components/UserManagement/UserSearchPanel.jsx
@@ -7,6 +7,7 @@ import { Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { boxStyle, boxStyleDark } from '../../styles';
 import hasPermission from '../../utils/permissions';
 import { SEARCH, SHOW, CREATE_NEW_USER, SEND_SETUP_LINK } from '../../languages/en/ui';
+import styles from './usermanagement.module.css';
 
 const setupHistoryTooltip = <Tooltip id="tooltip">Setup History Modal</Tooltip>;
 
@@ -29,7 +30,7 @@ function UserSearchPanel({
   const [tooltipCreateNewUserOpen, setTooltipCreateNewUserOpen] = useState(false);
   const toggleCreateNewUserTooltip = () => setTooltipCreateNewUserOpen(!tooltipCreateNewUserOpen);
   return (
-    <div className="input-group mt-3" id="new_usermanagement">
+    <div className={`input-group mt-3 ${styles.new_user_management}`}>
       <button
         type="button"
         disabled={!canCreateUsers}