From 5d604d0499efcc7553470a8ebeac5aa706d2e7ea Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 10 Sep 2024 18:10:50 +0200
Subject: [PATCH] Update Inspirations view: align tablist to left, add favorite
 button hover style

---
 src/views/Inspirations.vue | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/views/Inspirations.vue b/src/views/Inspirations.vue
index d5c38b1..3700188 100644
--- a/src/views/Inspirations.vue
+++ b/src/views/Inspirations.vue
@@ -82,6 +82,11 @@ function changeTab(newValue) {
 </script>
 
 <style scoped>
+/* Tabs */
+[role="tablist"] {
+  margin-left: 0;
+}
+
 /* Masonry */
 .masonry {
   --gap: var(--space-8);
@@ -95,7 +100,7 @@ function changeTab(newValue) {
   width: 100%;
   height: 100%;
   margin: 0;
-  border-radius: var(--rounded-lg);
+  border-radius: var(--rounded-2xl);
   overflow: hidden;
 }
 .masonry img {
@@ -103,15 +108,43 @@ function changeTab(newValue) {
   height: 100%;
   object-fit: cover;
 }
+.masonry > *:hover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--color-black-20);
+  z-index: 1;
+}
+.masonry > *:hover .favorite {
+  display: initial;
+}
 
 /* Favorite button */
 .favorite {
   position: absolute;
   top: 0;
   right: 0;
+  width: 3.5rem;
+  height: 3.5rem;
   margin: var(--space-8);
   padding: var(--space-8);
   color: var(--color-grey-400);
+  display: none;
+  z-index: 10;
+}
+.favorite[aria-pressed="false"]:hover::before {
+  content: "Ajouter dans mes favoris";
+  background: var(--color-background);
+  padding: 1.3rem 4rem 1.25rem 1rem;
+  position: absolute;
+  z-index: -1;
+  inset: -2px;
+  left: unset;
+  width: max-content;
+  border-radius: var(--rounded-xl);
+  color: var(--color-grey-700);
+  letter-spacing: var(--tracking-wide);
+  font-weight: 500;
 }
 .favorite[aria-pressed="true"] {
   color: var(--color-brand);