From c0740417e378a2800f45b0dcd9aee7164433747c Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sat, 23 Jul 2022 23:03:18 -0700
Subject: [PATCH] better styling, download overlay on hover

---
 src/ui/components/mods/ModTile.css | 42 +++++++++++++++++++++++++++---
 src/ui/components/mods/ModTile.tsx | 23 +++++++++++++---
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/mods/ModTile.css b/src/ui/components/mods/ModTile.css
index f015d2c..7b376a2 100644
--- a/src/ui/components/mods/ModTile.css
+++ b/src/ui/components/mods/ModTile.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
 
-  width: 20%;
+  width: 23%;
   margin: 10px;
 
   background: rgb(99, 98, 98, 0.2);
@@ -18,6 +18,7 @@
   background: rgb(99, 98, 98, 0.8);
 }
 
+.ModAuthor,
 .ModName {
   width: 100%;
   text-overflow: ellipsis;
@@ -30,14 +31,47 @@
   font-weight: bold;
 }
 
-.ModListItem img {
+.ModAuthor {
+  font-weight: normal;
+  padding: 0 0 0 10px;
+}
+
+.ModTileDownload {
+  position: absolute;
+  object-fit: contain;
+
+  left: 35%;
+  top: 40%;
+
+  z-index: 999;
+
+  width: 40px !important;
+  height: 40px !important;
+
+  filter: invert(1);
+}
+
+.ModImage {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  width: 80%;
-  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ModImage img {
+  object-fit: cover;
+  width: 100%;
+  height: 150px;
 
   margin: 14px;
 }
 
+img.blur {
+  filter: blur(6px);
+}
+
 img.nsfw {
   filter: blur(16px);
 }
diff --git a/src/ui/components/mods/ModTile.tsx b/src/ui/components/mods/ModTile.tsx
index 4a84303..a77920c 100644
--- a/src/ui/components/mods/ModTile.tsx
+++ b/src/ui/components/mods/ModTile.tsx
@@ -4,23 +4,40 @@ import { ModData } from '../../../utils/gamebanana'
 import './ModTile.css'
 import Like from '../../../resources/icons/like.svg'
 import Eye from '../../../resources/icons/eye.svg'
+import Download from '../../../resources/icons/download.svg'
 
 interface IProps {
   mod: ModData
 }
 
-export class ModTile extends React.Component<IProps, never> {
+interface IState {
+  hover: boolean
+}
+
+export class ModTile extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      hover: false,
+    }
   }
 
   render() {
     const { mod } = this.props
 
     return (
-      <div className="ModListItem">
+      <div
+        className="ModListItem"
+        onMouseEnter={() => this.setState({ hover: true })}
+        onMouseLeave={() => this.setState({ hover: false })}
+      >
         <span className="ModName">{mod.name}</span>
-        <img src={mod.images[0]} className={mod.nsfw ? 'nsfw' : ''} />
+        <span className="ModAuthor">{mod.submitter.name}</span>
+        <div className="ModImage">
+          {this.state.hover && <img src={Download} className="ModTileDownload" alt="Download" />}
+          <img src={mod.images[0]} className={`${mod.nsfw ? 'nsfw' : ''} ${this.state.hover ? 'blur' : ''}`} />
+        </div>
         <div className="ModInner">
           <div className="likes">
             <img src={Like} />