[BHBC-1329] Survey Names Should be Left Justified

bcgov · Sep 27, 2021 · e189da1 · e189da1
1 parent d5b8f18
commit e189da1
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 99 deletions.
diff --git a/app/src/components/attachments/AttachmentsList.tsx b/app/src/components/attachments/AttachmentsList.tsx
@@ -1,17 +1,19 @@
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import Link from '@material-ui/core/Link';
 import Paper from '@material-ui/core/Paper';
-import makeStyles from '@material-ui/core/styles/makeStyles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
 import { mdiLockOutline, mdiLockOpenVariantOutline, mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
-import clsx from 'clsx';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import { DialogContext } from 'contexts/dialogContext';
 import { useBiohubApi } from 'hooks/useBioHubApi';
@@ -20,17 +22,13 @@ import React, { useContext, useState } from 'react';
 import { handleChangePage, handleChangeRowsPerPage } from 'utils/tablePaginationUtils';
 import { getFormattedDate, getFormattedFileSize } from 'utils/Utils';
 
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650
-  },
-  heading: {
-    fontWeight: 'bold'
-  },
-  tableCellBorderTop: {
-    borderTop: '1px solid rgba(224, 224, 224, 1)'
+const useStyles = makeStyles((theme: Theme) => ({
+  attachmentsTable: {
+    '& .MuiTableCell-root': {
+      verticalAlign: 'middle'
+    }
   }
-});
+}));
 
 export interface IAttachmentsListProps {
   projectId: number;
@@ -183,13 +181,13 @@ const AttachmentsList: React.FC<IAttachmentsListProps> = (props) => {
     <>
       <Paper>
         <TableContainer>
-          <Table className={classes.table} aria-label="attachments-list-table">
+          <Table className={classes.attachmentsTable} aria-label="attachments-list-table">
             <TableHead>
               <TableRow>
-                <TableCell className={classes.heading}>Name</TableCell>
-                <TableCell className={classes.heading}>Last Modified</TableCell>
-                <TableCell className={classes.heading}>File Size</TableCell>
-                <TableCell className={classes.heading}>Security Status</TableCell>
+                <TableCell>Name</TableCell>
+                <TableCell>Last Modified</TableCell>
+                <TableCell>File Size</TableCell>
+                <TableCell>Security Status</TableCell>
                 <TableCell></TableCell>
               </TableRow>
             </TableHead>
@@ -205,23 +203,30 @@ const AttachmentsList: React.FC<IAttachmentsListProps> = (props) => {
                     <TableCell>{getFormattedDate(DATE_FORMAT.ShortDateFormatMonthFirst, row.lastModified)}</TableCell>
                     <TableCell>{getFormattedFileSize(row.size)}</TableCell>
                     <TableCell>
-                      <IconButton
-                        color="primary"
-                        aria-label="toggle-attachment-security-status"
-                        data-testid="toggle-attachment-security-status"
-                        onClick={() => showToggleSecurityStatusAttachmentDialog(row)}>
-                        <Icon path={row.securityToken ? mdiLockOutline : mdiLockOpenVariantOutline} size={1} />
-                      </IconButton>
-                      {row.securityToken ? 'Secured' : 'Unsecured'}
+                      <Box my={-1}>
+                        <Button
+                          color="primary"
+                          variant="text"
+                          startIcon={
+                            <Icon path={row.securityToken ? mdiLockOutline : mdiLockOpenVariantOutline} size={1} />
+                          }
+                          aria-label="toggle attachment security status"
+                          data-testid="toggle-attachment-security-status"
+                          onClick={() => showToggleSecurityStatusAttachmentDialog(row)}>
+                          {row.securityToken ? 'Secured' : 'Unsecured'}
+                        </Button>
+                      </Box>
                     </TableCell>
-                    <TableCell align="right" className={clsx(index === 0 && classes.tableCellBorderTop)}>
-                      <IconButton
-                        color="primary"
-                        aria-label="delete-attachment"
-                        data-testid="delete-attachment"
-                        onClick={() => showDeleteAttachmentDialog(row)}>
-                        <Icon path={mdiTrashCanOutline} size={1} />
-                      </IconButton>
+                    <TableCell align="right">
+                      <Box my={-1}>
+                        <IconButton
+                          color="primary"
+                          aria-label="delete attachment"
+                          data-testid="delete-attachment"
+                          onClick={() => showDeleteAttachmentDialog(row)}>
+                          <Icon path={mdiTrashCanOutline} size={1} />
+                        </IconButton>
+                      </Box>
                     </TableCell>
                   </TableRow>
                 ))}

diff --git a/app/src/components/surveys/SurveysList.tsx b/app/src/components/surveys/SurveysList.tsx
@@ -20,15 +20,6 @@ import { handleChangeRowsPerPage, handleChangePage } from 'utils/tablePagination
 import { useHistory } from 'react-router';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  table: {
-    minWidth: 650
-  },
-  heading: {
-    fontWeight: 'bold'
-  },
-  tableCellBorderTop: {
-    borderTop: '1px solid rgba(224, 224, 224, 1)'
-  },
   chip: {
     padding: '0px 8px',
     borderRadius: '4px',
@@ -75,18 +66,18 @@ const SurveysList: React.FC<ISurveysListProps> = (props) => {
       chipStatusClass = classes.chipPublishedCompleted;
     }
 
-    return <Chip className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
+    return <Chip size="small" className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
   };
 
   return (
     <Paper>
       <TableContainer>
-        <Table className={classes.table} aria-label="surveys-list-table">
+        <Table aria-label="surveys-list-table">
           <TableHead>
             <TableRow>
-              <TableCell className={classes.heading}>Name</TableCell>
-              <TableCell className={classes.heading}>Species</TableCell>
-              <TableCell className={classes.heading}>Timeline</TableCell>
+              <TableCell>Name</TableCell>
+              <TableCell>Species</TableCell>
+              <TableCell>Timeline</TableCell>
               <TableCell>Completion Status</TableCell>
               <TableCell>Publish Status</TableCell>
             </TableRow>

diff --git a/app/src/features/projects/list/ProjectsListPage.tsx b/app/src/features/projects/list/ProjectsListPage.tsx
@@ -108,7 +108,7 @@ const ProjectsListPage: React.FC = () => {
       chipStatusClass = classes.chipDraft;
     }
 
-    return <Chip className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
+    return <Chip size="small" className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
   };
 
   const navigateToCreateProjectPage = (draftId?: number) => {

diff --git a/app/src/features/projects/list/__snapshots__/ProjectsListPage.test.tsx.snap b/app/src/features/projects/list/__snapshots__/ProjectsListPage.test.tsx.snap
@@ -188,10 +188,10 @@ exports[`ProjectsListPage renders with a list of drafts 1`] = `
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-52 makeStyles-chipDraft-56"
+                    class="MuiChip-root makeStyles-chip-52 makeStyles-chipDraft-56 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       DRAFT
                     </span>
@@ -201,10 +201,10 @@ exports[`ProjectsListPage renders with a list of drafts 1`] = `
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-52 makeStyles-chipUnpublished-55"
+                    class="MuiChip-root makeStyles-chip-52 makeStyles-chipUnpublished-55 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       UNPUBLISHED
                     </span>
@@ -414,10 +414,10 @@ exports[`ProjectsListPage renders with a proper list of projects when published
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-28 makeStyles-chipPublishedCompleted-30"
+                    class="MuiChip-root makeStyles-chip-28 makeStyles-chipPublishedCompleted-30 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       COMPLETED
                     </span>
@@ -427,10 +427,10 @@ exports[`ProjectsListPage renders with a proper list of projects when published
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-28 makeStyles-chipPublishedCompleted-30"
+                    class="MuiChip-root makeStyles-chip-28 makeStyles-chipPublishedCompleted-30 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       PUBLISHED
                     </span>
@@ -640,10 +640,10 @@ exports[`ProjectsListPage renders with a proper list of projects when unpublishe
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-40 makeStyles-chipActive-41"
+                    class="MuiChip-root makeStyles-chip-40 makeStyles-chipActive-41 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       ACTIVE
                     </span>
@@ -653,10 +653,10 @@ exports[`ProjectsListPage renders with a proper list of projects when unpublishe
                   class="MuiTableCell-root MuiTableCell-body"
                 >
                   <div
-                    class="MuiChip-root makeStyles-chip-40 makeStyles-chipUnpublished-43"
+                    class="MuiChip-root makeStyles-chip-40 makeStyles-chipUnpublished-43 MuiChip-sizeSmall"
                   >
                     <span
-                      class="MuiChip-label"
+                      class="MuiChip-label MuiChip-labelSmall"
                     >
                       UNPUBLISHED
                     </span>

diff --git a/app/src/features/projects/view/ProjectAttachments.tsx b/app/src/features/projects/view/ProjectAttachments.tsx
@@ -78,17 +78,16 @@ const ProjectAttachments: React.FC<IProjectAttachmentsProps> = () => {
           }}
         />
       </ComponentDialog>
-      <Box mb={5}>
-        <Box display="flex" justifyContent="space-between">
-          <Box>
-            <Typography variant="h2">Project Attachments</Typography>
-          </Box>
-          <Box>
-            <Button variant="outlined" onClick={() => setOpenUploadAttachments(true)}>
-              <Icon path={mdiUploadOutline} size={1} />
-              <Typography>Upload</Typography>
-            </Button>
-          </Box>
+      <Box mb={5} display="flex" alignItems="center" justifyContent="space-between">
+        <Typography variant="h2">Project Attachments</Typography>
+        <Box my={-1}>
+          <Button
+            color="primary"
+            variant="outlined"
+            startIcon={<Icon path={mdiUploadOutline} size={1} />}
+            onClick={() => setOpenUploadAttachments(true)}>
+            Upload
+          </Button>
         </Box>
       </Box>
       <Box mb={3}>

diff --git a/app/src/features/resources/ResourcesPage.tsx b/app/src/features/resources/ResourcesPage.tsx
@@ -1,6 +1,5 @@
 import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
-import Divider from '@material-ui/core/Divider';
 import Link from '@material-ui/core/Link';
 import Paper from '@material-ui/core/Paper';
 import Table from '@material-ui/core/Table';
@@ -55,8 +54,8 @@ const ResourcesPage: React.FC = () => {
             {resources?.map((row) => (
               <TableRow key={row.id}>
                 <TableCell>
-                  <Link underline="always" component="button" variant="body2">
-                    <a href={row.url}>{row.name}</a>
+                  <Link href={row.url} underline="always">
+                    {row.name}
                   </Link>
                 </TableCell>
 
@@ -81,13 +80,9 @@ const ResourcesPage: React.FC = () => {
     <Box my={4}>
       <Container maxWidth="xl">
         <Box mb={5} display="flex" justifyContent="space-between">
-          <Typography variant="h1">Survey Forms</Typography>
+          <Typography variant="h1">Resources</Typography>
         </Box>
-        <Paper>
-          <Box display="flex" alignItems="center" justifyContent="space-between" p={2}></Box>
-          <Divider></Divider>
-          {getResourcesList()}
-        </Paper>
+        <Paper>{getResourcesList()}</Paper>
       </Container>
     </Box>
   );

diff --git a/app/src/features/surveys/list/SurveysListPage.tsx b/app/src/features/surveys/list/SurveysListPage.tsx
@@ -1,7 +1,8 @@
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
+import { mdiUploadOutline } from '@mdi/js';
+import Icon from '@mdi/react';
 import { IGetProjectForViewResponse } from 'interfaces/useProjectApi.interface';
 import { IGetSurveysListResponse } from 'interfaces/useSurveyApi.interface';
 import React, { useState, useEffect } from 'react';
@@ -47,19 +48,23 @@ const SurveysListPage: React.FC<ISurveysListPageProps> = (props) => {
   };
 
   return (
-    <Box mb={6}>
-      <Container maxWidth="xl">
-        <Box mb={5} display="flex" alignItems="center" justifyContent="space-between">
-          <Typography variant="h2">Surveys</Typography>
-          <Button variant="outlined" color="primary" onClick={() => navigateToCreateSurveyPage(projectForViewData.id)}>
+    <>
+      <Box mb={5} display="flex" alignItems="center" justifyContent="space-between">
+        <Typography variant="h2">Surveys</Typography>
+        <Box my={-1}>
+          <Button
+            color="primary"
+            variant="outlined"
+            startIcon={<Icon path={mdiUploadOutline} size={1} />}
+            onClick={() => navigateToCreateSurveyPage(projectForViewData.id)}>
             Create Survey
           </Button>
         </Box>
-        <Box mb={3}>
-          <SurveysList projectId={projectForViewData.id} surveysList={surveys} />
-        </Box>
-      </Container>
-    </Box>
+      </Box>
+      <Box mb={3}>
+        <SurveysList projectId={projectForViewData.id} surveysList={surveys} />
+      </Box>
+    </>
   );
 };
 

diff --git a/app/src/pages/public/PublicProjectsListPage.tsx b/app/src/pages/public/PublicProjectsListPage.tsx
@@ -72,7 +72,7 @@ const PublicProjectsListPage = () => {
       chipStatusClass = classes.chipCompleted;
     }
 
-    return <Chip className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
+    return <Chip size="small" className={clsx(classes.chip, chipStatusClass)} label={chipLabel} />;
   };
 
   const navigateToPublicProjectPage = (id: number) => {

diff --git a/app/src/themes/appTheme.ts b/app/src/themes/appTheme.ts
@@ -59,9 +59,6 @@ const appTheme = createMuiTheme({
       outlinedPrimary: {
         background: '#ffffff'
       },
-      containedPrimary: {
-        fontWeight: 700
-      },
       startIcon: {
         marginTop: '-1px'
       }
@@ -96,6 +93,12 @@ const appTheme = createMuiTheme({
         }
       }
     },
+    MuiLink: {
+      root: {
+        textAlign: 'left',
+        color: '#1a5a96'
+      }
+    },
     MuiOutlinedInput: {
       root: {
         background: '#ffffff'
@@ -157,10 +160,6 @@ const appTheme = createMuiTheme({
     MuiTableCell: {
       root: {
         verticalAlign: 'top'
-      },
-      head: {
-        fontWeight: 700,
-        lineHeight: 'auto'
       }
     },
     MuiTab: {