From 0844144e23b635f7119b0ad92cbe9ea623612fc0 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 24 Apr 2026 06:02:11 +0300
Subject: [PATCH] fix: make checkboxes visible on dark theme in bulk actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase user checkbox size: h-4.5 → h-5 w-5 with rounded-md border-2
- Increase subscription checkbox: h-3.5 → h-4.5 with rounded-md border-2
- Brighter unselected border: dark-600 → dark-500 with lighter bg
- Hover effect: accent-500/50 border glow on hover
- Selected glow: accent shadow ring for clear visual feedback
- Smooth transition-all duration-150 for all state changes
---
 src/pages/AdminBulkActions.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/AdminBulkActions.tsx b/src/pages/AdminBulkActions.tsx
index 0f2ceb1..0479ec5 100644
--- a/src/pages/AdminBulkActions.tsx
+++ b/src/pages/AdminBulkActions.tsx
@@ -191,10 +191,10 @@ function SubscriptionSubRow({
             <button
               onClick={onToggleSelect}
               className={cn(
-                'flex h-3.5 w-3.5 items-center justify-center rounded border transition-colors',
+                'h-4.5 w-4.5 flex items-center justify-center rounded-md border-2 transition-all duration-150',
                 isSelected
-                  ? 'border-accent-500 bg-accent-500'
-                  : 'border-dark-600 bg-dark-800 hover:border-dark-500',
+                  ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
+                  : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
               )}
               aria-label={
                 isSelected
@@ -204,7 +204,7 @@ function SubscriptionSubRow({
             >
               {isSelected && (
                 <svg
-                  className="h-2 w-2 text-white"
+                  className="h-2.5 w-2.5 text-white"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -1429,12 +1429,12 @@ export default function AdminBulkActions() {
             <button
               onClick={table.getToggleAllRowsSelectedHandler()}
               className={cn(
-                'h-4.5 w-4.5 flex items-center justify-center rounded border transition-colors',
+                'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
                 table.getIsAllRowsSelected()
-                  ? 'border-accent-500 bg-accent-500'
+                  ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
                   : table.getIsSomeRowsSelected()
                     ? 'border-accent-500 bg-accent-500/30'
-                    : 'border-dark-600 bg-dark-800 hover:border-dark-500',
+                    : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
               )}
               aria-label={t('admin.bulkActions.selectAll')}
             >
@@ -1453,10 +1453,10 @@ export default function AdminBulkActions() {
               <button
                 onClick={row.getToggleSelectedHandler()}
                 className={cn(
-                  'h-4.5 w-4.5 flex items-center justify-center rounded border transition-colors',
+                  'flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150',
                   row.getIsSelected()
-                    ? 'border-accent-500 bg-accent-500'
-                    : 'border-dark-600 bg-dark-800 hover:border-dark-500',
+                    ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
+                    : 'border-dark-500 bg-dark-700/60 hover:border-accent-500/50 hover:bg-dark-600/60',
                 )}
                 aria-label={
                   row.getIsSelected()