more styling

src/resources/icons/eye.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 89.307 43.082 C 74.775 25.601 59.868 16.737 45 16.737 c -14.869 0 -29.775 8.864 -44.307 26.345 c -0.924 1.112 -0.924 2.724 0 3.836 C 15.225 64.399 30.131 73.264 45 73.264 c 14.868 0 29.775 -8.864 44.307 -26.346 C 90.231 45.806 90.231 44.194 89.307 43.082 z M 45 62 c -9.374 0 -17 -7.626 -17 -17 s 7.626 -17 17 -17 s 17 7.626 17 17 S 54.374 62 45 62 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<circle cx="45" cy="45" r="9" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="  matrix(1 0 0 1 0 0) "/>
+</g>
+</g>
+</svg>

src/resources/icons/like.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 0 87.201 h 18.478 c 1.44 0 2.607 -1.167 2.607 -2.607 V 35.343 c 0 -1.44 -1.167 -2.607 -2.607 -2.607 H 0 L 0 87.201 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 83.186 46.32 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 H 61.591 c 3.758 -6.768 3.872 -27.328 -5.046 -29.797 c -1.689 -0.468 -3.365 0.823 -3.554 2.565 c -1.568 14.428 -10.395 32.362 -19.37 32.881 h -6.991 v 43.003 h 3.627 c 1.952 0 3.817 0.666 5.444 1.743 c 4.063 2.691 10.906 4.265 17.465 4.101 h 3.172 v 0.012 h 21.788 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 h 3.037 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 h 2.025 c 3.763 0 6.814 -3.051 6.814 -6.814 S 86.949 46.32 83.186 46.32 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/ui/Mods.css

@@ -1,5 +1,5 @@
 .Mods {
   backdrop-filter: blur(10px);
-  height: 100%;
+  height: 90%;
   width: 100%;
 }

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);
+}

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<IProps, never> {
       <div className="ModListItem">
         <span className="ModName">{mod.name}</span>
         <img src={mod.images[0]} className={mod.nsfw ? 'nsfw' : ''} />
-        <div className="ModInner"></div>
+        <div className="ModInner">
+          <div className="likes">
+            <img src={Like} />
+            <span>{mod.likes.toLocaleString()}</span>
+          </div>
+          <div className="views">
+            <img src={Eye} />
+            <span>{mod.views.toLocaleString()}</span>
+          </div>
+        </div>
       </div>
     )
   }