Update list view and category section header

src/components/atoms/FileListItem/index.tsx

@@ -7,7 +7,6 @@ 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;
@@ -29,22 +28,15 @@ const FileListItem: React.FC<FileListItemProps> = ({
   onMouseOut
 }) => {
   return (
-    <ListGroup.Item
+    <div
       className={styles.listItem}
       onClick={onClick}
-      onMouseOver={onMouseOver}
       onMouseOut={onMouseOut}
+      onMouseOver={onMouseOver}
     >
-      <Row
-        className={styles.listRow}
-      >
-        <div className={styles.listItemTitle}
-        >
-          {title}
-        </div>
-        <div
-          style={{ padding: 0, display: "flex", alignItems: "center" }}
-        >
+      <Row className={styles.listRow}>
+        <div className={styles.listItemTitle}>{title}</div>
+        <div style={{ padding: 0, display: "flex", alignItems: "center" }}>
           {tags.map(tag => (
             <Badge
               pill
@@ -68,7 +60,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
           />
         </div>
       </Row>
-    </ListGroup.Item>
+    </div>
   );
 };
 

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

@@ -10,17 +10,19 @@
 .listRow:hover {
   transform: scale(1.01);
   box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  z-index: 500;
 }
 
 .listRow {
   padding: 0.25rem 0.5rem;
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  -webkit-transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; 
+  -moz-transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
   border-radius: 0.5rem !important;
   display: "flex";
   align-items: "center";
   justify-content: space-between;
   flex-wrap: nowrap;
+  background: transparent;
 }
 
 .listItemTitle {

src/components/molecules/CategoryHeader/index.tsx

@@ -31,7 +31,6 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
             variant="secondary"
           >
             <FontAwesomeIcon
-              style={{ color: checkBoxColor }}
               icon={selectAllIcon}
             />
           </Button>

src/components/molecules/CategoryList/index.tsx

@@ -3,7 +3,6 @@ import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 import { Resource, resourceTypeToIcon } from "../../pages/ModuleResources/utils";
 import { SelectionProps } from "components/molecules/SelectionView";
 import FileListItem from "components/atoms/FileListItem";
-import ListGroup from "react-bootstrap/ListGroup";
 
 export interface CategoryListProps {
   categoryItems: Resource[];
@@ -25,7 +24,7 @@ const CategoryList: React.FC<CategoryListProps> = ({
   handleMouseOut,
 }) => {
   return (
-    <ListGroup variant="flush" style={{marginLeft: ".25rem"}}>
+    <div style={{marginLeft: ".25rem"}}>
       {categoryItems.map(({ title, type, tags, id }) => {
         if (type === undefined || tags === undefined) return null;
 
@@ -49,7 +48,7 @@ const CategoryList: React.FC<CategoryListProps> = ({
           />
         );
       })}
-    </ListGroup>
+    </div>
   );
 };
 

src/components/pages/ModuleOverview/index.tsx

@@ -16,7 +16,6 @@ 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;
@@ -130,7 +129,7 @@ class ModuleOverview extends React.Component<
                     </Accordion.Toggle>
                     <Accordion.Collapse eventKey={weekTitle}>
                       <Card.Body className={styles.weekCardBody}>
-                        <ListGroup variant="flush">{WeekList}</ListGroup>
+                        {WeekList}
                       </Card.Body>
                     </Accordion.Collapse>
                   </Card>