From 93757126e1ec2469a853e5a2a45b09ff9fade1ff Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Fri, 6 Mar 2026 18:43:32 +0100
Subject: [PATCH] Book form: change the icon background when book is read

---
 front/src/BigIcon.vue  |  2 +-
 front/src/BookForm.vue | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/front/src/BigIcon.vue b/front/src/BigIcon.vue
index 1914c79..3b9112b 100644
--- a/front/src/BigIcon.vue
+++ b/front/src/BigIcon.vue
@@ -91,7 +91,7 @@ onUnmounted(() => {
     flex: 1;
     font-size: 16px;
     width: 100%;
-    padding-bottom: 0px;
+    padding-bottom: 5px;
   }
 
   .bigiconandlegend {
diff --git a/front/src/BookForm.vue b/front/src/BookForm.vue
index b8cb71a..7856296 100644
--- a/front/src/BookForm.vue
+++ b/front/src/BookForm.vue
@@ -125,7 +125,8 @@ function goToAuthor() {
     </div>
     <div class="column">
       <div class="iconscontainer" :class="data.read ? 'remove-border-bottom' : ''">
-        <div class="bigiconcontainer">
+        <div class="bigiconcontainer"
+             :class="data.wantread ? 'has-text-dark has-background-text border-radius-up-fill' : ''">
           <BigIcon
             icon="BIconEye"
             :legend="$t('bookform.wantread')"
@@ -187,6 +188,14 @@ img {
   .left-panel {
     margin-left: 3rem;
   }
+
+  .border-radius-up-fill {
+    border-radius: 45px 45px 0px 0px;
+  }
+
+  .bigiconcontainer {
+    display: flex;
+  }
 }
 
 @media (max-width: 1024px) {
@@ -199,6 +208,10 @@ img {
     flex: 1;
   }
 
+  .border-radius-up-fill {
+    border-radius: 38px 0px 0px 38px;
+  }
+
   .image {
     display: flex;
     justify-content: center;