Book form: change the icon background when book is read

front/src/BigIcon.vue

@@ -91,7 +91,7 @@ onUnmounted(() => {
     flex: 1;
     font-size: 16px;
     width: 100%;
-    padding-bottom: 0px;
+    padding-bottom: 5px;
   }
 
   .bigiconandlegend {

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;