diff --git a/src/resources/icons/eye.svg b/src/resources/icons/eye.svg
new file mode 100644
index 0000000..439c8a7
--- /dev/null
+++ b/src/resources/icons/eye.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/resources/icons/like.svg b/src/resources/icons/like.svg
new file mode 100644
index 0000000..0a33bd7
--- /dev/null
+++ b/src/resources/icons/like.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/ui/Mods.css b/src/ui/Mods.css
index 8591764..e532d60 100644
--- a/src/ui/Mods.css
+++ b/src/ui/Mods.css
@@ -1,5 +1,5 @@
.Mods {
backdrop-filter: blur(10px);
- height: 100%;
+ height: 90%;
width: 100%;
}
diff --git a/src/ui/components/mods/ModTile.css b/src/ui/components/mods/ModTile.css
index 87114b8..f015d2c 100644
--- a/src/ui/components/mods/ModTile.css
+++ b/src/ui/components/mods/ModTile.css
@@ -1,13 +1,76 @@
.ModListItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
width: 20%;
+ margin: 10px;
+
+ background: rgb(99, 98, 98, 0.2);
+ border-radius: 10px;
+ backdrop-filter: blur(10px);
+
+ transition: background-color 0.1s ease-in-out;
+}
+
+.ModListItem:hover {
+ cursor: pointer;
+ background: rgb(99, 98, 98, 0.8);
+}
+
+.ModName {
+ width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ padding: 10px 0 0 10px;
+ margin-left: 10px;
+
+ color: #fff;
+ font-weight: bold;
}
.ModListItem img {
object-fit: cover;
width: 80%;
height: 100px;
+
+ margin: 14px;
}
img.nsfw {
filter: blur(16px);
}
+
+.ModInner {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+
+ color: #fff;
+ padding-bottom: 10px;
+}
+
+.ModInner div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ padding: 0px 8px;
+}
+
+.ModInner div span {
+ margin: 0px 5px;
+}
+
+.ModInner img {
+ object-fit: contain;
+ width: 20px;
+ height: 20px;
+
+ margin: 0px;
+
+ filter: invert(1);
+}
diff --git a/src/ui/components/mods/ModTile.tsx b/src/ui/components/mods/ModTile.tsx
index cf70c9e..4a84303 100644
--- a/src/ui/components/mods/ModTile.tsx
+++ b/src/ui/components/mods/ModTile.tsx
@@ -2,6 +2,8 @@ import React from 'react'
import { ModData } from '../../../utils/gamebanana'
import './ModTile.css'
+import Like from '../../../resources/icons/like.svg'
+import Eye from '../../../resources/icons/eye.svg'
interface IProps {
mod: ModData
@@ -19,7 +21,16 @@ export class ModTile extends React.Component {
{mod.name}

-
+
+
+

+
{mod.likes.toLocaleString()}
+
+
+

+
{mod.views.toLocaleString()}
+
+
)
}