From 8d28227da697a63810ac8a2e62ad495deeef3b12 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 12 Jan 2025 01:31:52 +1030
Subject: [PATCH] fix: standardize button sizes and improve selection
 indicators in ProfileCard and RegexCard components

---
 .../src/components/profile/ProfileCard.jsx    | 68 ++++++++++---------
 frontend/src/components/regex/RegexCard.jsx   | 65 ++++++++++--------
 2 files changed, 70 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/profile/ProfileCard.jsx b/frontend/src/components/profile/ProfileCard.jsx
index 8799777..20cdb04 100644
--- a/frontend/src/components/profile/ProfileCard.jsx
+++ b/frontend/src/components/profile/ProfileCard.jsx
@@ -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>
 
diff --git a/frontend/src/components/regex/RegexCard.jsx b/frontend/src/components/regex/RegexCard.jsx
index ba529f8..52e332e 100644
--- a/frontend/src/components/regex/RegexCard.jsx
+++ b/frontend/src/components/regex/RegexCard.jsx
@@ -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 */}