From cd87693fa122df22fcaa872804a8ea771b937c04 Mon Sep 17 00:00:00 2001
From: paultirk <paultirk@paultirk.com>
Date: Wed, 5 Oct 2022 10:55:59 +0200
Subject: [PATCH] design improvements of transaction list item

---
 CHANGELOG.md                           |  2 +-
 src/components/TransactionListItem.vue | 28 +++++++++++++++++++++++---
 tailwind.config.js                     |  4 +++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39f79431..3b30cf14 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/TransactionListItem.vue b/src/components/TransactionListItem.vue
index 13acf7c2..de4a8285 100644
--- a/src/components/TransactionListItem.vue
+++ b/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
         }
       "
     >
diff --git a/tailwind.config.js b/tailwind.config.js
index de7795e8..ee71294b 100644
--- a/tailwind.config.js
+++ b/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'