Change listview style

src/components/atoms/FileListItem/index.tsx

@@ -7,6 +7,7 @@ import Col from "react-bootstrap/esm/Col";
 import Badge from "react-bootstrap/Badge";
 import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ListGroup from "react-bootstrap/ListGroup";
 
 export interface FileListItemProps {
   title: string;
@@ -28,12 +29,13 @@ const FileListItem: React.FC<FileListItemProps> = ({
   onMouseOut,
 }) => {
   return (
-    <Row
+    <ListGroup.Item
       className={styles.listRow}
       onClick={onClick}
       onMouseOver={onMouseOver}
       onMouseOut={onMouseOut}
     >
+      <Row style={{marginLeft: "-1.125rem", marginRight: "-1.125rem"}}>
         <Col
           style={{
             display: "flex",
@@ -68,6 +70,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
           fixedWidth
         />
       </Row>
+    </ListGroup.Item>
   );
 };
 

src/components/atoms/FileListItem/style.module.scss

 @import "assets/scss/global";
 
 .listRow {
-  border: 1px solid $white;
-  padding: 0.25rem 0.75rem;
-  margin-right: 0rem;
-  margin-left: 0rem;
   cursor: pointer;
-  margin-top: 0.25rem;
 	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-  display: flex;
-  align-items: center;
+	border-bottom-width: 1px !important;
 }
 
 .listRow:hover {
-  border-radius: 0.5rem;
-  transform: scale(1.01);
 	box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  border-color: $gray-300;
+	z-index: 500;
 }
 
 .fileTag:last-child {

src/components/molecules/CategoryHeader/index.tsx

@@ -4,6 +4,7 @@ import styles from "./style.module.scss";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import classNames from "classnames";
 
 export interface CategoryHeaderProps {
   heading: string;
@@ -16,24 +17,17 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
   heading,
   onSelectAllClick,
   selectAllIcon,
-  checkBoxColor
+  checkBoxColor,
 }: CategoryHeaderProps) => {
   return (
     <>
-      <div className={styles.sectionHeaderContainer}>
+      <div className={styles.sectionHeaderContainer} style={{paddingRight: "0.325rem"}} onClick={onSelectAllClick}>
         <span className={styles.sectionHeader}>{heading}</span>
         <div className={styles.sectionHeaderButtonGroup}>
-          <Button
-            style={{ color: checkBoxColor }}
-            className={styles.sectionHeaderButton}
-            onClick={onSelectAllClick}
-            variant="secondary"
-          >
           <FontAwesomeIcon
-              className={styles.buttonIcon}
+            style={{ color: checkBoxColor, fontSize: "1.125rem" }}
             icon={selectAllIcon}
           />
-          </Button>
         </div>
       </div>
     </>

src/components/molecules/CategoryHeader/style.module.scss

@@ -9,6 +9,5 @@
 .sectionHeaderContainer {
   padding: 0.25rem;
   border-bottom: 1px solid $gray-300;
-  margin-bottom: 1rem;
   margin-top: 1.25rem;
 }

src/components/molecules/CategoryList/index.tsx

@@ -3,10 +3,11 @@ import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 import { SelectionProps } from "components/molecules/SelectionView";
 import { resourceTypeToIcon } from "../../pages/ModuleResources/utils";
 import FileListItem from "components/atoms/FileListItem";
+import ListGroup from "react-bootstrap/ListGroup";
 
 const CategoryList: React.FC<{ select: SelectionProps }> = ({ select }) => {
   return (
-    <>
+    <ListGroup variant="flush">
       {select.selectionItems.map(({ title, type, tags, id }) => {
         if (type === undefined || tags === undefined) return null;
 
@@ -30,7 +31,7 @@ const CategoryList: React.FC<{ select: SelectionProps }> = ({ select }) => {
           />
         );
       })}
-    </>
+    </ListGroup>
   );
 };
 

src/components/pages/ModuleOverview/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "../ModuleResources/utils";
 import LoadingScreen from "components/molecules/LoadingScreen";
 import { titleCase } from "utils/functions";
+import ListGroup from "react-bootstrap/esm/ListGroup";
 
 export interface ModuleOverviewProps {
   year: string;
@@ -129,7 +130,7 @@ class ModuleOverview extends React.Component<
                     </Accordion.Toggle>
                     <Accordion.Collapse eventKey={weekTitle}>
                       <Card.Body className={styles.weekCardBody}>
-                        {WeekList}
+                        <ListGroup variant="flush">{WeekList}</ListGroup>
                       </Card.Body>
                     </Accordion.Collapse>
                   </Card>