Change style of setting thing

src/components/Setting.tsx

@@ -12,7 +12,7 @@ export function Setting ({
   disabled
 }: SettingProps) {
   return (
-    <div className={`flex items-center gap-2 mb-2 ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className}`} title={title}>
+    <div className={`flex items-center gap-2 mb-2 ${className}`} title={title}>
       <label className='text-white text-lg'>{label}</label>
       <div className='setting-checkbox-wrapper'>
         <input
@@ -22,7 +22,7 @@ export function Setting ({
           disabled={disabled}
           onChange={() => onChange(!value)}
         />
-        {value && <FontAwesomeIcon icon={faCheck} className='fa-check-icon' />}
+        {value && <FontAwesomeIcon icon={faCheck} />}
       </div>
     </div>
   )

src/styles/setting.css

@@ -5,13 +5,13 @@
 }
 
 .setting-checkbox {
-  @apply appearance-none w-full h-full border-2 border-(--col4) rounded-md bg-(--col2) transition-colors cursor-pointer;
+  @apply appearance-none w-full h-full border border-(--col4) rounded-sm bg-(--col2) transition-colors cursor-pointer;
 }
 
 .setting-checkbox:checked {
   @apply bg-(--col4) border-(--col6);
 }
 
-.fa-check-icon {
+.setting-checkbox-wrapper svg {
-  @apply absolute top-1/2 left-1/2 text-white text-[11px] pointer-events-none -translate-x-2/4 -translate-y-2/4;
+  @apply absolute top-1/2 left-1/2 text-white text-[12px] pointer-events-none -translate-x-2/4 -translate-y-2/4;
 }