style(ui): align wallet and profile interactions

web/default/src/components/data-table/core/data-table-header.tsx

@@ -16,7 +16,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { flexRender, type Header, type Table as TanstackTable } from '@tanstack/react-table'
+import {
+  flexRender,
+  type Header,
+  type Table as TanstackTable,
+} from '@tanstack/react-table'
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { DataTableColumnHeader } from './column-header'
 import type { DataTableColumnClassName } from './types'

web/default/src/components/data-table/layout/data-table-page.tsx

@@ -344,7 +344,8 @@ function renderDesktop<TData>(
       splitHeader={fixedHeight}
       tableContainerClassName={fixedHeight ? 'h-full min-h-0' : undefined}
       tableHeaderClassName={cn(
-        fixedHeight && '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+        fixedHeight &&
+          '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
         props.tableHeaderClassName
       )}
       getColumnClassName={props.getColumnClassName}

web/default/src/components/data-table/layout/mobile-card-list.tsx

@@ -25,7 +25,6 @@ import {
 } from '@tanstack/react-table'
 import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { StatusBadgeTypeContext } from '@/components/status-badge'
 import { cn } from '@/lib/utils'
 import {
   Empty,
@@ -35,6 +34,7 @@ import {
   EmptyTitle,
 } from '@/components/ui/empty'
 import { Skeleton } from '@/components/ui/skeleton'
+import { StatusBadgeTypeContext } from '@/components/status-badge'
 
 interface MobileCardListProps<TData> {
   table: Table<TData>
@@ -211,7 +211,10 @@ function FallbackRow<TData>({ row }: { row: Row<TData> }) {
 
         if (!label) {
           return (
-            <div key={cell.id} className='flex justify-end overflow-hidden [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
+            <div
+              key={cell.id}
+              className='flex justify-end overflow-hidden [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'
+            >
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell)}
               </StatusBadgeTypeContext.Provider>

web/default/src/components/data-table/static/static-data-table-classnames.ts

@@ -22,7 +22,8 @@ export const staticDataTableClassNames = {
   embeddedContainer: 'rounded-none border-0',
   compactTable: 'text-sm',
   compactHeaderRow: 'hover:bg-transparent',
-  mutedHeaderRow: '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))] hover:[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
+  mutedHeaderRow:
+    '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))] hover:[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]',
   compactHeaderCell:
     'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase',
   compactHeaderCellRight:

web/default/src/components/provider-badge.tsx

@@ -38,20 +38,14 @@ export function ProviderBadge({
   return (
     <div
       data-slot='provider-badge'
-      className={cn(
-        'flex min-w-0 max-w-full items-center gap-1.5',
-        className
-      )}
+      className={cn('flex max-w-full min-w-0 items-center gap-1.5', className)}
     >
       {icon && <span className='flex shrink-0 items-center'>{icon}</span>}
       <StatusBadge
         label={label}
         autoColor={label}
         size='sm'
-        className={cn(
-          'min-w-0 shrink overflow-hidden',
-          !icon && 'pl-0'
-        )}
+        className={cn('min-w-0 shrink overflow-hidden', !icon && 'pl-0')}
         {...badgeProps}
       />
     </div>

web/default/src/components/ui/table.tsx

@@ -77,7 +77,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot='table-row'
       className={cn(
-        'group hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] has-aria-expanded:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] data-[state=selected]:bg-muted border-b transition-colors',
+        'group data-[state=selected]:bg-muted border-b transition-colors hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] has-aria-expanded:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))]',
         className
       )}
       {...props}

web/default/src/components/ui/titled-card.tsx

@@ -32,6 +32,7 @@ type TitledCardProps = {
   icon?: ReactNode
   action?: ReactNode
   children?: ReactNode
+  disableHoverEffect?: boolean
   className?: string
   headerClassName?: string
   contentClassName?: string
@@ -46,6 +47,7 @@ export function TitledCard({
   icon,
   action,
   children,
+  disableHoverEffect,
   className,
   headerClassName,
   contentClassName,
@@ -54,7 +56,10 @@ export function TitledCard({
   descriptionClassName,
 }: TitledCardProps) {
   return (
-    <Card className={cn('gap-0 overflow-hidden py-0', className)}>
+    <Card
+      data-card-hover={disableHoverEffect ? 'false' : undefined}
+      className={cn('gap-0 overflow-hidden py-0', className)}
+    >
       <CardHeader
         className={cn('border-b p-3 !pb-3 sm:p-5 sm:!pb-5', headerClassName)}
       >