fixes

src/ui/components/common/Checkbox.css

@@ -16,7 +16,7 @@
 }
 
 .CheckboxDisplay img {
-  height: 100% !important;
+  height: 100%;
   filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
 }
 

src/ui/components/mods/ModTile.css

@@ -43,16 +43,21 @@
   justify-content: center;
 }
 
-.Checkbox {
+.ModListItem .Checkbox {
   filter: invert(100%) sepia(2%) saturate(201%) hue-rotate(47deg) brightness(117%) contrast(100%);
 }
 
-.ModTileOpen .ModTileFolder {
+.ModImage .ModTileFolder {
   width: 40px !important;
   height: 40px !important;
   margin: 20px;
 }
 
+.ModTileFolder:hover {
+  cursor: pointer;
+  filter: invert(1) brightness(0.2);
+}
+
 .ModTileOpen,
 .ModTileDownload {
   position: absolute;

src/ui/components/mods/ModTile.tsx

@@ -25,7 +25,7 @@ export class ModTile extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      hover: true,
+      hover: false,
       modEnabled: false,
     }
 
@@ -51,7 +51,7 @@ export class ModTile extends React.Component<IProps, IState> {
       <div
         className="ModListItem"
         onMouseEnter={() => this.setState({ hover: true })}
-        onMouseLeave={() => this.setState({ hover: true })}
+        onMouseLeave={() => this.setState({ hover: false })}
         {...(!this.props.path && {
           onClick: () => {
             if (!('id' in mod)) return
@@ -70,7 +70,7 @@ export class ModTile extends React.Component<IProps, IState> {
               <div className="ModTileOpen">
                 <img src={Folder} className="ModTileFolder" alt="Open" onClick={this.openInExplorer} />
                 <Checkbox
-                  checked={/* TODO GET INSTALL STATUS */ this.state.modEnabled}
+                  checked={/* TODO GET ACTUAL INSTALL STATUS */ this.state.modEnabled}
                   id={this.props.mod.name}
                   onChange={this.toggleMod}
                 />