fix blurry text on hover mod item

src/renderer/components/shared/bsm-checkbox.component.tsx

@@ -1,5 +1,4 @@
 import { BsmIcon } from "../svgs/bsm-icon.component"
-import { motion } from "framer-motion"
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { getCorrectTextColor } from "renderer/helpers/correct-text-color"
 
@@ -16,14 +15,12 @@ export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
     }
 
     return (
-        <div className={`group ${className}`}>
-            {!disabled && <div className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
+        <div className={`group ${className}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
+            {!disabled && <span className="glow-on-hover !w-[calc(100%+6px)] !h-[calc(100%+6px)] !-top-[3px] !-left-[3px] group-hover:opacity-100"/>}
             
-            <div className={`w-full h-full bg-inherit border-2 border-current rounded-md overflow-hidden flex items-center justify-center ${disabled ? "brightness-50 cursor-not-allowed" : "cursor-pointer"}`} onClickCapture={e => {e.stopPropagation(); handleClick()}}>
-                <motion.span className="w-full h-full flex items-center justify-center" style={{backgroundColor: checkedColor}} initial={checked ? {opacity: 1} : {opacity: 0}} animate={checked ? {opacity: 1} : {opacity: 0}} transition={{duration: .15}}>
-                    <BsmIcon icon="check" style={{color: iconColor}}/>
-                </motion.span>
-            </div>
+            <span className={`w-full h-full flex items-center justify-center rounded-md border-2 border-current overflow-hidden bg-light-main-color-3 dark:bg-main-color-1 ${disabled ? "brightness-50 cursor-not-allowed" : "cursor-pointer"}`}>
+                <BsmIcon className="w-full h-full" icon="check" style={{color: iconColor, backgroundColor: checkedColor, visibility: checked ? "visible" : "hidden"}}/>
+            </span>
         </div>
   )
 }

src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx

@@ -26,10 +26,10 @@ export function ModItem({mod, installedVersion, isDependency, isSelected, onChan
 
     return (
         <div className="contents bg-light-main-color-3 dark:bg-main-color-1 text-main-color-1 dark:text-light-main-color-1">
-            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-t-2 border-b-2 border-l-2" style={wantInfoStyle}>
+            <div className="h-full aspect-square flex items-center justify-center p-[7px] rounded-l-md bg-inherit ml-3 border-2 border-r-0" style={wantInfoStyle}>
                 <BsmCheckbox className="h-full aspect-square z-[1] relative bg-inherit" onChange={onChange} disabled={mod.required || isDependency} checked={isDependency || isSelected ||  mod.required}/>
             </div>
-            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2" style={wantInfoStyle}>{mod.name}</span>
+            <span className="bg-inherit py-2 pl-3 font-bold text-sm whitespace-nowrap border-t-2 border-b-2 blur-none" style={wantInfoStyle}>{mod.name}</span>
             <span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 ${(installedVersion && isOutDated) && "text-red-400 line-through"} ${installedVersion && !isOutDated && "text-green-400"}`} style={wantInfoStyle}>{installedVersion || "-"}</span>
             <span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2" style={wantInfoStyle}>{mod.version}</span>
             <span title={mod.description} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2" style={wantInfoStyle}>{mod.description}</span>

src/renderer/index.css

@@ -47,7 +47,6 @@
     animation: glowing 20s linear infinite;
     opacity: 0;
     transition: opacity .2s ease-in-out;
-    border-radius: 10px;
 }
 
 @keyframes glowing {