design improvements of transaction list item

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 ### Changed
 
-- Layout improvements of transaction list items
+- Layout/design improvements of transaction list items
 - Show account type list items expanded by default
 
 ## [0.4.2] - 2022-09-20

src/components/TransactionListItem.vue

@@ -1,15 +1,37 @@
 <template>
-  <div class="my-2">
+  <div
+    class="
+      mx-2 my-3
+      overflow-hidden
+      rounded-md
+      transition-all
+
+      focus-within:bg-background-hover
+      focus-within:shadow-md
+
+      hover:bg-background-hover
+      hover:shadow-md
+
+      dark:bg-background-dark
+    "
+  >
     <div
       class="
         grid
+        h-[45px]
         grid-cols-transactionListItem
         items-center
-        [&>*]:mx-2
+
+        [&>*]:flex
+        [&>*]:h-full
+        [&>*]:items-center
+        [&>*:first-child]:justify-center
+        [&>*:last-child]:justify-center
+        [&>*:not(:first-child):not(:last-child)]:mx-2
       "
       :class="
         {
-          'bg-unbalanced': isUnbalanced
+          'bg-unbalanced dark:bg-unbalanced-dark': isUnbalanced
         }
       "
     >

tailwind.config.js

@@ -14,9 +14,11 @@ module.exports = {
         'main-background': 'var(--color-main-background)',
         'background-dark': 'var(--color-background-dark)',
         'background-darker': 'var(--color-background-darker)',
+        'background-hover': 'var(--color-background-hover)',
         'primary-element': 'var(--color-primary-element)',
 
-        'unbalanced': colors.yellow[100]
+        'unbalanced': colors.yellow[100],
+        'unbalanced-dark': colors.yellow[700]
       },
       gridTemplateColumns: {
         'transactionListItem': '44px 1fr minmax(0, 4fr) repeat(2, 1fr) 44px'