From 3d18dd7e47b83631e9ea1c7c75b3c451fd4faed8 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 20:32:46 +0300
Subject: [PATCH] Make the list list page look good

---
 src/components/list_card/list_card.vue | 34 ++++++++++++++++++++++----
 src/components/lists/lists.vue         |  1 +
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
index 7d6363ba..5b4fefc8 100644
--- a/src/components/list_card/list_card.vue
+++ b/src/components/list_card/list_card.vue
@@ -1,9 +1,33 @@
 <template>
-  <div>
-    <router-link :to="listLink(list.id)">
-      {{ list.title }}
-    </router-link>
-  </div>
+  <router-link
+    :to="listLink(list.id)"
+    class="list-card"
+  >
+    {{ list.title }}
+  </router-link>
 </template>
 
 <script src="./list_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-card {
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  flex: 1 0;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+}
+</style>
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index da0f126f..20dd46d8 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -10,6 +10,7 @@
         v-for="list in lists.slice().reverse()"
         :key="list"
         :list="list"
+        class="list-item"
       />
     </div>
   </div>