Tiny UI tweaks

This commit is contained in:
Igor Katson 2023-12-17 10:34:35 +00:00
parent 55f3b23eed
commit ee307c11c5
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
8 changed files with 14 additions and 14 deletions

View file

@ -25,7 +25,7 @@ export const Button: React.FC<{
e.preventDefault();
onClick();
}}
className={`inline-flex items-center gap-1 border rounded-lg disabled:cursor-not-allowed px-2 py-1 transition-colors duration-300 dark:border-slate-700 ${variantClassNames} ${className}`}
className={`inline-flex items-center gap-1 border rounded-lg disabled:cursor-not-allowed px-2 py-1 dark:border-slate-700 ${variantClassNames} ${className}`}
>
{children}
</button>

View file

@ -42,9 +42,9 @@ export const FileInput = ({ className }: { className?: string }) => {
onClick={onClick}
data={file}
resetData={reset}
className={className}
className={`group ${className}`}
>
<CgFileAdd className="text-blue-500 dark:text-white" />
<CgFileAdd className="text-blue-500 group-hover:text-white dark:text-white" />
<div>Upload .torrent File</div>
</UploadButton>
</>

View file

@ -19,7 +19,7 @@ export const IconButton: React.FC<{
const colorClassName = color ? `text-${color}` : "";
return (
<a
className={`block p-1 ${colorClassName} ${className}`}
className={`block p-1 text-blue-500 ${colorClassName} ${className}`}
onClick={onClickStopPropagation}
href="#"
{...otherProps}

View file

@ -30,10 +30,10 @@ export const MagnetInput = ({ className }: { className?: string }) => {
setModalIsOpen(true);
}}
data={magnet}
className={className}
className={`group ${className}`}
resetData={() => setMagnet(null)}
>
<CgLink className="text-blue-500 dark:text-white" />
<CgLink className="text-blue-500 group-hover:text-white dark:text-white" />
<div>Add Torrent from Magnet / URL</div>
</UploadButton>

View file

@ -74,16 +74,16 @@ export const TorrentActions: React.FC<{
<div className="flex w-full justify-center gap-2 dark:text-slate-300">
{canUnpause && (
<IconButton onClick={unpause} disabled={disabled}>
<FaPlay className="hover:text-green-500 transition-colors duration-300" />
<FaPlay className="hover:text-green-600" />
</IconButton>
)}
{canPause && (
<IconButton onClick={pause} disabled={disabled}>
<FaPause className="hover:text-yellow-500 transition-colors duration-300" />
<FaPause className="hover:text-amber-500" />
</IconButton>
)}
<IconButton onClick={startDeleting} disabled={disabled}>
<FaTrash className="hover:text-red-500 transition-colors duration-500" />
<FaTrash className="hover:text-red-500" />
</IconButton>
<DeleteTorrentModal id={id} show={deleting} onHide={cancelDeleting} />
</div>