Refactor transaction UI components for better responsive layout and consistency
- Remove explicit button sizes from transaction actions menu - Improve action buttons layout with flex containers and responsive classes - Add hideColumnTextOnMobile prop to DataTableViewOptions for better mobile control - Fix Tailwind class ordering and indentation in categorize page - Update transaction filters actions container for better mobile layout
This commit is contained in:
Víctor Falcón
parent
8e10f91653
commit
389e272318
|
|
@ -100,7 +100,6 @@ export function TransactionActionsMenu({
|
|||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className={
|
||||
!isKeySet || uncategorizedCount === 0
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
|
|
@ -138,7 +137,6 @@ export function TransactionActionsMenu({
|
|||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size={'sm'}
|
||||
className={
|
||||
!isKeySet
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
|
|
@ -166,7 +164,7 @@ export function TransactionActionsMenu({
|
|||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
size="icon"
|
||||
aria-label="More actions"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export function TransactionFilters({
|
|||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col flex-wrap items-center gap-3 sm:flex-row">
|
||||
<div className="flex flex-col items-center gap-3 sm:flex-row">
|
||||
<div className="flex w-full flex-row items-center gap-2 sm:w-auto">
|
||||
<Input
|
||||
placeholder={
|
||||
|
|
@ -406,11 +406,7 @@ export function TransactionFilters({
|
|||
Clear
|
||||
</Button>
|
||||
)}
|
||||
{actions ? (
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{actions}
|
||||
</div>
|
||||
) : null}
|
||||
{actions ? <div className="w-full">{actions}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1112,7 +1112,7 @@ export function TransactionList({
|
|||
isKeySet={isKeySet}
|
||||
hideAccountFilter={hideAccountFilter}
|
||||
actions={
|
||||
<>
|
||||
<div className="flex justify-end gap-2">
|
||||
{showActionsMenu && (
|
||||
<TransactionActionsMenu
|
||||
categories={categories}
|
||||
|
|
@ -1131,8 +1131,11 @@ export function TransactionList({
|
|||
/>
|
||||
)}
|
||||
{headerActions}
|
||||
<DataTableViewOptions table={table} />
|
||||
</>
|
||||
<DataTableViewOptions
|
||||
table={table}
|
||||
hideColumnTextOnMobile={false}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@ import {
|
|||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface DataTableViewOptionsProps<TData> {
|
||||
table: TableType<TData>;
|
||||
hideColumnTextOnMobile?: boolean
|
||||
}
|
||||
|
||||
export function DataTableViewOptions<TData>({
|
||||
table,
|
||||
hideColumnTextOnMobile = true,
|
||||
}: DataTableViewOptionsProps<TData>) {
|
||||
const columns = table
|
||||
.getAllLeafColumns()
|
||||
|
|
@ -35,9 +38,9 @@ export function DataTableViewOptions<TData>({
|
|||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<span className='hidden sm:inline'>Columns</span>
|
||||
<SlidersHorizontal className="ml-2 h-4 w-4" />
|
||||
<Button variant="outline" className='flex gap-2'>
|
||||
<span className={cn({ 'hidden sm:inline': hideColumnTextOnMobile })}>Columns</span>
|
||||
<SlidersHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
|
|
|
|||
|
|
@ -585,7 +585,7 @@ export default function CategorizeTransactions({
|
|||
<header className="flex items-center justify-between px-4 py-3 dark:border-zinc-800">
|
||||
<Link
|
||||
href={categorizeRoute.url()?.replace('/categorize', '')}
|
||||
className="hidden sm:flex items-center gap-2 text-sm text-zinc-600 opacity-50 transition-all duration-200 hover:text-zinc-900 hover:opacity-100 dark:text-zinc-400 dark:hover:text-zinc-100"
|
||||
className="hidden items-center gap-2 text-sm text-zinc-600 opacity-50 transition-all duration-200 hover:text-zinc-900 hover:opacity-100 sm:flex dark:text-zinc-400 dark:hover:text-zinc-100"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Transactions
|
||||
|
|
@ -627,7 +627,7 @@ export default function CategorizeTransactions({
|
|||
<span className="hidden sm:inline">Skip</span>
|
||||
<Kbd>Ctrl+N</Kbd>
|
||||
</Button>
|
||||
<div className="hidden sm:flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<div className="hidden items-center gap-2 text-sm text-zinc-600 sm:flex dark:text-zinc-400">
|
||||
<span className="font-medium text-zinc-900 dark:text-zinc-100">
|
||||
{remainingCount}
|
||||
</span>
|
||||
|
|
@ -673,11 +673,11 @@ export default function CategorizeTransactions({
|
|||
className={cn(
|
||||
'rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl shadow-zinc-200/50 transition-all duration-300 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-zinc-900/50',
|
||||
animationState === 'exiting' &&
|
||||
'translate-y-[-20px] scale-95 opacity-0',
|
||||
'translate-y-[-20px] scale-95 opacity-0',
|
||||
animationState === 'entering' &&
|
||||
'animate-card-enter',
|
||||
'animate-card-enter',
|
||||
animationState === 'idle' &&
|
||||
'translate-y-0 scale-100 opacity-100',
|
||||
'translate-y-0 scale-100 opacity-100',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
|
|
@ -700,20 +700,20 @@ export default function CategorizeTransactions({
|
|||
{currentTransaction
|
||||
.bank
|
||||
?.logo && (
|
||||
<img
|
||||
src={
|
||||
currentTransaction
|
||||
.bank
|
||||
.logo
|
||||
}
|
||||
alt={
|
||||
currentTransaction
|
||||
.bank
|
||||
.name
|
||||
}
|
||||
className="h-5 w-5 rounded"
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={
|
||||
currentTransaction
|
||||
.bank
|
||||
.logo
|
||||
}
|
||||
alt={
|
||||
currentTransaction
|
||||
.bank
|
||||
.name
|
||||
}
|
||||
className="h-5 w-5 rounded"
|
||||
/>
|
||||
)}
|
||||
<EncryptedText
|
||||
encryptedText={
|
||||
currentTransaction
|
||||
|
|
@ -750,8 +750,8 @@ export default function CategorizeTransactions({
|
|||
className={cn(
|
||||
'rounded px-1',
|
||||
currentTransaction.amount >=
|
||||
0 &&
|
||||
'bg-green-100/70 dark:bg-green-900',
|
||||
0 &&
|
||||
'bg-green-100/70 dark:bg-green-900',
|
||||
)}
|
||||
>
|
||||
{formatAmount(
|
||||
|
|
@ -770,11 +770,11 @@ export default function CategorizeTransactions({
|
|||
className={cn(
|
||||
'flex flex-col gap-4 px-6 pt-2 transition-all duration-300',
|
||||
animationState === 'exiting' &&
|
||||
'translate-y-[-10px] opacity-0',
|
||||
'translate-y-[-10px] opacity-0',
|
||||
animationState === 'entering' &&
|
||||
'animate-command-enter',
|
||||
'animate-command-enter',
|
||||
animationState === 'idle' &&
|
||||
'translate-y-0 opacity-100',
|
||||
'translate-y-0 opacity-100',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
|
|||
|
|
@ -1084,7 +1084,7 @@ export default function Transactions({ categories, accounts, banks }: Props) {
|
|||
accounts={accounts}
|
||||
isKeySet={isKeySet}
|
||||
actions={
|
||||
<>
|
||||
<div className="flex w-full justify-between gap-2 sm:justify-end">
|
||||
<TransactionActionsMenu
|
||||
categories={categories}
|
||||
accounts={accounts}
|
||||
|
|
@ -1101,7 +1101,7 @@ export default function Transactions({ categories, accounts, banks }: Props) {
|
|||
}}
|
||||
/>
|
||||
<DataTableViewOptions table={table} />
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue