etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make checkboxes visible on dark theme in bulk actions

Browse Source 
- 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
This commit is contained in:
Fringg
2026-04-24 06:02:11 +03:00
parent 78b41dc338
commit 0844144e23
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/AdminBulkActions.tsx
View File

@@ -191,10 +191,10 @@ function SubscriptionSubRow({
<button <button
onClick={onToggleSelect} onClick={onToggleSelect}
className={cn( 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 isSelected
? 'border-accent-500 bg-accent-500' ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
: '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={ aria-label={
isSelected isSelected
@@ -204,7 +204,7 @@ function SubscriptionSubRow({
> >
{isSelected && ( {isSelected && (
<svg <svg
className="h-2 w-2 text-white" className="h-2.5 w-2.5 text-white"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -1429,12 +1429,12 @@ export default function AdminBulkActions() {
<button <button
onClick={table.getToggleAllRowsSelectedHandler()} onClick={table.getToggleAllRowsSelectedHandler()}
className={cn( 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() 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() : table.getIsSomeRowsSelected()
? 'border-accent-500 bg-accent-500/30' ? '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')} aria-label={t('admin.bulkActions.selectAll')}
> >
@@ -1453,10 +1453,10 @@ export default function AdminBulkActions() {
<button <button
onClick={row.getToggleSelectedHandler()} onClick={row.getToggleSelectedHandler()}
className={cn( 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() row.getIsSelected()
? 'border-accent-500 bg-accent-500' ? 'border-accent-500 bg-accent-500 shadow-[0_0_8px_rgba(var(--color-accent-500),0.4)]'
: '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={ aria-label={
row.getIsSelected() row.getIsSelected()