git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: standardize button sizes and improve selection indicators in ProfileCard and RegexCard components

Browse Source
This commit is contained in:
Sam Chau
2025-01-12 01:31:52 +10:30
parent 6aba5ab230
commit 8d28227da6
2 changed files with 70 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/profile/ProfileCard.jsx
View File

@@ -94,41 +94,43 @@ const ProfileCard = ({
)}
</span>
)}
{isSelectionMode ? (
<Tooltip
content={
isSelected
? 'Selected'
: willBeSelected
? 'Will be selected'
: 'Select'
}>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
<div className='w-8 h-8 flex items-center justify-center'>
{isSelectionMode ? (
<Tooltip
content={
isSelected
? 'bg-blue-500'
? 'Selected'
: willBeSelected
? 'bg-blue-200 dark:bg-blue-800'
: 'bg-gray-200 dark:bg-gray-700'
} transition-colors hover:bg-blue-600`}>
{isSelected && (
<Check
size={16}
className='text-white'
/>
)}
{willBeSelected && !isSelected && (
<div className='w-2 h-2 rounded-full bg-blue-400' />
)}
</div>
</Tooltip>
) : (
<button
onClick={handleCloneClick}
className='p-2 rounded-full transition-colors shrink-0 hover:bg-gray-100 dark:hover:bg-gray-700'>
<Copy className='w-5 h-5 text-gray-500 dark:text-gray-400' />
</button>
)}
? 'Will be selected'
: 'Select'
}>
<div
className={`w-6 h-6 rounded-full flex items-center justify-center ${
isSelected
? 'bg-blue-500'
: willBeSelected
? 'bg-blue-200 dark:bg-blue-800'
: 'bg-gray-200 dark:bg-gray-700'
} transition-colors hover:bg-blue-600`}>
{isSelected && (
<Check
size={14}
className='text-white'
/>
)}
{willBeSelected && !isSelected && (
<div className='w-1.5 h-1.5 rounded-full bg-blue-400' />
)}
</div>
</Tooltip>
) : (
<button
onClick={handleCloneClick}
className='w-8 h-8 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center'>
<Copy className='w-5 h-5 text-gray-500 dark:text-gray-400' />
</button>
)}
</div>
</div>
</div>

65
frontend/src/components/regex/RegexCard.jsx
View File

@@ -62,38 +62,43 @@ const RegexCard = ({
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100 truncate'>
{pattern.name}
</h3>
{isSelectionMode ? (
<Tooltip
content={
isSelected
? 'Selected'
: willBeSelected
? 'Will be selected'
: 'Select'
}>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
<div className='w-8 h-8 flex items-center justify-center'>
{isSelectionMode ? (
<Tooltip
content={
isSelected
? 'bg-blue-500'
? 'Selected'
: willBeSelected
? 'bg-blue-200 dark:bg-blue-800'
: 'bg-gray-200 dark:bg-gray-700'
} transition-colors hover:bg-blue-600`}>
{isSelected && (
<Check size={16} className='text-white' />
)}
{willBeSelected && !isSelected && (
<div className='w-2 h-2 rounded-full bg-blue-400' />
)}
</div>
</Tooltip>
) : (
<button
onClick={handleCloneClick}
className='p-2 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700'>
<Copy className='w-5 h-5 text-gray-500 dark:text-gray-400' />
</button>
)}
? 'Will be selected'
: 'Select'
}>
<div
className={`w-6 h-6 rounded-full flex items-center justify-center ${
isSelected
? 'bg-blue-500'
: willBeSelected
? 'bg-blue-200 dark:bg-blue-800'
: 'bg-gray-200 dark:bg-gray-700'
} transition-colors hover:bg-blue-600`}>
{isSelected && (
<Check
size={14}
className='text-white'
/>
)}
{willBeSelected && !isSelected && (
<div className='w-1.5 h-1.5 rounded-full bg-blue-400' />
)}
</div>
</Tooltip>
) : (
<button
onClick={handleCloneClick}
className='w-8 h-8 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center'>
<Copy className='w-5 h-5 text-gray-500 dark:text-gray-400' />
</button>
)}
</div>
</div>
{/* Pattern Display */}