Update styling of resources list view

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

@@ -2,5 +2,13 @@
 @import "assets/scss/global";
 
 .sectionHeader {
-    text-transform: uppercase;
+  font-size: 1.25rem; 
+  text-transform: capitalize; 
+}
+
+.sectionHeaderContainer {
+  padding: 0.25rem;
+  border-bottom: 0.0625rem solid $gray-300;
+  margin-bottom: 1rem;
+  margin-top: 1.25rem;
 }

src/components/molecules/CategoryList/index.tsx

@@ -8,59 +8,66 @@ import Badge from "react-bootstrap/Badge";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SelectionProps } from "components/molecules/SelectionView";
-import { resourceTypeToIcon } from "../../pages/ModuleResources"
+import { resourceTypeToIcon } from "../../pages/ModuleResources";
 
-const CategoryList: React.FC<{ select: SelectionProps }> = ({
-  select,
-}) => {
+const CategoryList: React.FC<{ select: SelectionProps }> = ({ select }) => {
   return (
-      <>
+    <>
       {select.selectionItems.map(({ title, type, tags, id }) => {
         if (type === undefined || tags === undefined) return null;
 
-        let icon = select.isAnySelected() || select.state.isHoveringOver[id]
-          ? select.state.isSelected[id]
-            ? faCheckSquare
-            : faSquare
-          : resourceTypeToIcon(type);
+        let icon =
+          select.isAnySelected() || select.state.isHoveringOver[id]
+            ? select.state.isSelected[id]
+              ? faCheckSquare
+              : faSquare
+            : resourceTypeToIcon(type);
 
         return (
           <Row
-          style={{ marginTop: "10px", marginLeft: "0px", marginRight: "0px", cursor: "pointer" }}
-          onClick={() => select.handleCardClick(id)}
-          onMouseOver={() => select.handleMouseOver(id)}
-          onMouseOut={() => select.handleMouseOut(id)}
-          key={id}
+            className={styles.listRow}
+            onClick={() => select.handleCardClick(id)}
+            onMouseOver={() => select.handleMouseOver(id)}
+            onMouseOut={() => select.handleMouseOut(id)}
+            key={id}
           >
-            <Col>{title}</Col>
-            <Col md="auto">
-              {tags.map((tag) => (
+            <Col
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: 0,
+                fontSize: "1rem"
+              }}
+            >
+              {title}
+            </Col>
+            <Col md="auto" style={{ display: "flex", alignItems: "center" }}>
+              {tags.map(tag => (
                 <Badge
                   pill
                   key={tag}
                   className={classNames(
                     styles.fileTag,
                     tag === "new" ? styles.tagTeal : styles.tagBlue
-                  )}>
+                  )}
+                >
                   {tag}
                 </Badge>
               ))}
             </Col>
-            <Col md="auto" className="px-0">
-              <FontAwesomeIcon
-                style={{ fontSize: "1.125rem", marginRight: "0.5rem" }}
-                icon={icon}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  select.handleIconClick(id);
-                }}
-                fixedWidth
-              />
-            </Col>
+            <FontAwesomeIcon
+              style={{ fontSize: "1.125rem" }}
+              icon={icon}
+              onClick={e => {
+                e.stopPropagation();
+                select.handleIconClick(id);
+              }}
+              fixedWidth
+            />
           </Row>
         );
       })}
-      </>
+    </>
   );
 };
 

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

-@import "assets/scss/global";
+@import "assets/scss/global";
\ No newline at end of file
+
+.listRow {
+  border: 0.0625rem 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;
+}
+
+.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;
+}
+
+.fileTag:last-child {
+  margin-right: 0rem;
+}

src/components/molecules/SelectionView/components/SectionHeader/style.module.scss

@@ -3,20 +3,24 @@
 
 .sectionHeader {
   cursor: pointer;
+  font-size: 1.5rem;
 }
 
 .alert-enter {
   opacity: 0;
   transform: scale(0.9);
 }
+ 
 .alert-enter-active {
   opacity: 1;
   transform: translateX(0);
   transition: opacity 300ms, transform 300ms;
 }
+
 .alert-exit {
   opacity: 1;
 }
+
 .alert-exit-active {
   opacity: 0;
   transform: scale(0.9);

src/components/pages/ModuleResources/components/ListView.tsx

@@ -34,7 +34,7 @@ const ListView: React.FC<ListViewProps> = ({
 
 	return (
 		<SelectionView
-			heading="Materials"
+      heading="Resources"
 			onItemClick={onItemClick}
 			onDownloadClick={onDownloadClick}
 			selectionItems={filesContent}
@@ -83,4 +83,4 @@ const ListView: React.FC<ListViewProps> = ({
 	);
 };
 
-export default ListView;
+export default ListView;
\ No newline at end of file