Change hovering behaviour to be less aggressive

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

@@ -12,35 +12,50 @@ import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 export interface FileCardProps {
   title: string;
   type: string;
-	tags: string[];
-	icon: IconDefinition;
-	onIconClick: (event: React.MouseEvent) => void;
-	onClick: (event: React.MouseEvent) => void;
+  tags: string[];
+  icon: IconDefinition;
+  onIconClick: (event: React.MouseEvent) => void;
+  onClick: (event: React.MouseEvent) => void;
+  onMouseOver: (event: React.MouseEvent) => void;
+  onMouseOut: (event: React.MouseEvent) => void;
 }
 
 const FileCard: React.FC<FileCardProps> = ({
   title,
   type,
-	tags,
-	icon,
-	onIconClick,
-	onClick,
+  tags,
+  icon,
+  onIconClick,
+  onClick,
+  onMouseOver,
+  onMouseOut,
 }: FileCardProps) => {
   return (
     <Card className={styles.quickViewCard} onClick={onClick}>
       <Card.Img variant="top" src={graphIllustration} />
       <Card.Body>
         <Card.Title>{title}</Card.Title>
-        <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} onClick={onIconClick}/>
+        <FontAwesomeIcon
+          style={{ fontSize: "1.125rem" }}
+          icon={icon}
+          onMouseOver={onMouseOver}
+          onMouseOut={onMouseOut}
+          onClick={onIconClick}
+        />
       </Card.Body>
       <Card.Footer>
-				{
-					tags.map(tag => 
-						<Badge pill key={tag} className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
-						{tag}
-					</Badge>
-					)
-				}
+        {tags.map((tag) => (
+          <Badge
+            pill
+            key={tag}
+            className={classNames(
+              styles.quickViewTag,
+              tag === "new" ? styles.tagTeal : styles.tagBlue
+            )}
+          >
+            {tag}
+          </Badge>
+        ))}
       </Card.Footer>
     </Card>
   );

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

@@ -4,19 +4,34 @@ import Card from "react-bootstrap/Card";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
-export interface FolderCardProps{
-    title: string;
-		icon: IconDefinition;
-		onIconClick: (event: React.MouseEvent) => void;
-		onClick: (event: React.MouseEvent) => void;
+export interface FolderCardProps {
+  title: string;
+  icon: IconDefinition;
+  onIconClick: (event: React.MouseEvent) => void;
+  onClick: (event: React.MouseEvent) => void;
+  onMouseOver: (event: React.MouseEvent) => void;
+  onMouseOut: (event: React.MouseEvent) => void;
 }
 
-const FolderCard: React.FC<FolderCardProps> = ({title, icon, onIconClick, onClick}: FolderCardProps) => {
+const FolderCard: React.FC<FolderCardProps> = ({
+  title,
+  icon,
+  onIconClick,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+}: FolderCardProps) => {
   return (
     <Card className={styles.folderCard} onClick={onClick}>
       <Card.Body style={{ padding: ".6rem" }}>
         <Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
-        <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} onClick={onIconClick}/>
+        <FontAwesomeIcon
+          style={{ fontSize: "1.125rem" }}
+          icon={icon}
+          onMouseOver={onMouseOver}
+          onMouseOut={onMouseOut}
+          onClick={onIconClick}
+        />
       </Card.Body>
     </Card>
   );

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

@@ -20,23 +20,23 @@ export interface QuickAccessProps {
 
 type idBooleanMap = { [key: number]: boolean };
 interface MyState {
-	isSelected: idBooleanMap;
+  isSelected: idBooleanMap;
   isHoveringOver: idBooleanMap;
-	isHoveringTitle: Boolean;
+  isHoveringTitle: Boolean;
 }
 
 class QuickAccess extends React.Component<QuickAccessProps, MyState> {
   constructor(props: QuickAccessProps) {
     super(props);
-    this.state = { isSelected : [], isHoveringOver: [], isHoveringTitle: false};
+    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
   }
 
   componentDidMount() {
-		let isSelected: idBooleanMap = [];
+    let isSelected: idBooleanMap = [];
     let isHoveringOver: idBooleanMap = [];
     this.props.quickAccessItems.forEach(({ id }: { id: number }) => {
-			isSelected[id] = false;
-			isHoveringOver[id] = false;
+      isSelected[id] = false;
+      isHoveringOver[id] = false;
     });
     this.setState({ isSelected, isHoveringOver });
   }
@@ -77,37 +77,41 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
       isSelected[items[item].id] = setValue;
     }
     this.setState({ isSelected });
-	}
-	
-	handleCardClick(id: number) {
+  }
+
+  handleCardClick(id: number) {
     if (this.isAnySelected()) {
       let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
       isSelected[id] = !isSelected[id];
       this.setState({ isSelected });
     }
-	}
-	
-	handleMouseOver(id: number){
+  }
+
+  handleMouseOver(id: number) {
     let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
     isHoveringOver[id] = true;
     this.setState({ isHoveringOver });
-	}
+  }
 
-	handleMouseOut(id: number){
+  handleMouseOut(id: number) {
     let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
     isHoveringOver[id] = false;
     this.setState({ isHoveringOver });
-	}
+  }
 
   render() {
     return (
       <>
         <ResourceSectionHeader
-					heading="Quick Access"
-					onMouseOver={() => {this.setState({isHoveringTitle: true})}}
-					onMouseOut={() => {this.setState({isHoveringTitle: false})}}
-					showDownload={this.isAnySelected()}
-					showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
+          heading="Quick Access"
+          onMouseOver={() => {
+            this.setState({ isHoveringTitle: true });
+          }}
+          onMouseOut={() => {
+            this.setState({ isHoveringTitle: false });
+          }}
+          showDownload={this.isAnySelected()}
+          showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}
           selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
         />
@@ -128,9 +132,7 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
               lg={4}
               xl={3}
               key={id}
-							style={{ marginBottom: ".5rem" }}
-							onMouseOver={() => this.handleMouseOver(id)}
-							onMouseOut={() => this.handleMouseOut(id)}
+              style={{ marginBottom: ".5rem" }}
             >
               <FileCard
                 title={title}
@@ -142,11 +144,11 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
                       ? faCheckSquare
                       : faSquare
                     : faFile
-								}
-								onClick={() => this.handleCardClick(id)}
-                onIconClick={() => {
-                  this.handleIconClick(id);
-                }}
+                }
+                onClick={() => this.handleCardClick(id)}
+                onIconClick={() => this.handleIconClick(id)}
+                onMouseOver={() => this.handleMouseOver(id)}
+                onMouseOut={() => this.handleMouseOut(id)}
               />
             </Col>
           ))}

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

@@ -56,9 +56,11 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
   }
 
   handleIconClick(id: number) {
-    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
-    isSelected[id] = !isSelected[id];
-    this.setState({ isSelected });
+		let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+		isSelected[id] = !isSelected[id];
+    isHoveringOver[id] = false;
+    this.setState({ isSelected , isHoveringOver});
   }
 
   handleSelectAllClick() {
@@ -111,8 +113,6 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
               sm={6}
               md={3}
               key={id}
-							onMouseOver={() => this.handleMouseOver(id)}
-							onMouseOut={() => this.handleMouseOut(id)}
             >
               <FolderCard
                 title={title}
@@ -125,6 +125,8 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
                 }
 								onIconClick={() => this.handleIconClick(id)}
 								onClick={() => this.handleCardClick(id)}
+								onMouseOver={() => this.handleMouseOver(id)}
+								onMouseOut={() => this.handleMouseOut(id)}
               />
             </Col>
           ))}