Update styling of module resources view

Note: Minor aesthetic changes were made.

frontend/package.json

@@ -26,6 +26,7 @@
     "react-router-breadcrumbs-hoc": "^3.3.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-transition-group": "^4.4.1",
     "types": "^0.1.1",
     "typescript": "~3.7.2"
   },

frontend/src/components/atoms/FileCard/index.tsx

@@ -41,7 +41,7 @@ const FileCard: React.FC<FileCardProps> = ({
       <Card.Body>
         <Card.Title style={{ wordWrap: "break-word" }}>{title}</Card.Title>
         <FontAwesomeIcon
-          style={{ fontSize: "1.125rem" }}
+          style={{ marginLeft: "8px", fontSize: "1.125rem" }}
           icon={icon}
           onClick={onIconClick}
         />

frontend/src/components/atoms/FileCard/style.module.scss

@@ -3,7 +3,9 @@
 .quickViewCard {
   border-radius: 0.5rem;
   border-color: $gray-300;
+  border-width: 0px;
   transition: transform 0.2s;
+  background-color: $gray-100;
 	height: 96%;
 }
 
@@ -16,12 +18,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid $gray-300;
 }
 
 .quickViewCard :global(.card-footer) {
   border-radius: 0.5rem !important;
-  background: #fff;
+  background: $gray-100;
   border-width: 0rem;
   padding: 0.5rem;
   display: flex;
@@ -42,6 +43,8 @@
 }
 
 .quickViewCard :global(.card-img-top) {
+  border: 1px solid $gray-100;
+  padding: 1px;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
@@ -72,4 +75,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 	scrollbar-color: $white $white;
 	margin-top: 10px;
 	// margin-left: 0; // leave space before card
-}
\ No newline at end of file
+}

frontend/src/components/atoms/FolderCard/style.module.scss

@@ -2,7 +2,9 @@
 
 .folderCard {
   border-radius: 0.5rem;
+  border-width: 0px;
   transition: transform 0.2s;
+  background-color: $gray-100;
   margin-top: 0.67rem;
 }
 
@@ -14,4 +16,4 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
\ No newline at end of file
+}

frontend/src/components/molecules/CurrentDirectoryView/style.module.scss

-@import "assets/scss/custom";
\ No newline at end of file
+@import "assets/scss/custom";
+
+.quickAccessRow {
+  height: fit-content;
+}

frontend/src/components/molecules/QuickAccessView/style.module.scss

@@ -6,7 +6,6 @@
 	margin-top: 10px;
 	overflow-y: visible;
 	overflow-x: auto;
-	height: fit-content;
 	// margin-left: 0; // leave space before card
 }
 
@@ -30,4 +29,4 @@
 
 .quickAccessRow:hover::-webkit-scrollbar-thumb {
 	background-color: $gray-400;
-}
\ No newline at end of file
+}

frontend/src/components/molecules/ResourceSectionHeader/index.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import styles from "./style.module.scss";
 
 import Button from "react-bootstrap/Button";
+import Fade from "react-bootstrap/Fade";
+import { CSSTransition } from "react-transition-group";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
@@ -22,31 +24,40 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
   showSelectAll,
   onSelectAllClick,
   onMouseOver,
-  onMouseOut,
+  onMouseOut
 }: SectionHeaderProps) => {
+  let show = showDownload.valueOf();
   return (
     <>
       <div
         className={styles.sectionHeaderContainer}
         onMouseOut={onMouseOut}
-				onMouseOver={onMouseOver}
+        onMouseOver={onMouseOver}
       >
         <span className={styles.sectionHeader} onClick={onSelectAllClick}>
           {heading}
         </span>
         <div className={styles.sectionHeaderButtonGroup}>
+          <Fade in={show} timeout={500}>
+            <span id="download-button">
+              <Button
+                className={styles.sectionHeaderButton}
+                onClick={() => {}}
+                style={{ color: showDownload ? "#495057" : "#acb5bd" }}
+              >
+                <FontAwesomeIcon
+                  className={styles.buttonIcon}
+                  icon={faDownload}
+                />
+              </Button>
+            </span>
+          </Fade>
           <Button
-						className={styles.sectionHeaderButton}
-						onClick= {() => {}}
-            style={{ visibility: showDownload ? "visible" : "hidden" }}
-          >
-            <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
-          </Button>
-
-          <Button
-            style={{ visibility: showSelectAll ? "visible" : "hidden" }}
+            style={{ color: showDownload ? "#495057" : "#acb5bd" }}
             className={styles.sectionHeaderButton}
             onClick={onSelectAllClick}
+            aria-controls="download-button"
+            aria-expanded={show}
           >
             <FontAwesomeIcon
               className={styles.buttonIcon}

frontend/src/components/molecules/ResourceSectionHeader/style.module.scss

@@ -10,9 +10,6 @@
 .sectionHeader {
   font-weight: 500;
 	font-size: 20px;
-	display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .sectionHeaderButtonGroup {
@@ -20,16 +17,16 @@
 }
 
 .sectionHeaderButton {
-  background: $white;
-  color: #000;
+  background-color: $white;
+  color: $gray-500;
   border-width: 0px;
   border-radius: 8px;
   margin-left: 20px;
   justify-content: space-between;
   height: 2.25rem;
-  transition: 0.2s background;
-  -webkit-transition: 0.2s background;
-  -moz-transition: 0.2s background;
+  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s background-color;
   font-size: 1.05rem;
 }
 
@@ -38,18 +35,12 @@
 }
 
 .buttonCheckbox :global(.form-check-input) {
-  margin: 0px;
-}
-
-.sectionHeaderButton:active:hover,
-.sectionHeaderButton:global(.active):hover {
-  background-color: $gray-900 !important;
+  margin: 0px; 
 }
 
 .sectionHeaderButton:global(.active),
 .sectionHeaderButton:active {
-  color: #fff;
-  background: #000 !important;
+  background: $gray-400 !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
@@ -58,7 +49,24 @@
 }
 
 .sectionHeaderButton:hover {
-  background: #e5e5e5;
-  border-color: #fff;
-  color: #000;
-}
\ No newline at end of file
+  background-color: $gray-200;
+  color: $gray-700 !important;
+}
+
+.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);
+  transition: opacity 300ms, transform 300ms;
+}

frontend/src/components/pages/ModuleResources/index.tsx

@@ -88,7 +88,7 @@ let folderItems = [
     id: 1,
   },
   {
-    title: "Pandor Lab",
+    title: "Pandora Lab",
     id: 2,
   },
   {

frontend/src/components/pages/ModuleResources/style.module.scss

@@ -52,3 +52,4 @@
   color: $white !important;
   border-color: $black;
 }
+