Merge pull request #4979 from OneCommunityGlobal/Diya_Fix_Dashboard_UI

one-community · web-flow · commit 84e85261b1a8 · 2026-03-11T22:10:24.000-04:00
Diya fix(dashboard): 🔥 Dashboard + Leaderboard UI
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
@@ -176,14 +176,22 @@ function LeaderBoard({
 
   useEffect(() => {
     const checkAbbreviatedView = () => {
-      const isAbbrev = window.innerWidth < window.screen.width * 0.75;
+      const isAbbrev = window.innerWidth < 1500;
       setIsAbbreviatedView(isAbbrev);
     };
 
-    checkAbbreviatedView(); // run on mount
-    window.addEventListener('resize', checkAbbreviatedView);
+    let timer;
+    const debouncedCheck = () => {
+      clearTimeout(timer);
+      timer = setTimeout(checkAbbreviatedView, 200); // increase to 200ms
+    };
 
-    return () => window.removeEventListener('resize', checkAbbreviatedView);
+    checkAbbreviatedView();
+    window.addEventListener('resize', debouncedCheck);
+    return () => {
+      window.removeEventListener('resize', debouncedCheck);
+      clearTimeout(timer);
+    };
   }, []);
 
   const updateOrganizationData = (usersTaks, contUsers) => {
@@ -691,7 +699,7 @@ function LeaderBoard({
               className={`leaderboard table-fixed ${
                 darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
               } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
-              style={{ minWidth: '500px' }}
+              style={{ width: '100%', tableLayout: isAbbreviatedView ? 'fixed' : 'auto' }}
             >
               <thead className="responsive-font-size">
                 <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
@@ -701,12 +709,18 @@ function LeaderBoard({
                   <th style={darkModeStyle}>
                     <div className="d-flex align-items-center">
                       <span className="mr-2">{isAbbreviatedView ? 'Name' : 'Name'}</span>
-                      <span style={{ position: 'relative', top: '2px' }}>
+                      <span
+                        style={{
+                          position: 'relative',
+                          top: isAbbreviatedView ? '-13px' : '2px',
+                          left: isAbbreviatedView ? '10px' : '0px',
+                        }}
+                      >
                         <EditableInfoModal
                           areaName="Leaderboard"
                           areaTitle="Team Members Navigation"
                           role={loggedInUser.role}
-                          fontSize={18}
+                          fontSize={isAbbreviatedView ? 13 : 18}
                           isPermissionPage
                           darkMode={darkMode}
                           className="p-2"
diff --git a/src/components/LeaderBoard/Leaderboard.module.css b/src/components/LeaderBoard/Leaderboard.module.css
@@ -1,25 +1,12 @@
 .leaderboard {
   font-size: 1rem;
-} /*1rem = 16px*/
+}
 
 .my-custom-scrollbar {
   overflow-y: auto;
   margin-bottom: 1rem;
 }
 
-.leaderboard thead th {
-  top: 0;
-  border-top: 10px solid #dee2e6;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: rgb(222, 226, 230);
-}
-
-.leaderboard tbody tr td, 
-.leaderboard thead tr th {
-  text-align: left !important;
-}
-
 .dark-leaderboard-row {
   background-color: #3a506b;
   color: white;
@@ -29,6 +16,7 @@
   background-color: #3a506b;
   color: white;
 }
+
 .dark-leaderboard-row:hover {
   background-color: #111831;
 }
@@ -38,6 +26,7 @@
   color: black;
   display: table-row;
 }
+
 .light-leaderboard-row th {
   background-color: white;
   color: black;
@@ -47,52 +36,63 @@
   background-color: #f0f8ff;
 }
 
+.table-fixed tbody td {
+  white-space: normal; /* Allow text wrapping within cells */
+}
+
+.table-fixed {
+  font-size: 0.93rem;
+  overflow-wrap: break-word;
+}
+
+.leaderboard thead th {
+  top: 0;
+  border-top: 1px solid rgb(222 226 230);
+}
+
+.leaderboard tbody tr td, 
+.leaderboard thead tr th {
+  text-align: left !important;
+}
+
 
 /* Small devices (landscape phones, 544px and up) */
-@media (max-width: 544px) {
+@media (545px <= width <= 1119px) {
   .leaderboard {
     font-size: 0.7rem;
-  } /*1rem = 16px*/
+  }
 
   .my-custom-scrollbar {
     max-height: 500px;
-    overflow: scroll;
+    overflow: auto;
     margin-bottom: 1rem;
   }
 
   .leaderboard thead th {
+    white-space: nowrap; 
     top: 0;
-    border-top: 10px solid #dee2e6;
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: rgb(222, 226, 230);
+    border-top: 1px solid rgb(222 226 230);
   }
 }
+
 .row {
   width: 97%;
 }
 
-.table-fixed tbody td {
-  white-space: normal; /* Allow text wrapping within cells */
-}
-
-.table-fixed {
-  font-size: 0.93rem;
-  word-break: break-word;
-}
-
-.animation {
-  animation: l-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-}
 @keyframes l-animation {
   0% {
     transform: rotate(0deg);
   }
+  
   100% {
     transform: rotate(360deg);
   }
 }
 
+.animation {
+  animation: l-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
 .leaderboardTotalsTitle {
   color: #339cff;
   font-weight: bold;
@@ -103,13 +103,12 @@
   flex-direction: column;
 }
 
-@media screen and (max-width: 544px) {
+@media (width <= 980px) {
   .responsive-font-size {
-    font-size: 0.75rem !important;
+    font-size: 0.5rem !important;
   }
 }
 
-
 .leaderboard.abbreviated-mode thead th {
   font-size: 0.75rem;
   white-space: nowrap;
@@ -120,6 +119,7 @@
   padding: 0.5rem 0.3rem;
   vertical-align: middle;
 }
+
 .trophyTextWhite {
   color: #fff;
 }
diff --git a/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx b/src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
@@ -139,7 +139,7 @@ describe('Leaderboard page structure', () => {
 
   it('displays correct Total Time label and value', () => {
     renderWithProvider(<Leaderboard {...props} />);
-    const header = screen.getByText('Total Time');
+    const header = screen.getByRole('columnheader', { name: /Tot(al|\.) Time/i });
     expect(header).toBeInTheDocument();
 
     const timeValue = screen.getByTitle('Tangible + Intangible time = Total time');
diff --git a/src/components/TeamMemberTasks/ReviewButton.jsx b/src/components/TeamMemberTasks/ReviewButton.jsx
@@ -451,15 +451,6 @@ function ReviewButton({ user, task, updateTask }) {
   const buttonFormat = () => {
     if (user.personId === myUserId && reviewStatus === 'Unsubmitted') {
       return (
-        // <Button
-        //   className={style['reviewBtn']}
-        //   color="primary"
-        //   onClick={toggleModal}
-        //   style={darkMode ? boxStyleDark : boxStyle}
-        //   disabled={isSubmitting}
-        // >
-        //   Submit for Review
-        // </Button>
         <button
           className={`${style.reviewBtn} btn btn-primary`}
           onClick={toggleModal}
diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -314,7 +314,6 @@ const TeamMemberTask = React.memo(
                                 style={{
                                   fontSize: 24,
                                   cursor: 'pointer',
-                                  marginLeft: 6,
                                   color: darkMode ? 'lightgray' : 'black',
                                 }}
                                 title="Click to see user's timelog"
@@ -325,7 +324,6 @@ const TeamMemberTask = React.memo(
                                 fontSize: 16,
                                 cursor: 'pointer',
                                 color: darkMode ? 'lightgray' : 'black',
-                                marginLeft: 6,
                                 paddingTop: 15,
                               }}
                               title="Number of weeks this person has completed, based on the total weekly summaries they’ve submitted."
@@ -336,7 +334,11 @@ const TeamMemberTask = React.memo(
                           {user.role !== 'Volunteer' && (
                             <div
                               className="user-role"
-                              style={{ fontSize: '14px', color: darkMode ? 'lightgray' : 'gray' }}
+                              style={{
+                                fontSize: '14px',
+                                color: darkMode ? 'lightgray' : 'gray',
+                                textAlign: 'center',
+                              }}
                             >
                               {user.role}
                             </div>
@@ -499,6 +501,12 @@ const TeamMemberTask = React.memo(
                           </td>
                           <td
                             data-label="Time"
+                            style={{
+                              textAlign: 'center',
+                              verticalAlign: 'middle',
+                              width: '50%',
+                              whiteSpace: 'nowrap',
+                            }}
                             className={`${styles['team-clocks']} ${darkMode ? 'text-light' : ''}`}
                           >
                             <u className={darkMode ? styles['dashboard-team-clocks'] : ''}>
diff --git a/src/components/TeamMemberTasks/reviewButton.module.css b/src/components/TeamMemberTasks/reviewButton.module.css
@@ -12,8 +12,8 @@
   flex: 0 0 auto;
   z-index: 1000;
   position: relative;
+  font-size: 12px;
 
-  --bs-btn-font-size: 12px;
   --bs-btn-padding-y: 8px;
   --bs-btn-padding-x: 8px;
   
@@ -34,7 +34,7 @@
   display: inline-flex;
   align-items: center;
   margin-top: 6px;
-  font-size: 14px !important;
+  font-size: 12px;
   font-weight: 500;
   line-height: 20px;
   padding: 6px 14px !important;
diff --git a/src/components/TeamMemberTasks/style.module.css b/src/components/TeamMemberTasks/style.module.css
@@ -114,7 +114,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 10px;
 }
 
 .team-member-tasks .team-member-tasks-headers {
@@ -247,7 +247,13 @@
 
 .team-clocks {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle !important;
+  gap: 4px;
+  width: 50%;
+  white-space: nowrap;
 }
 
 .team-member-tasks-number {
diff --git a/src/components/common/Clipboard/CopyToClipboard.jsx b/src/components/common/Clipboard/CopyToClipboard.jsx
@@ -19,7 +19,7 @@ const CopyToClipboard = ({ writeText, message }) => {
       icon={faCopy}
       onClick={handleCopyToClipboard}
       color={darkMode ? 'lightgrey' : ''}
-      size="lg"
+      style={{ fontSize: '16px' }}
     />
   );
 };
diff --git a/src/components/common/Clipboard/style.module.css b/src/components/common/Clipboard/style.module.css
@@ -1,4 +1,6 @@
 .copyToClipboard {
   cursor: pointer;
   margin-right: 10px;
+  font-size: 16px;  /* pin it so it never inherits from parent */
+  flex-shrink: 0;   /* prevents it from squishing in flex containers */
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`.copyToClipboard {`
`2`	`2`	`cursor: pointer;`
`3`	`3`	`margin-right: 10px;`
	`4`	`+ font-size: 16px; /* pin it so it never inherits from parent */`
	`5`	`+ flex-shrink: 0; /* prevents it from squishing in flex containers */`
`4`	`6`	`}`