Julia - Fix dashboard responsiveness - Merge to development

src/components/Header/Header.jsx

@@ -160,7 +160,6 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-   const [isAckLoading, setIsAckLoading] = useState(false);
   const unreadNotifications = props.notification?.unreadNotifications; // List of unread notifications
   const dispatch = useDispatch();
   const history = useHistory();

src/components/LeaderBoard/Leaderboard.jsx

@@ -672,7 +672,7 @@ function LeaderBoard({
               </div>
             </Alert>
           )}
-          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+          <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y mb-5">
             <div className="search-container mx-1">
               <input
                 className={`form-control col-12 mb-2 ${
@@ -689,6 +689,7 @@ function LeaderBoard({
               className={`leaderboard table-fixed ${
                 darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
               } ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
+              style={{ minWidth: '500px' }}
             >
               <thead className="responsive-font-size">
                 <tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>

src/components/Projects/AddProject/AddProject.jsx

@@ -151,12 +151,13 @@ const AddProject = (props) => {
     <div>
       <button
         type="button"
-        className="btn btn-outline-success"
+        className="btn btn-outline-success m-2"
         onClick={toggleModal}
         style={{
           borderColor: '#8ec233',
           color: '#8ec233',
           borderWidth: '1px',
+          marginBottom: '10px'
         }}
       >
         <i className="fa fa-plus" aria-hidden="true"></i> Add New Project

src/components/Projects/Overview/Overview.jsx

@@ -5,22 +5,22 @@
  ********************************************************************************/
 import React from 'react';
 import { TOTAL_PROJECTS, ACTIVE_PROJECTS } from './../../../languages/en/ui';
-import "./Overview.css"
+import styles from "./Overview.module.css"
 
 const Overview = props => {
   return (
     <div className="projects__overview--top">
-      <div className="card" id="card_project">
-        <div className="card-body">
-          <h6 className='card-text ml-3'>
+      <div className={`${styles["card_project"]} m-2`} id="card_project">
+        <div className={`${styles["card-body"]} card-body`}>
+          <h6 className={`${styles["card-text"]} card-text ml-3`}>
             <i className="fa fa-folder" aria-hidden="true"></i> {TOTAL_PROJECTS}: {props.numberOfProjects}
           </h6>
         </div>
       </div>
 
-      <div className="card" id="card_active">
-        <div className="card-body">
-          <h6 className='card-text ml-3'>
+      <div className={`${styles["card_active"]} m-2`} id="card_active">
+        <div className={`${styles["card-body"]} card-body`}>
+          <h6 className={`${styles["card-text"]} card-text ml-3`}>
             <i className="fa fa-circle fa-circle-isActive" aria-hidden="true"></i> {ACTIVE_PROJECTS}: {props.numberOfActive}
           </h6>
         </div>

src/components/Projects/Overview/Overview.css → src/components/Projects/Overview/Overview.module.css

@@ -1,26 +1,27 @@
-.card#card_project {
+.card_project {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(to bottom, #87CEEB, #1E90FF, #4169E1);
+    background: linear-gradient(to bottom, #87CEEB, #1E90FF, #4169E1) !important;
     border-radius: 8px;
     height: 40px;
     width: 300px;
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
+    float: left;
   }
 
-  .card#card_active {
+  .card_active {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(to bottom, #FFD700, #FFA500, #FF8C00);
+    background: linear-gradient(to bottom, #FFD700, #FFA500, #FF8C00) !important;
     border-radius: 8px;
     height: 40px;
     width: 300px;
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
   }
 

src/components/Projects/Projects.jsx

@@ -283,9 +283,9 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
   return (
     <>
       <div className={darkMode ? 'bg-oxford-blue text-light' : ''}>
-        <div className="container py-3 border border-secondary rounded" style={darkMode ? { backgroundColor: '#1B2A41' } : {}}>
+        <div className="container py-3 mb-5 border border-secondary rounded" style={darkMode ? { backgroundColor: '#1B2A41' } : {}}>
           {fetching || !fetched ? <Loading align="center" /> : null}
-          <div className="d-flex justify-content-center align-items-center">
+          <div className="d-flex align-items-center flex-wrap w-100">
             <h3 style={{ display: 'inline-block', marginRight: 10 }}>Projects</h3>
             <EditableInfoModal
               areaName="projectsInfoModal"
@@ -300,7 +300,7 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
         </div>
 
         <SearchProjectByPerson onSearch={handleSearchName} />
-
+        <div style={{ overflowX: 'auto', overflowY: 'auto',  maxHeight: '500px' }}>
         <table className="table table-bordered table-responsive-sm">
           <thead>
             <ProjectTableHeader
@@ -315,6 +315,7 @@ const projectFetchStatus = useSelector(state => state.allProjects.status);
           </thead>
           <tbody className={darkMode ? 'bg-yinmn-blue dark-mode' : ''}>{projectList}</tbody>
         </table>
+        </div>
       </div>
 
       <ModalTemplate