task/WG-232-React-Listing-UI-clean

react/package.json

@@ -36,6 +36,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "@reduxjs/toolkit": "^1.8.4",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",

react/src/components/Projects/ProjectListing.module.css

@@ -0,0 +1,46 @@
+.root{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.projectList {
+  height: 270px;
+  border-collapse: collapse;
+  align-self: center;
+  overflow-y: scroll;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.projectHeader, .projectHeader th {
+  background: #d0d0d0;
+  position: sticky; 
+  top: 0;
+  z-index: 1;
+}
+
+.projectListItemButton{
+  cursor: pointer;
+  color: initial;
+  margin-right: 10px;
+}
+
+.projectListItemButton:hover{
+  color: #666;
+}
+
+.mapColumn {
+width: 30%;
+}
+.projectColumn {
+width: 60%;
+}
+.buttonColumn {
+  white-space: nowrap;
+}
+
+.projectName {
+  max-width: fit-content;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

react/src/components/Projects/ProjectListing.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { useProjectsWithDesignSafeInformation } from '../../hooks';
 import { Button, LoadingSpinner, Icon } from '../../core-components';
+import styles from './ProjectListing.module.css';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import { useNavigate } from 'react-router-dom';
 
-export const ProjectListing: React.FC = () => {
+const ProjectListing: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
 
@@ -20,47 +21,54 @@ export const ProjectListing: React.FC = () => {
 
   if (isLoading) {
     return <LoadingSpinner />;
-  }
+  };
 
   if (isError) {
     return <h4>Unable to retrieve projects</h4>;
-  }
+  };
 
   return (
-    <>
-      <table>
-        <thead>
-          <tr>
-            <th>Map</th>
-            <th>Project</th>
-            <th>
-              <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
-              <Button onClick={toggleModal} size="small">
-                Create a New Map
-              </Button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {data?.map((proj) => (
-            <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
-              <td>{proj.name}</td>
-              <td>
-                {proj.ds_project?.value.projectId}{' '}
-                {proj.ds_project?.value.title}
-              </td>
-              <td>
-                <Button>
-                  <Icon name="edit-document"></Icon>
-                </Button>
-                <Button>
-                  <Icon name="trash"></Icon>
+    <div className={styles.root}>
+      <div className={styles.projectList}>
+        <table>
+          <thead className={styles.projectHeader}>
+            <tr>
+              <th className={styles.mapColumn}>Map</th>
+              <th className={styles.projectColumn}>Project</th>
+              <th className={styles.buttonColumn}>
+                <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
+                <Button
+                  onClick={toggleModal}
+                  type="link"
+                  className={styles.projectListItemButton}
+                >
+                  <Icon name="add"/>Create a New Map
                 </Button>
-              </td>
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-    </>
+          </thead>
+          <tbody>
+            {data?.map((proj) => (
+              <tr  key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
+                <td className={styles.projectName}>{proj.name}</td>
+                <td>
+                  {proj.ds_project?.value.projectId}{' - '}
+                  {proj.ds_project?.value.title}
+                </td>
+                <td >
+                  <Button type="link" className={styles.projectListItemButton}>
+                    <Icon name="edit-document"></Icon>
+                  </Button>
+                  <Button type="link" className={styles.projectListItemButton}>
+                    <Icon name="trash"></Icon>
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
   );
 };
+export default ProjectListing;

react/src/components/Projects/index.ts

@@ -1 +1 @@
-export { ProjectListing } from './ProjectListing';
+export { default } from './ProjectListing';

react/src/hazmapper.css

@@ -1,5 +1,7 @@
-@import url('@tacc/core-styles/dist/core-styles.base.css');
-@import url('@tacc/core-styles/dist/core-styles.portal.css');
+@import "leaflet/dist/leaflet.css";
+@import "@fortawesome/fontawesome-free/css/all.css";
+@import url('https://fonts.googleapis.com/css?family=Raleway');
+@import url('https://unpkg.com/[email protected]/dist/mapillary.min.css');
 
 /* for hazmapper specific overwrites of base and portal styles" like,
 
@@ -8,3 +10,17 @@
 }
 
 */
+
+
+/* CSS module styles taken from Angular styles.styl */
+:root {
+  --global-font-family: 'Raleway', san-serif;
+}
+html,
+body {
+  height: 100%;
+  font-family: var(--global-font-family);
+}
+table, form, button {
+  font-family: inherit;
+}

react/src/index.css

@@ -3,7 +3,7 @@
 /* prettier-ignore */
 @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
 
-@import url('@tacc/core-styles/dist/core-styles.base.css'); /* layer(base);*/
-@import url('@tacc/core-styles/dist/core-styles.portal.css'); /* layer(base);*/
+@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base);
+@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base);
 
 @import url('./hazmapper.css') layer(project);

react/src/pages/MainMenu/MainMenu.tsx

@@ -7,8 +7,7 @@ import {
 } from '../../core-components';
 import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
 import { SystemSelect } from '../../components/Systems';
-import { ProjectListing } from '../../components/Projects/ProjectListing';
-
+import ProjectListing from '../../components/Projects';
 function MainMenu() {
   const {
     data: userData,